Xidipity Product Gallery

Lesson

Add an Xidipity Product Gallery to a post which displays images and associated text.

 

Design Notes

The product gallery is created from a template and offers many possibilities. The design creates an info card and assumes each card will have an image and content as follows.

 

Image
Content

 

The layout was created with mobile in mind and accommodates users swiping from card to card. Typically the template links to another page or an external source.

 

The total height of the card is 600 pixels with a 1×1 aspect ratio space reserved for the image at the top. The width is managed by the Flexbox container and is approximately 360 pixels depending on the device being used.

 

Template

½×

GitHub Gist

template02.html

 

 Installation

  1. Ensure all images are available
  2. Highlight & copy the template to the clipboard
  3. Open the sandbox editor in a new tab / window
  4. Paste clipboard into the sandbox
  5. Highlight & copy lines 4-19 to the clipboard
  6. Paste clipboard to create 4 cards
  7. Highlight & copy updated template to the clipboard
  8. Click on the line where gallery will be placed
  9. Click the ( save_alt ) embed button
  10. Paste clipboard into textbox
  11. Click the “OK” button
  12. Highlight each ADD MEDIA marker and replace with the desired image
    Hint: Use the Add Media button to select images (captions not allowed)
  13. Highlight each CONTENT marker and replace with the desired content

 

Customizations

Like the idea but would like to tweak the design to meet your needs?

 

Image Options

Referencing the unmodified template in the sandbox editor and beginning with the image, the image is stuffed into the available space using the CSS property “object-fit”. The default setting is “contain” which simply means don’t let the image overflow the boundaries of the space. The nice thing about using this property is the aspect ratio of the image is preserved. However, there are four other options which may be considered. They are:

  • fill
  • cover
  • none
  • scale-down

 

Visit this mozillia site to see how changing this setting affects your image. To change the property add it to the image style on line 8.

 

For example, to change it to “cover” the image style would look as follows:

<img style="width: 100%; height: 100%; object-fit: cover;" ... />

 

To omit the image from the card and claim the space for content, change the class definition on line 7 from “flex-card-image” to “flex-card-image hidden”.  If you do not want to claim the space, use “invisible” instead of “hidden”.

 

The template is designed for images which are square. Images with other aspect ratio will work but will be letter boxed. That is to say there may be white space at the top and bottom margins or the left and right margins.

 

Content Options

The amount of space available is the total height of the card minus the space consumed by the image. If you need more or less content space add a style property to the “flex-card-item-container” tag on line 6.

 

For example, to change the height to 500 pixels line 7 would look as follows:

<div class="flex-card-item-container" style="height: 500px;">

 

Link Options

By default the card can only have one link as identified on line 5. Remove this function by removing “<a class=”mce:hidden flex-card-link” href=”#SOURCE-LINK”>​</a>” for each card you want to remove this function globally. 

 


demonstration


 

 

Chris Barbalis
  • Camera
    • NIKON D3300
  • Focal Length
    • H31.0mm
  • Aperture
    • ƒ/11.0
  • Shutter Speed
    • 1/13s

Steve Johnson
  • Camera
    • Canon EOS REBEL T2i
  • Focal Length
    • 50.0mm
  • Aperture
    • ƒ/2.2
  • Shutter Speed
    • 1/60s

Augustin de Montesquiou
  • Camera
    • Canon EOS 700D
  • Focal Length
    • 18.0mm
  • Aperture
    • ƒ/8.0
  • Shutter Speed
    • 1/200s

Michael Barón
  • Camera
    • Pixel
  • Focal Length
    • 4.7mm
  • Aperture
    • ƒ/2.0
  • Shutter Speed
    • 1/131s