Images and Files — Wash Docs

Wash: Blog Manager handles automatic image and file synchronization from WordPress to Shopify, including optimization, CDN delivery, and proper URL replacement.

How Image Sync Works

Sync Process

flowchart TD
    A[WordPress Media Library] --> B[Image Detection]
    B --> C[Processing]
    C --> D[Upload to Shopify]
    D --> E[URL Replacement]

    B -.- B1["Featured image, In-content images, Gallery images, ACF image fields"]
    C -.- C1["Resize optional, Optimize, Format conversion"]
    D -.- D1["Files API, CDN storage"]
    E -.- E1["Update content, Update metafields"]

What Gets Synced

Image Type	Auto-Synced	Notes
Featured image	Yes	Becomes article image
Content images	Yes	URLs replaced with Shopify CDN
Galleries	Yes	Each image uploaded
ACF images	Yes	If mapping configured
Background images (CSS)	No	Must be manual
External URLs	No	Already hosted elsewhere

Configuration

Enable Image Sync

Go to Wash: Blog Manager > Settings
Find Images & Files section
Toggle Enable Image Sync to On

Image Settings

Setting	Description	Default
Sync featured images	Include post featured image	On
Sync content images	Upload images from post content	On
Sync galleries	Upload gallery images	On
Max width	Resize images wider than this	2048px
Max height	Resize images taller than this	2048px
Quality	JPEG compression (60-100)	85
Convert to WebP	Use modern format	On
Preserve original	Keep original in Shopify	Off

File Settings

Setting	Description	Default
Sync attachments	Include PDF, docs, etc.	Off
Max file size	Skip files larger than	20MB
Allowed types	File extensions to sync	pdf, doc, docx

Image Processing

Automatic Optimization

Wash: Blog Manager optimizes images during sync:

flowchart TD
    A["Original Image (5MB, 4000x3000)"] --> B["Resized (max 2048px wide)"]
    B --> C["Compressed (quality 85)"]
    C --> D["Converted to WebP (if enabled)"]
    D --> E["Uploaded to Shopify (500KB)"]

Size Limits

Constraint	Limit
Max file size	20 MB
Max dimensions	4472 x 4472 px
Min dimensions	No limit
Recommended	2048px max width

Supported Formats

Input (WordPress):

JPEG / JPG
PNG
GIF (static and animated)
WebP
BMP
SVG (limited support)

Output (Shopify):

JPEG (converted from most formats)
WebP (if enabled)
PNG (if transparency needed)
GIF (animated preserved)

URL Handling

Automatic URL Replacement

Content image URLs are automatically updated:

Before (WordPress):

<img src="https://yourblog.com/wp-content/uploads/2024/01/hero-image.jpg" />

After (Shopify):

<img src="https://cdn.shopify.com/s/files/1/0123/4567/8901/files/hero-image.jpg" />

Featured Image

WordPress featured image becomes Shopify article image:

{{ article.image | image_url: width: 800 }}

Responsive Images

Wash: Blog Manager preserves responsive image markup:

WordPress srcset:

<img src="image-800.jpg" srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
/>

Shopify (using image_url filter):

<img src="{{ image | image_url: width: 800 }}" srcset=" {{ image | image_url: width: 400 }} 400w, {{ image | image_url: width: 800 }} 800w, {{ image | image_url: width: 1200 }} 1200w "
/>

Managing Images

Image Dashboard

View synced images:

Go to Wash: Blog Manager > Media
See list of synced images

Image	Original	Optimized	Status	Article
hero-image.jpg	2.5 MB	450 KB	Synced	Post Title
product-1.png	1.8 MB	320 KB	Synced	Post Title
infographic.png	5.2 MB	Error	Failed	Post Title

Re-sync Images

To re-upload images:

Select article(s) in Wash: Blog Manager > Posts
Click Re-sync Images
Wait for processing

Clear Image Cache

Remove cached image data:

Go to Wash: Blog Manager > Settings > Advanced
Click Clear Image Cache
Next sync will re-process all images

Advanced Features

Lazy Loading

Wash: Blog Manager preserves lazy loading attributes:

<img src="image.jpg" loading="lazy" />

Alt Text Sync

Image alt text is preserved:

<!-- WordPress -->
<img src="image.jpg" alt="Product description" /> <!-- Shopify -->
<img src="cdn-image.jpg" alt="Product description" />

Configure alt text handling:

Option	Behavior
Preserve	Keep WordPress alt text
Generate	Use filename if empty
Override	Use post title

Caption Sync

Figure captions are converted:

WordPress:

<figure> <img src="image.jpg" alt="Description" /> <figcaption>Image caption text</figcaption>
</figure>

Shopify (preserved):

<figure> <img src="cdn-image.jpg" alt="Description" /> <figcaption>Image caption text</figcaption>
</figure>

External Images

By default, external images are not synced:

<!-- Not synced - already on external CDN -->
<img src="https://images.unsplash.com/photo-123456.jpg" />

Option: Enable Internalize External Images to download and re-upload external images.

File Attachments

Supported File Types

Type	Extensions	Sync Support
Documents	pdf, doc, docx	Yes
Spreadsheets	xls, xlsx, csv	Yes
Presentations	ppt, pptx	Yes
Archives	zip	Yes
Audio	mp3, wav	Yes (limited)
Video	mp4	No (size limits)

File Sync Configuration

Go to Wash: Blog Manager > Settings > Files
Enable Sync Attachments
Select allowed file types
Set size limits

Linking to Files

Files are uploaded to Shopify's Files section:

<a href="{{ 'document.pdf' | file_url }}">Download PDF</a>

Performance Optimization

Batch Processing

Large image sets are processed in batches:

flowchart LR
    A["100 images to sync"] --> B["Batch 1: 1-20"]
    B --> C["Batch 2: 21-40"]
    C --> D["Batch 3: 41-60"]
    D --> E["Batch 4: 61-80"]
    E --> F["Batch 5: 81-100"]

    B -.- B1["processing..."]
    C -.- C1["queued"]
    D -.- D1["queued"]
    E -.- E1["queued"]
    F -.- F1["queued"]

CDN Benefits

Shopify's CDN provides:

Global edge locations
Automatic WebP serving
Responsive image transforms
Fast delivery

Image Transform Parameters

In your theme, use Shopify's image_url filter:

{{ image | image_url: width: 400 }}
{{ image | image_url: height: 300 }}
{{ image | image_url: width: 400, crop: 'center' }}

Troubleshooting

Image Not Uploading

Check:

Image file size under 20MB
Supported format
WordPress media library accessible
Shopify API not rate limited

Image Quality Issues

If images look worse:

Increase quality setting (85-95)
Disable WebP conversion
Increase max dimensions
Check original image quality

Broken Images After Sync