Gallery

Present your images

Overview

With the gallery you present your collection of images in a fast, responsive and optimized way. Mame automatically creates small thumbnails (if not disabled), to keep the site size small and embeds lazy load for top notch performance, even with a huge image gallery.

Usage Examples

  • Present your company and office.
  • Show around your restaurant or hotel.
  • Family and holiday images.
  • ..

Gallery Properties

Applies to the whole gallery.
  1. Style: Choose the basic style of the gallery.
  2. Generate Thumbnails: Should Mame automatically generate thumbnails for uploaded images? This improves loading speeds and the size of the page. 

Gallery Item Properties

These properties apply per image (item).
  1. Image Title and Caption: Displayed on hover or below the image (depending on gallery style). Used as image alternate text (important for accessibility and search engines) when no Image Alt is supplied.
  2. Image Alt: Used to describe the image in an screen reader and search engine friendly way.
  3. Image: Click on select image to open the media manager. There you can choose to upload an image, select an existing one or use set an external URL for the image.
  4. Link: Optional link where the image should point to. Please note: This is overwriting the dialog / modal displaying the large image.
Everything else can be configured with the general properties. 
Accordion Element Wireframe

See it in action

+

+

+

Interactions and Accessibility

Users can navigate between the gallery items by pressing Tab and open them by pressing Enter. 

Galleries are accessible, don't forget setting the image alt (or a meaningful title as a fallback).

Generated HTML (outline)

Depends partly on the selected style.

<div class="mame-element mame-gallery" ...>
   <div class="mame-element mame-gallery" style="..">
     <div style="--d:grid; --gtc:1fr 1fr 1fr; --gtc-sm:1fr; --gtc-md:1fr 1fr; --gtc-lg:1fr 1fr 1fr; --gtc-xl:1fr 1fr 1fr; --gg:10px;">
       <div class="mame-gallery__item">
         <div class="mame-gallery__image" role="img" aria-label=".." title="First Image" style="--bgi:url(...);"></div>
          <div class="mame-gallery__border" aria-hidden="true"><h1 style="--m:0;">+</h1></div>
       </div>
    </div>
 </div>

Gallery Style / CSS Selectors


.mame-gallery {
  /* All gallery elements */
}

.mame-gallery__item {
  /* All gallery image items */
} 

.mame-gallery__image {
  /* All gallery images */
}

.mame-gallery__border {
  /* The border / effect (depends on style) */
}

JavaScript

Galleries are implemented in HTML 5 and CSS 3. For the full view a minimal JavaScript lightbox implementation is used (included in the base.js).

Was this article helpful?