How Do I Add a Link to a Gallery Image with Post and Page Builder?

Hi William,

The current gallery block does not have the option to add a custom URL unfortunately. Our developers have been notified about this and hopefully they can get it back incorporated in an upcoming update.

A workaround is to use a 3 -5 column layout as your base then add an image block to each column. With the Image block you’ll be able to click your image to bring up additional options. Click the Pencil icon and choose custom URL from the Link to dropdown.

Below is an example of a 3 column gallery layout I found using our block template library by selecting Add Block and changing the Type to Gallery. You may be able to use this block as a base for your own gallery design:

<div class="color4-background-color color-4-text-contrast bg-background-color tmpl-gallery-4 boldgrid-section dynamic-gridblock">
<div class="container">
<div class="row" style="padding-top: 100px; padding-bottom: 60px;">
<div class="col-md-12 col-sm-12 col-xs-12">
<h2 class="h1 color1-color" style="text-align: center;">Gallery Image Example</h2>
<div class="row bg-editor-hr-wrap">
<div class="col-md-12 col-xs-12 col-sm-12">

<hr class="color1-color bg-hr" style="border: 1px solid; margin-right: auto; margin-left: auto;" width="25%">

</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 20px; padding-bottom: 30px;">
<div class="col-md-4 col-sm-4 col-xs-6">
<p class=""><img class="bg-img bg-img-square wp-image-193" src="https://demo2.cloudwp.dev/trial-c1e5fca7/wp-content/uploads/2021/11/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw400h250fitcrops11c8a576b4597b9c6b7925849390f95c.jpg" width="400" height="250"></p>

</div>
<div class="col-md-4 col-sm-4 col-xs-6">
<p class=""><img class="bg-img bg-img-square wp-image-191" src="https://demo2.cloudwp.dev/trial-c1e5fca7/wp-content/uploads/2021/11/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw400h250fitcrops3a64a4b87ebacf99c5fe080221d15d71.jpg" width="400" height="250"></p>

</div>
<div class="col-md-4 col-sm-4 col-xs-6"><
<p class=""><img class="bg-img bg-img-square wp-image-192" src="https://demo2.cloudwp.dev/trial-c1e5fca7/wp-content/uploads/2021/11/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw400h250fitcrops9f38aa27031ff1f870295b0fb6714e0b.jpg" width="400" height="250"></p>

</div>
</div>
<div class="row" style="padding-top: 30px; padding-bottom: 20px;">
<div class="col-md-4 col-sm-4 col-xs-6">
<p class=""><img class="bg-img bg-img-square wp-image-195" src="https://demo2.cloudwp.dev/trial-c1e5fca7/wp-content/uploads/2021/11/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw400h250fitcrops2ad602af392e754068d42b67bc4c44ce.jpg" width="400" height="250"></p>

</div>
<div class="col-md-4 col-sm-4 col-xs-6">
<p class=""><img class="bg-img bg-img-square wp-image-196" src="https://demo2.cloudwp.dev/trial-c1e5fca7/wp-content/uploads/2021/11/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw400h250fitcrops10c059e2fae8e3d2dd8fbaebc28ae558.jpg" width="400" height="250"></p>

</div>
<div class="col-md-4 col-sm-4 col-xs-6"><
<p class=""><img class="bg-img bg-img-square wp-image-194" src="https://demo2.cloudwp.dev/trial-c1e5fca7/wp-content/uploads/2021/11/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw400h250fitcrops7509d7f3453374b4ce4aea588dea2fd3.jpg" width="400" height="250"></p>

</div>
</div>
</div>
</div>

Simply switch to the Text editor tab from the top left corner of your page builder, copy/paste the code above and switch back to the Visual editor to edit the block visually.

I hope this helps! Please reach back out if you have any other questions or concerns.

You’re welcome William!

Yes it struck me as odd as well that this feature was no longer available. I think it may have been removed for some testing or development purpose somewhere along the way. We should have that functionality re-added in an upcoming plugin update or patch release.

Thanks for your understanding!