Example Galleries Test Page

Image placement demo page

(This is the caption if you want one)

This page is to demo the various ways we can place images on a page so that they maintain image quality. The main thing is to not use the in-page image sizing settings, but to use browser-based settings, such as defining a column or a Media Grid or Masonry Media element. These appear to not ‘resize’ the image within WordPress, but define the space that the image fits in, then lets the browser scale the original file. Using Image Gallery elements still reduces image quality when it resizes within WordPress.

The exception to not using in-page image sizing is like the image to the right which is placed in the text box itself and set to 300×200 size. The quality seems to be maintained when the image is placed in the text and resized.

The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps. The rest of this text is so it all wraps.

This image is placed in a full width row with no in-page image resizing

These next two have no in-page sizing associated with them, but are placed in 1/2 page columns. The quality is not reduced when images are resized this way.

These next three have no in-page sizing associated with them, but are placed in 1/3 page columns. The quality is not reduced when images are resized this way.

These next four have no in-page sizing associated with them, but are placed in 1/4 page columns. The quality is not reduced when images are resized this way.

This next best option for a gallery-like display is using the “Media Grid” or “Masonry Media” elements. There is some minor image quality lost compared with the large image placement above, but both the thumbnails and the enlarged images are much better than in the various Image Gallery elements.

The examples below are:

  • The first one below is 2 images with 2 per row in a Media Grid.
  • The next is 6 images with 3 per row in a Media Grid.
  • The third is 2 images with 2 per row in a Masonry Media.
  • The fourth is 6 images with 3 per row in a Masonry Media.
  • The final one is a Masonry Media of 6 images with 3 per row using images with mixed proportions.

Both the Media Grid and Masonry Media also use the click to open and view larger function. Both elements display the ‘title’ field as input in the Media Library as the caption on the enlarged image.

You then need to edit the element’s ‘Item Design’. Unfortunately, captions are not that well supported:

  • If you use the “Media Grid: Default”, there will not be captions displayed on the grid, but they will display when they are clicked and opened up. The best option for showing caption type info  in the Media Grid is to use “Media Grid: Slide In Title” and then put the caption info in the title field. That is how the first Media Grid is set below.
  • If you use the “Masonry Media: Default”, there will not be captions displayed on the grid, but they will display when they are clicked and opened up. The best option for showing caption type info in the Masonry Media is to use “Masonry Media: Slide with Title and Caption” and then put the caption info in the title field. That is how the first Masonry Media is set below.

Note: The Media Grid option crops all images to a square. This may be useful if you have a lot of images of different proportions but want a cleaner looking grid. The Masonry Media keeps images at their original proportions and mosaics them together, which will appear neat if they are all the same proportions, but will look like a random tiling if they are a mix of horizontal and vertical and/or various proportions.

Note: Both of these elements look best if the total number of images is evenly divisible by both the rows and columns. For example, 6 images in 2 rows of 3 each, or 9 images in 3 rows of 3 each.

Media Grid: Slide In Title

Media Grid: Default

Masonry Media: Slide with Title and Caption

Masonry Media: Default (with images of all same proportion)

Masonry Media: Default (with images of differing proportions)

Translate »