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.>
½×
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.
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:
- Fully integrated with the TinyMCE editor and the Media Library
- Supports variable image sizes
- Supports a wide range of display columns
- Supports image captions
- Cells may be merged for larger images
- Cells may contain images and content
Disadvantages:
- Adding / deleting images may require rebuilding the gallery
- 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
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:
- Fully integrated with the TinyMCE editor and the Media Library
- Selectable image sizes
- Supports a wide range of display columns
- Definable presentation order or random order
Disadvantages:
- Adding / deleting images may require rebuilding the gallery
- Limited responsiveness
- 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
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:
- Add or remove images by changing the category.
- The display is fully responsive.
Disadvantages:
- Not integrated with the TinyMCE editor.
- Presentation order is not definable.
Tutorials
Use Case
The product gallery is built from a template uses a table as its foundation to display content as a single column on mobile.
Advantages:
- Fully integrated with the TinyMCE editor and the Media Library
- Supports variable image sizes
- Supports a 1 to 4 display columns
- Supports image captions
- Cells may contain images and content
- Supports video.
Disadvantages:
- Adding / deleting images may require rebuilding the gallery.
Tutorial
Use Cases
