Product Gallery

Xidipity Blog Post titled "Product Gallery" Image 010

 

lesson

 

Add a Product Gallery to a post which displays images and associated text. I am using a computer system board page from the NewEgg Online Store as my guide. To turn a product gallery into a real shopping experience requires the addition of ecommerce plugs. It is worth noting this design is not limited to product pages. The design works as an alternative to the solution presented in the “Photo Gallery” page. 

 

Design Notes

The product gallery is free form which means it is not constrained by image size or overall dimension. From an design perspective the only decision is the number of columns to display which is usually two or three. Although it is built from a table, it is responsive to the degree it will display a single column on mobile. I selected a table over flexbox or a grid as it displays better when printed.

 

The following are  a couple of things to keep in mind.

  1. If the desire is to create a gallery where the image presentation is uniform then the images will need to share the same aspect ratio and/or dimensions. The images in this gallery are 4×3.
  2. There are no hooks back to the WordPress database to provide filtering, sorting, and auto updates.
  3. The layout will display as designed on all devices with the exception of mobile which displays as a single column.
  4. The content may include headers, lists, blockquotes, and icons styled as desired.
  5. Whether all entries are contained in a single table or as is the case with this page in its own table is personal preference.  Using a table for each item may offer additional formatting options.

 

The demonstration will consist of four cards with each card containing an image on the left and content to the right. Mobile will display with the image top and content bottom.

 

The blue areas in this post were added for clarity and are not a part of the template.  

Image
Content

 

The foundation of this design is the responsive table template. How is this template different than the two column template or a standard table? The responsive table template allows more than two columns and like the two column template the output is shown as a single column on mobile.

 

Template

 


GitHub Gist

general / table / responsive


 

steps

 

1
images

 

If images will be loaded from the media library, perform any necessary preparations such as cropping and sizing to the desired aspect ratio. The images I am using for this demonstration are 960×960. I generally like to add images to the media gallery prior to adding them to the post. 

 

2
template

 

  1. Open template
  2. Highlight and copy to clipboard
  3. Place cursor where gallery will be located
  4. Click the ( save_alt ) embed button
  5. Paste clipboard into textbox
    By default the template assumes two columns. To make it three, insert an additional “<td></td>” tags at line 8.
  6. Click the “OK” button

 

3
add image

 

At this point you should see a dotted outline of two cards on the screen. To build the first card take the following steps.

 

  1. Place the cursor inside the first rectangle
  2. Press the enter key to add a blank line
  3. Move the cursor to the first blank line
  4. Click the [Add Media] button above the toolbar menu
  5. Select the first image
  6. Insert at the full size setting

 

At this point you should be seeing the image displayed on the left of the first card.  

Xidipity Blog Post titled "Product Gallery" Image 020

Content

 

4
add content

 

Remember step two from the add image section above. This is where adding a blank line pays off. It means when you click below the image there is a blank line to land on. At this point you can add anything desired. For this gallery I am adding some technical details of the photograph. The first card has the following.

 

ASUS ROG Dominus Extreme Intel LGA 3647 for Xeon W-3175X (C621) 12 DIMM DDR4 DIMM.2 U.2 EEB Performance Motherboard with Aquantia 10G LAN, USB 3.1


In stock. Limit 1 per customer. Ships from United States.

Sold and Shipped by Newegg


  • LGA 3647 socket, engineered to overclock Intel Xeon W-3175X processors
  • Designed for extreme performance, dual 24-pin, quad 8-pin and dual 6-pin 12V power connectors that deliver industry-leading power efficiency
    Quad strength graphic power featuring 4-Way PCIe 3.0 link supporting NVIDIA GeForce SLI, NVIDIA NVLink and AMD CrossFireX
  • Built for high performance networking: Onboard Aquantia AQC-107 10G LAN, Intel I219-LM Gigabit LAN, Intel Wireless AC-9260 Wi-Fi (802.11 ac) and ROG GameFirst technology
  • 5-Way Optimization featuring Auto-Tuning and FanXpert 4 provides automatic overclocking profiles for maximum OC performance, plus 14 PWM fan headers to support dynamic system cooling

 

$1,799.99

 

Here is how it looks in the card.

 

Xidipity Blog Post titled "Product Gallery" Image 020

ASUS ROG Dominus Extreme Intel LGA 3647 for Xeon W-3175X (C621) 12 DIMM DDR4 DIMM.2 U.2 EEB Performance Motherboard with Aquantia 10G LAN, USB 3.1


In stock. Limit 1 per customer. Ships from United States.

Sold and Shipped by Newegg


  • LGA 3647 socket, engineered to overclock Intel Xeon W-3175X processors
  • Designed for extreme performance, dual 24-pin, quad 8-pin and dual 6-pin 12V power connectors that deliver industry-leading power efficiency
    Quad strength graphic power featuring 4-Way PCIe 3.0 link supporting NVIDIA GeForce SLI, NVIDIA NVLink and AMD CrossFireX
  • Built for high performance networking: Onboard Aquantia AQC-107 10G LAN, Intel I219-LM Gigabit LAN, Intel Wireless AC-9260 Wi-Fi (802.11 ac) and ROG GameFirst technology
  • 5-Way Optimization featuring Auto-Tuning and FanXpert 4 provides automatic overclocking profiles for maximum OC performance, plus 14 PWM fan headers to support dynamic system cooling

 

