Building Project Galleries and Wide Media in Mira Vell

Mira Vell supports normal Blogger images as well as optional portfolio-specific media layouts. Use these only when you want a more editorial case-study presentation.

Starter HTML

<!-- Wide image -->
<figure class="mv-media-wide">
  <img src="YOUR-IMAGE-URL" alt="Describe the project image">
</figure>

<!-- Extra-wide image -->
<figure class="mv-media-full">
  <img src="YOUR-IMAGE-URL" alt="Describe the project image">
</figure>

<!-- Two-image pair -->
<div class="mv-image-pair">
  <figure><img src="FIRST-IMAGE-URL" alt="Describe the first image"></figure>
  <figure><img src="SECOND-IMAGE-URL" alt="Describe the second image"></figure>
</div>

<!-- Three-image gallery -->
<div class="mv-photo-gallery mv-photo-gallery--three">
  <figure><img src="FIRST-IMAGE-URL" alt="Describe the first image"></figure>
  <figure><img src="SECOND-IMAGE-URL" alt="Describe the second image"></figure>
  <figure><img src="THIRD-IMAGE-URL" alt="Describe the third image"></figure>
</div>

How to use it

1. In the Blogger post editor, switch to HTML view.
2. Place the chosen block where you want the images to appear.
3. Replace the sample image URLs and alt text.
4. Return to Compose view only if Blogger keeps the markup intact; otherwise finish that section in HTML view.

Images inside post content also participate in Mira Vell’s built-in image lightbox. Keep descriptive alt text for accessibility.