How to Add an Image Gallery to Blogger Posts (Grid, Slider, Show More)

A gallery puts several photos together without making the post endlessly long. The theme gives you three layouts: a grid, a row that swipes, and a "show more" button that keeps big galleries short. Every photo opens full size with a click, and readers can move through the whole gallery with arrows.

Paste every example on this page in the post editor's HTML view, not in Compose view. To get fast image code with alt text, use the Image Code Generator, then put the images inside a gallery.

How it's built

Wrap your images in <div class="gallery">. Each image can be a plain <img>, or a <figure> with a caption.

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
</div>

1. Grid

This is the default. Two columns, and every third photo spans the full width, so the gallery feels like a magazine page.

<div class="gallery">...</div>

Even grid

Add even for square photos of the same size: two columns on phones, three on wider screens.

<div class="gallery even">...</div>

2. Scroll

Add scroll to put the photos in one row. Readers swipe on phones or use the arrows on a computer, and a counter shows where they are.

<div class="gallery scroll">...</div>

3. Show more

Add data-show with the number of photos to show first. The last one gets a +N button that reveals the rest. It works with any layout.

<div class="gallery even" data-show="3">...</div>

Zoom and arrows

Click any photo in a gallery to see it full size. Use the arrows or the ← → keys to move to the next photo, and press Esc or click to close.

Give every photo real alt text. It helps Google Images and readers who use screen readers, and a gallery of photos with empty alt text tells them nothing.

Quick reference

You want	Write
Grid (every 3rd wide)	<div class="gallery">
Even grid	<div class="gallery even">
Swipe row	<div class="gallery scroll">
Show first N	data-show="N"
Caption on a photo	<figure><img><figcaption>