$1,799.99

 

Customizations

With the content area just about everything is fair game. With the image there are also a couple of options. If you click the image a popup menu should show and if you click edit the available options are shown.

 

Caption

The caption is text displayed just below the image. If a caption was added when the image was loaded and the desire is to not show it here, simply delete it from this box.

 

Alternative Text

Adding alternative text is always a good idea as it improves usability and SEO.

 

Display Settings

For the most part the default setting are good unless you want to link the image. This is accomplished by the link option.

 

Advanced Options

Image Title Attribute

The image title attribute is the text shown when the cursor hovers over the image.

 

Image CSS Class

Xidipity supports the following classes.

 

  • rounded – add standard round edges to the image
  • rounded-lg – add enhanced round edges to the image
  • zoom – zoom image on hover
  • grayscale – convert image from gray to color on hover
  • focalpoint – sharpen image on hover

 

Many of these classes can be used together.

 

Other Link Attributes

In the event the image is linked under display settings, other link attributes can be defined here.  

 

demonstration

 

Xidipity Blog Post titled "Product Gallery" Image 020

ASUS ROG Dominus Extreme Intel LGA 3647 for Xeon W-3175X (C621) 12 DIMM DDR4 DIMM.2 U.2 EEB Performance Motherboard with Aquantia 10G LAN, USB 3.1


In stock. Limit 1 per customer. Ships from United States.

Sold and Shipped by Newegg


  • LGA 3647 socket, engineered to overclock Intel Xeon W-3175X processors
  • Designed for extreme performance, dual 24-pin, quad 8-pin and dual 6-pin 12V power connectors that deliver industry-leading power efficiency
    Quad strength graphic power featuring 4-Way PCIe 3.0 link supporting NVIDIA GeForce SLI, NVIDIA NVLink and AMD CrossFireX
  • Built for high performance networking: Onboard Aquantia AQC-107 10G LAN, Intel I219-LM Gigabit LAN, Intel Wireless AC-9260 Wi-Fi (802.11 ac) and ROG GameFirst technology
  • 5-Way Optimization featuring Auto-Tuning and FanXpert 4 provides automatic overclocking profiles for maximum OC performance, plus 14 PWM fan headers to support dynamic system cooling

 

$1,799.99

 

Xidipity Blog Post titled "Product Gallery" Image 030

ASUS ROG Zenith Extreme Alpha X399 HEDT Gaming Motherboard AMD Threadripper 2 (TR4) EATX DDR4 M.2 10G LAN USB 3.1 Gen2


In stock. Limit 5 per customer. Ships from United States.

Sold and Shipped by Newegg


  • Powered by AMD Ryzen Threadripper 2 (TR4) processors to maximize connectivity and speed with support for up to 128GB of DDR4 memory, three NVMe M.2 drives and front panel USB 3.1 Gen2
  • 5-Way Optimization featuring Auto-Tuning and FanXpert 4 provides automatic overclocking profiles for maximum OC performance
  • Built for high performance networking featuring onboard Aquantia 10G LAN, Intel gigabit LAN and ASUS LANGuard and GameFirst V technologies
    ROG DIMM.2 allows for expansion of 2 M.2 SSDs and has two heatsinks to prevent throttling
  • Full customization with a 1.3″ LiveDash OLED and ASUS Aura Sync RGB lighting via two addressable headers and one RGB header

 

$622.99

 

Xidipity Blog Post titled "Product Gallery" Image 040

MSI MEG X399 CREATION sTR4 AMD X399 SATA 6Gb/s USB 3.1 Extended ATX AMD Motherboard


In stock. Limit 5 per customer. Ships from United States.

Sold and Shipped by Newegg


  • AMD X399
  • Supports 1st and 2nd Gen AMD RYZEN THREADRIPPER Series Processors for SocketTR4
  • Supports DDR4 3600+(OC)/ 3466(OC)/ 3333(OC)/ 3200(OC)/ 3066(OC)/ 2933(OC)/ 2800(OC)/ 2667(OC)/ 2400/ 2133

 

$548.99

 

Xidipity Blog Post titled "Product Gallery" Image 050

GIGABYTE X399 AORUS Gaming 7 sTR4 AMD X399 ATX 3*M.2 4-Way SLI AMD Motherboard


In stock. Ships from United States.

Sold and Shipped by Newegg


  • AMD X399
  • Ryzen Threadripper Series
  • DDR4 3600+(O.C.)/ 3466(O.C.)/ 3333(O.C.)/ 3200(O.C.)/ 2933(O.C.)/ 2800(O.C)/ 2667/ 2400/ 2133

 

$366.99