Embellish Content with Galleries

Xidipity provides four different gallery options in support of numerous use cases. The “media gallery shortcode” pulls images from the media library by media category(s). The “linked gallery template” pulls images by URL and the “standard gallery” option is a quick and easy technique to add images to a page.>

Xidipity post titled "Embellish Content with Galleries" header image

½×

By definition, a gallery is a place where a collection of photographs or other works of art are displayed. In web design, a gallery a collection of images or videos displayed on a web page. Xidipity supports the following types of galleries.

 

  • Table (Optional Template)
  • Media Library Default
  • Category (Template)
  • Product (Template)

 

All of the solutions with the exception of the table gallery are responsive which means they will adjust to the available space. The table gallery can be made responsive by using the “responsive table template” or adding the class “responsive” to the table tag.

 

It is easier to add images ahead of time so all pertinent information can be entered and it is recommended the aspect ratio of all images grouped as a gallery are the same.

 

gallery / table

 

A long hand method of building a gallery is to use a table and place images in the cells. This actually works better than you might think. I find a two column gallery presents well using this format and I suggest adding “vertical-align: top;” to each cell property.

 

Advantages:

  1. Fully integrated with the TinyMCE editor and the Media Library
  2. Supports variable image sizes
  3. Supports a wide range of display columns
  4. Supports image captions
  5. Cells may be merged for larger images
  6. Cells may contain images and content

 

Disadvantages:

  1. Adding / deleting images may require rebuilding the gallery
  2. Not responsive

 

The first disadvantage is significant. If you anticipate applying updates on a regular bases, you may want to consider one of the other choices.

 

If you need help learning how to build a table please refer to the “The Art of Building Tables“.

 

For the purpose of this demonstration I created a two column by two row table which contains images from the media library.

 

Tutorial

 

gallery / media library

 

The native media gallery is a core feature of WordPress. Galleries are created by placing the cursor at the location where the gallery will be added and then clicking the “Add Media” button and then selecting the “Create Gallery” option.

 

Advantages:

  1. Fully integrated with the TinyMCE editor and the Media Library
  2. Selectable image sizes
  3. Supports a wide range of display columns
  4. Definable presentation order or random order

 

Disadvantages:

  1. Adding / deleting images may require rebuilding the gallery
  2. Limited responsiveness
  3. Captions are displayed by default

 

For the purpose of this demonstration I created a native media gallery of Leonid Afremov paintings. For those who are unfamiliar with Leonid Afremov, he is a Russian–Israeli modern impressionistic artist who works mainly with a palette knife and oils. His style is unique and unmistakable. Afremov is mainly known as being a self-representing artist who promotes and sells his work exclusively over the internet with very little exhibitions and involvement of dealers and galleries.

 

Tutorial

 

gallery / category

 

The category gallery pulls images from the media library by category. It also has the ability to pull the caption, description, or both which permits the creation of a variety of solutions. Presented for your consideration are a recipe tutorial, a photo blog tutorial, and an image library use case.

 

Advantages:

  1. Add or remove images by changing the category.
  2. The display is fully responsive.

 

Disadvantages:

  1. Not integrated with the TinyMCE editor.
  2. Presentation order is not definable.

 

Tutorials

 

Use Case

 

gallery / product

 

The product gallery is built from a template uses a table as its foundation to display content as a single column on mobile.

 

Advantages:

  1. Fully integrated with the TinyMCE editor and the Media Library
  2. Supports variable image sizes
  3. Supports a 1 to 4 display columns
  4. Supports image captions
  5. Cells may contain images and content
  6. Supports video.

 

Disadvantages:

  1. Adding / deleting images may require rebuilding the gallery.

 

Tutorial

 

Use Cases

 

 

 

avatar
About: Admin

My name is John Baer and I am the author of the Xidipity theme. My goal with Xidipity is to create a theme which is flexible and easy to use. This is accomplished by the application of templates and enhancing the classic editor. Xidipity leverages the latest web technologies to remain snappy.

 

 

Got Something To Say?

Your email address will not be published. Required fields are marked *