Xidipity

Knowledge Base

image gallery
Template: Image Gallery

To understand the potential of the template it is important to to look at the media library. Below are the key data elements associated with an image.

 

Media Library

Metadata
Xidipity WordPress Theme Knowledge Base From The Kitchen Image 3

Avocado Margaritas

 

Alternative Text

 

Caption

 

Description

 

Alternative Text

Although not used by the template, every image should have alternative text. The reasons for this are as follows.

 
  1. Describe images that fail to load
  2. Aid accessibility for non-visual readers
  3. Strengthen your SEO score

 

Caption

The caption data element aligns with the template ” #caption# ” marker. It should be noted the caption will accept css styling. For example, in the circumstance where the desire is to display the caption with blue text the solution is as follows.

 

<p style="color: blue;">Caption</p>

 

Description

The description is html content associated with the image. In this scenario it is the recipe and and it aligns with the ” #CONTENT# ” marker. Other common scenarios include sales information or specifications. For descriptions which are complex, it is recommended they be created on a separate page and then added using copy/paste.

 

Categories
  • Media Library
    • Gallery Media
      • From The Kitchen

 

Somewhat unique to Xidipity, images may also be assigned to one or more categories. In the case of the image above, it is assigned to “media library”, “gallery media”, and “from the kitchen” categories. The template assigns this data element to the ” #category# ” marker. In this scenario the category “from the kitchen” was used.

 

With this information in hand, the purpose of this template is to display a collection of images from the media library filtered by a category which optionally includes a caption and/or description.

Appearance

 
Editor view
Media Library Gallery
From The Kitchen

 

Web view
Media Library Gallery
From The Kitchen
Xidipity WordPress Theme Gallery

Banana-Blueberry Buttermilk Bread

 

The slight acidity of buttermilk tenderizes and moistens baked goods while allowing you to cut way back on butter or oils. Here, it also lends a slight tanginess to the winning combination of bananas and blueberries. To make muffins instead, see Muffin Variation.

 

auto_stories See full recipe …

 

Xidipity WordPress Theme Gallery

Spinach & Egg Sweet Potato Toast

 

Skip the gluten and get some vitamin C with this healthy sweet potato toast recipe. Topped with spinach, egg and a dash of hot sauce, it's a delicious alternative to eggs Benedict.

 

auto_stories See full recipe …

 

Xidipity WordPress Theme Gallery

Avocado Margaritas

 

Avocado in a margarita? You bet! It lends creaminess and beautiful color to this refreshing blended cocktail that's perfect for serving on taco night.

 

auto_stories See full recipe …

 

Xidipity WordPress Theme Gallery

Greek Chicken with Vegetables

 

This Greek-inspired chicken and vegetable sheet-pan meal is bursting with flavor. The chicken is coated in a mayonnaise and bread crumb mixture, roasted alongside asparagus, cremini mushrooms and grape tomatoes and then served with a lemon-feta vinaigrette.

 

auto_stories See full recipe …

 

Template

<!-- wpX:IMAGE/GALLERY -->
<div class="bdr:bas-2 bdr:lt-so-3x bkg:tint-bas-1 cnr:arch-sm fx:r fxa:1 fxc:3 web[dsp:none]">
  <div class="pad:hrz+0.5">
    <span class="fnt:siz-lg-5x sm)fnt:siz-lg-6x"><i class="icon:tb_ins_icon"></i></span>
  </div>
  <div class="pad:hrz+0.5">
    <h5>Media Library Gallery</h5>
    <div>
      <span class="pad:rt+0.125"><i class="icon:paperclip"></i></span>
      <span class="fnt:wgt-500">#title#</span>
    </div>
  </div>
</div>
<div class="mce[dsp:none]">
  [imgg class='#class#' style='#style#' caption='#caption#' content='#content#' orderby='#orderby#' order='#order#']#category#[/imgg]
</div>
<!-- /wpX:IMAGE/GALLERY -->
 

​Template may scroll horizontally in some circumstances.

Markers

#title#

The goal of the title marker is to provide a reference as to the purpose of the template and is displayed in the editor as a component of the annotation.

#class#

Optional class rule.

#style#

Optional style property value pair.

#caption#

Display the image caption data element. Options include:

 
  • l = left
  • c = center
  • r = right
  • x = none
#content#

Display the contents of the image description data element. Options include:

 
  • y = display description
  • n = do not display description
#orderby#

Identify the data element which will determine the list order.

#order#

Display images in either ascending or descending order.

  • a = ascending
  • d = descending
#category#

Limit images by identifying a media library category.

 

Installation

Steps
  1. highlight & copy template to clipboard
  2. click the line in your content where the list will be placed
  3. open the Xidipity Template Editor in a separate tab
  4. paste clipboard into the editor
  5. update the #title# marker as desired
  6. update the #class# marker as desired
  7. update the #style# marker as desired
  8. update the #caption# marker as desired
  9. update the #content# marker as desired
  10. update the #orderby# marker as desired
  11. update the #order# marker as desired
  12. update the #category# marker as desired
  13. highlight & copy updated template to clipboard
  14. click the toolbar insert template (  ) icon
  15. paste clipboard into the tool
  16. click OK to insert
​Notes

Image transitions may be applied by adding them as class rules. For example the transition above was achieved by the following rules.

 

  1. bdr:so-3x – set border to solid thick width
  2. bdr:wht – set border default color to white
  3. bdr:bas-1!hover – set border hover color to the base – 1
  4. bkg:bas-1 – set background color to base – 1
  5. cnr:arch-sm – frame images with small rounded corners
  6. trn:shrink!hover – shrink images on hover flare ​New

  • Since: v1.0.0

 

May 20, 2022