Background
Photographers are interested in images, that surprises nobody. Presenting images large and in pleasant arrangements is of primary concern. Over on WordPress.com this has been recognized and is supported by a good number of themes and also with built-in tools, especially “galleries”.
In the self-hosted world much of the functionality can be imported with the use of the Jetpack plugin and its tools.
Settings
This site uses the theme Twenty Seventeen. The Jetpack plugin is installed and “Serve images from our global CDN” is ON to allow Tiled Mosaics galleries.
The Twenty Seventeen theme has a very large amount of white space, that makes for a narrow column and small image area. This site uses custom CSS code to make most of the space available for images. The custom code is as follows:
.wrap { max-width: 1400px; }
.has-sidebar:not(.error404) #primary {width: 70%;}
.has-sidebar #secondary {width: 25% !important; float: right;}
.page.page-one-column:not(.twentyseventeen-front-page)
#primary {max-width: 70%;}
The Media Width is set to 900 px
Sample gallery – Classic Editor
Below is a gallery of five photos inserted using the Classic Editor
Gallery as prepared in theGutenberg Editor
Light Up the Corners – Glow Run Gateway International Food and Music Festival 2017 Ludwig Keck (c) 2016 LJK1d8b3 D Peachtree Corners Festival 2017 Gateway International Food and Music Festival 2017
Review
As you can see, the Gutenberg editor did not come up with a matching look. The generated code is very much different from what the Classic Editor provides.
The tiling does not match the classic gallery nor does it look clean. Images off wider aspect ratio have been reduced in height to fit the column division.
Both galleries above use linking to “attachment page”. When clicking an image in the classic gallery the viewer is presented with a lightbox view. Try it. The Gutenberg gallery takes the visitor to a separate page with a thumbnail image. That is laughable at best.
Individual Images
This area is currently being revised
The image below attempts a setting to full column width by setting the Image Size to Full.
The Gutenberg editor setting panel is as shown on the right. Image Size is set to Full. The illustration shows that the original image is 1600 by 1200 pixels in size. The Link Setting is to “Attachment Page”.
Clearly the image is not as wide as the text. Clicking the image does result in a lightbox view as is expected. Note that this is a different result from what is provided in the gallery tool.
Spacing placeholder
.
.
.
.
.
.
Next the setting is Medium Large — Can you see the difference?
Now for some mangled code:
DONE — TESTING FULL WIDTH IMAGE