When to use this layout

Use responsive photo layouts when you're publishing a post (article) and you want to:

• Show multiple related images from an event
• Create visual variety in long articles
• Display before/after comparisons
• Showcase different perspectives of the same story

Use the UW Theme's built-in tools instead when working on a draft page instead of a post.

Implementation method

This layout uses custom HTML in WordPress Classic Editor. You'll need to switch to the "Code" tab to add the HTML directly.

Template for 2 photos across

<div class="wp-responsive-image-container" style="display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; align-items: flex-start;">
<figure class="wp-responsive-image-item" style="flex: 1 1 calc(50% - 0.5rem); min-width: 280px; margin: 0; text-align: left;">
<img style="width: 100%; height: auto; max-width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" src="YOUR-IMAGE-URL-1" alt="Descriptive alt text for image 1" />
<figcaption>Caption for first image goes here.</figcaption>
</figure>
<figure class="wp-responsive-image-item" style="flex: 1 1 calc(50% - 0.5rem); min-width: 280px; margin: 0; text-align: left;">
<img style="width: 100%; height: auto; max-width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" src="YOUR-IMAGE-URL-2" alt="Descriptive alt text for image 2" />
<figcaption>Caption for second image goes here.</figcaption>
</figure>
</div>

Template for 3 photos across

<div class="wp-responsive-image-container" style="display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; align-items: flex-start;">
<figure class="wp-responsive-image-item" style="flex: 1 1 calc(33.33% - 0.67rem); min-width: 280px; margin: 0; text-align: center;">
<img style="width: 100%; height: auto; max-width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" src="YOUR-IMAGE-URL-1" alt="Descriptive alt text for image 1" />
<figcaption>Caption for first image goes here.</figcaption>
</figure>
<figure class="wp-responsive-image-item" style="flex: 1 1 calc(33.33% - 0.67rem); min-width: 280px; margin: 0; text-align: center;">
<img style="width: 100%; height: auto; max-width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" src="YOUR-IMAGE-URL-2" alt="Descriptive alt text for image 2" />
<figcaption>Caption for second image goes here.</figcaption>
</figure>
<figure class="wp-responsive-image-item" style="flex: 1 1 calc(33.33% - 0.67rem); min-width: 280px; margin: 0; text-align: center;">
<img style="width: 100%; height: auto; max-width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" src="YOUR-IMAGE-URL-3" alt="Descriptive alt text for image 3" />
<figcaption>Caption for third image goes here.</figcaption>
</figure>
</div>

Step-by-step instructions

Step 1: Prepare your images

1. Upload images to your WordPress Media Library
2. Copy the full URL for each image you want to include
3. Write descriptive alt text for each image (keep under 150 characters)
4. Write captions for each image

Step 2: Add the HTML code

1. Switch to the "Code" tab (not "Visual") in your WordPress Classic Editor
2. Position your cursor where you want the photo layout to appear
3. Paste the appropriate template (2 or 3 photos)
4. Replace YOUR-IMAGE-URL-1, YOUR-IMAGE-URL-2, etc. with your actual image URLs
5. Update the alt text for each image
6. Add your captions in the <figcaption> tags
7. Switch back to "Visual" tab to see a preview of your layout

Step 3: Preview and publish

1. Preview your post to ensure images display correctly
2. Check the layout on mobile by resizing your browser window
3. Publish when satisfied with the appearance

How the responsive design works

The layout uses CSS flexbox to create responsive behavior:

• Desktop: Images display side by side in equal-width columns
• Mobile: When screen width drops below 280px per image, photos automatically stack vertically
• Tablet: Images may display 2 across or stack depending on screen size

Key features

• Responsive: Automatically adapts to different screen sizes
• Accessible: Includes proper alt text and semantic HTML structure
• Professional styling: Includes subtle shadows and rounded corners
• Consistent spacing: Maintains uniform gaps between images
• Caption support: Styled captions below each image

Accessibility considerations

This layout method meets WCAG AA 2.1 accessibility standards when implemented properly:

• Always include descriptive alt text for each image (keep under 150 characters)
• Ensure captions provide meaningful context
• Test with screen readers when possible
• Maintain sufficient color contrast in captions (the default #666 gray provides adequate contrast on white backgrounds)
• The semantic HTML structure with <figure> and <figcaption> elements ensures proper screen reader navigation
• Responsive design prevents horizontal scrolling issues that can affect users with motor disabilities

Troubleshooting

Images don't display: Check that image URLs are correct and images exist in your Media Library.

Layout breaks on mobile: Verify the min-width value allows images to stack properly.

Uneven spacing: Ensure you're using the exact gap calculations from the templates.

Caption formatting issues: Check that <figcaption> tags are properly closed and nested within <figure> elements.