Absorb post-to-instagram: Image cropping, reordering, and temp file management

[chubes4]

Context

PTI has a sophisticated client-side image processing pipeline: crop with aspect ratio selection, drag-and-drop reorder, upload cropped blobs to temp storage, and daily cleanup. DMS has a basic /media/crop endpoint but lacks the full pipeline.

What PTI Has That DMS Needs

Client-Side Image Cropping

• Uses react-easy-crop library for visual crop UI
• Aspect ratio selector: Square (1:1), Portrait (4:5), Classic (3:4), Landscape (1.91:1)
• Auto-detects closest aspect ratio from first image dimensions
• Per-image crop/zoom state tracking
• Generates JPEG blobs (quality 0.9) via HTML5 Canvas

Image Reordering

• Drag-and-drop reordering via ReorderableThumbnails component (native HTML5 drag API)
• Numbered thumbnail strip for navigation
• Crop state synchronized with reorder position

Image Selection

• Extracts images from Gutenberg blocks (core/image, core/gallery) + featured image
• CustomImageSelectModal with grid view, selection ordering (1/10, 2/10, etc.)
• Shows "Posted" badge on previously shared images
• Checkbox to include/exclude already-posted images
• Maximum 10 images (Instagram API limit)

Temp File Management

• Cropped images uploaded to wp-content/uploads/pti-temp/
• Unique filenames with wp_unique_filename()
• Daily cleanup cron (pti_temp_cleanup_cron) deletes files > 24 hours old
• Filter to redirect upload_dir to temp subdirectory

Current DMS State

• DMS has a /media/crop REST endpoint that saves to dms-temp/
• DMS Gutenberg sidebar has basic image cropping with react-easy-crop
• Missing: reordering, image selection from post content, shared image tracking, cleanup cron

Tasks

• Port image selection from post content blocks
• Port drag-and-drop reorder functionality
• Port "already shared" badge and filtering
• Consolidate temp directories (PTI uses pti-temp/, DMS uses dms-temp/)
• Port daily cleanup cron for temp files
• Ensure deactivation cleanup removes cron hooks

Related

• PTI source: inc/Assets/src/js/components/CropImageModal.js, CustomImageSelectModal.js
• PTI source: inc/Core/Actions/Cleanup.php (82 lines)
• DMS source: inc/RestApi.php (crop endpoint)