[TechNotes] How to post a gallery by URL images in WordPress 

[TechNotes] How to post a gallery by URL images in WordPress 

Most of the guidance is about uploading local pictures and designing the format.
However, sometimes we would prefer to put all the images to some more manageable image host (or even like GitHub), rather than WordPress. This reduces the pressure on the server memory and manages the image addresses easier.

This post introduces how to design multiple URL pictures’ format.

First, upgrade WordPress to 6.0/above. Then, the core idea is simple. If we want X images in a row, copy the bolded code part X times. And change the URL to a different images’ URL.

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped">

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://your pic URL1" alt=""/></figure>
<!-- /wp:image -->

</figure>
<!-- /wp:gallery -->

For instance, 2 images in a row.

The code is

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://cdn.jsdelivr.net/gh/jingcs/picDB/trips/Greece/santorini/gr_santo4.jpeg" alt=""/><figcaption>Fira</figcaption></figure>
<!-- /wp:image -->


<!-- wp:image {"id":28,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://cdn.jsdelivr.net/gh/jingcs/picDB/trips/Greece/santorini/gr_santo3.jpeg" alt="" class="wp-image-28"/><figcaption>Oia</figcaption></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

3 images in a row.

The code is

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped">
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://cdn.jsdelivr.net/gh/jingcs/picDB/trips/Greece/santorini/gr_santo4.jpeg" alt=""/><figcaption>Fira</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://cdn.jsdelivr.net/gh/jingcs/picDB/trips/Greece/santorini/gr_santo6.jpeg" alt=""/><figcaption>Fira</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"id":28,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://cdn.jsdelivr.net/gh/jingcs/picDB/trips/Greece/santorini/gr_santo3.jpeg" alt="" class="wp-image-28"/><figcaption>Oia</figcaption></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->
jingyu

1 comment so far

pager Posted on15:40 - 2022-12-30

Greetings! Very helpful advice within this post! Its the little changes that produce the greatest changes. Thanks for sharing!

Leave a Reply