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

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

Web view

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 …

 

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 …

 

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 …

 

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

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}