External links in the Gallery block (was #5366)

[boatmik]

Howdy,

I've been digging around trying to find a solution to this.

Many of us want a gallery to do work on our website rather than just be a pretty feature.

Many of the Block based WP editors have this capability for their gallery blocks. So they must have assessed that there was a demand for it.

To do it would be great to have links - for me to link to more intensive information about the object in the image. Is the web to be visual or not. I use text links too. But the gallery allows a direct emotional link for the reader and immediate satisfaction.

The original thread on this was closed because someone on the team considered that there was no interest in developing this aspect.

After digging around to find a solution I see lots of questions on it around the web in various forae.

Thanks for your consideration and work.

Michael Storer.

[designsimply]

Hi! Thanks for raising this issue here. It has been a request for some time and, because of the way the underlying infrastructure for media is set up, there is not an easy way to a solution yet. Continuing to raise the issue and hearing from people who want this feature and who can take a moment to say a few details about their use case and why it is important to them would be good to collect going forward.

Here are a few example past requests from both WordPress.org and WordPress.com ideas forums:

• https://wordpress.org/ideas/topic/custom-links-on-images-within-a-gallery
• https://en.forums.wordpress.com/topic/link-gallery-images-to-pages-and-or-posts-or-external-url/

I have also added this issue to the Ideas project where it will be reviewed in the next phase of development after the editor is merged into the core WordPress project.

[boatmik]

Thankyou. It seems to me that images should be handled consistently across websites. That if a website has images, whether single or in a gallery grid they should be clickable to go to a meaningful link. Thankyou for passing this one. MIchael

…

On Fri, 21 Sep 2018 at 04:25, Sheri Bigelow ***@***.***> wrote: Hi! Thanks for raising this issue here. It has been a request for some time and, because of the way the underlying infrastructure for media is set up, there is not an easy way to a solution yet. Continuing to raise the issue and hearing from people who want this feature and who can take a moment to say a few details about their use case and why it is important to them would be good to collect going forward. Here are a few example past requests from both WordPress.org and WordPress.com ideas forums: - https://wordpress.org/ideas/topic/custom-links-on-images-within-a-gallery - https://en.forums.wordpress.com/topic/link-gallery-images-to-pages-and-or-posts-or-external-url/ I have also added this issue to the Ideas project where it will be reviewed in the next phase of development after the editor is merged into the core WordPress project. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#10057 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ApbA_c7nSvlzqAUrLPzpXX8Z5fjYl0Q2ks5uc_nEgaJpZM4Wxi5T> .

-- Websites Boat Plans - storerboatplans.com <http://storerboatplans.com/wp> Sailmaking - Really Simple Sails <http://reallysimplesails.com> Goose Sailboat <http://opengoose.com> Facebook Groups Really Simple Sails <https://web.facebook.com/groups/1741841469384966/> Storer Boat Plans <https://web.facebook.com/groups/storerboatplans/> Goat Island Skiff <https://web.facebook.com/groups/GoatIslandSkiff/?ref=bookmarks> Oz Goose sailboat <https://web.facebook.com/groups/opengoose/>

[commandantp]

+1 on this request. It's been "asked" for as long as 8 years. Now with Guttenberg released could you add the simple "custom url" option for images in what you now call "gallery"... Thanks! :)

ps: the reason is that the alignment of normal block images is always wrong if you're trying to have 2 next to each other. So I use gallery - but then can't link...

[timnicholson]

I would very much like this as well. I have no idea why WordPress let's you link a single image to a custom URL, but not multiple images.

I think any website that highlights themes, products, services, etc. is going to want to show images of those things with links to the individual pages that have more details about them. This is so common across websites I think it should be a core feature.

We'll need this not just for Galleries, but for Media & Text blocks as well. In fact, any block with an image should allow that image to be linked to a custom URL.

Here is a direct use-case from my home page. Each theme screenshot links to the detailed information page for that theme. Of course I had to build this manually with HTML and CSS. It certainly would be great to replicate this in GB without any code simply by using a Text & Media block followed by a Gallery Block.

[dkieffer]

This feature would be very useful to me. Often a collection of images acts as a list of links. +1 for this feature.

[andreimulbauer]

I'm also working on a website, and I have a gallery that I need to link to several internal pages, and I'm having to look for a plugin to fix that.

[hedgefield]

+1 for this, it is baffling that the image block has this functionality but the gallery does not. It's already possible to select each individual gallery image in a gallery and link it either to its attachment page or media page, so why not the custom URL option there too?

[boyanraichev]

I also think this is a must have feature.

For those that need it within the next 8 years before WordPress finally adds it, here is a workaround - when adding a caption in the gutenberg editor (double click on a gallery image), you can add a link in the

element. You can then use css to make the link align with the gallery image and simulate the needed behavior.

[qwik3r]

+1

[aduth]

It's already possible to select each individual gallery image in a gallery and link it either to its attachment page or media page, so why not the custom URL option there too?

As far as I can tell, the "Link To" field applies to the block as a whole, not to the selected image. As such, it's not quite as simple to add a "Custom URL" option, at least not without supporting just one URL for all images, rather than a distinct URL for each image.

I think the attribute structure of the block seems like it could (or even currently does?) support individual image links, but there may be some design / UX work necessary to distinguish the block controls from the individual image.

[hedgefield]

Ahh you're right, it is global for the whole block, while you can individually select each image and add a caption to it etc. So a bit more work than a copy-paste of a dropdown item so to speak, but yet another reason we should indeed clear up the UX of these settings.

[pattyok]

Adding a +1 on this.

Every one of my sites request this behavior (most common application is a groups of logos that link out). I have been getting by with the Gallery Custom Links plugin, but there seems to be an incompatibility with the rest API that the plugin owner is not sure how to fix and causes some random issues with the Gutenberg editor.

With the image block that has a link option my clients are totally confused as to why you can apply a link to an individual image but not one in a gallery... Seems like it's time to prioritize this one?

[matiyin]

+1

[dionysous]

I already commented on an similiar/duplicate issue: #14797

Why the Custom URL setting is useful for the Gallery Block

I really need this setting for the Gallery. I find it very useful to have a Custom URL setting in the GalleryImage component like we already have for the Image Block, so every GalleryImage in the Gallery can have its own custom link URL (individually).

There are other solutions where the link url and link target is saved directly in the image in the Media Library. This solution leads to problems. When the same image is used in different galleries, the link can not be set individually. I can't let my customers use the core Gallery Block, because it lacks this feature compared to the core Image Block.

The Core Image Block already has a good implementation

The Core Gallery Block & GalleryImage don't have the needed option

Why are the Image and GalleryImage settings so inconsistent? ( #11436 is also a bit related )

[dionysous]

Suggestion for the Gallery UI/UX

Add an option named "Custom URLs" to the "Link To" field in the controls sidebar. If this setting selected and you click on a single GalleryImage / select a single image in the Gallery, a URLInput field appears on top of the image. It could look like this:

This way, it would be easily possible to activate custom URLs in the sidebar and set individual URLs to each image in the Gallery.

[florianbrinkmann]

Would find that useful, too.

[peterpenguw]

+1

[bbertucc]

+1

[mapk]

I believe the plan for the Gallery block is to enable the Gallery to use nested Image blocks. When this happens, each Image block would include its features like adding a URL to the individual image which would resolve this issue.

@youknowriad, is this something we can begin development on?

[nirodaonline]

A js alternative to make gallery images clickable:

• use the caption to add the link

• run this script to move the link from the caption to the whole figure:

    //make gallery images clickable
    $('.blocks-gallery-item').each(function(index, el){
  
        if( $(el).find('figure figcaption a').length ){
  
            let $el = $(el);
            let figcaption = $el.find('figcaption');
            let a = $el.find('figcaption a');
            figcaption.html(a.text());
            a.html( $el.html() );
            $el.html( a.prop('outerHTML') );
  
        }
  
    });
  

Note: if you don't want the caption, just replace let figcaption = $el.find('figcaption'); with $el.remove('figcaption');

[paaljoachim]

Here is another Gallery issue. One that focus on keeping consistency between the Image Block and the Gallery Block. It is also the issue that @mapk speaks about. In relation to nested Image Blocks that are a part of the Gallery Block.
#11436

[sstabrizi]

Just adding a +1 that I think this is definitely a must-have feature, especially when competitors like CoBlocks already has it implemented in their Masonry block for example (shown below). There has to be a way to do this with the core Gutenberg Gallery block:

[noisysocks]

Implementation of this right now, as @aduth mentioned above, is not easy as the link URLs would need to be stored inline in the gallery's HTML. The current Link To setting is stored once for the entire block.

As @mapk says, there has been frequent talk among the editor team that the gallery block ought to be rewritten to use inner blocks. This would allow this issue to be addressed, but is a significant undertaking.

I'm removing the Needs Dev label as this specific issue isn't currently actionable by a developer. Of course, though, we'd welcome any developers who want to explore rewriting the gallery block to use inner image blocks.

[protoolreviews]

I echo the OP's usage. Using a gallery is the best way to organize a frequently-changing list of logos/manufacturers/etc...

I understand this might take significant work, but it seems very much with it as the current system seems inconsistent with how the rest of the Wordpress image insertion works. This would be a classic "doesn't work as expected" scenario.

[jivygraphics]

This is where I landed:

jQuery('.blocks-gallery-item').each(function () {
    if (jQuery(this).find('figure figcaption').length) {
      let link = jQuery(this).find('figure figcaption').text();
      jQuery(this).find('img').wrap('<a href="' + link + '" target="_blank"></a>');
      jQuery(this).find('figure figcaption').remove();
    }
  });

Started from @nirodaonline 's code - thank you.

[butifarra]

This is where I landed:

jQuery('.blocks-gallery-item').each(function () {
    if (jQuery(this).find('figure figcaption').length) {
      let link = jQuery(this).find('figure figcaption').text();
      jQuery(this).find('img').wrap('<a href="' + link + '" target="_blank"></a>');
      jQuery(this).find('figure figcaption').remove();
    }
  });

Started from @nirodaonline 's code - thank you.

Hello! I am looking into this and haven´t found a solution. The Gallery plugin doesn´t work, perhaps for the new WordPress version, I don´t know. I am new to WordPress. How do I use your function?
And, for the record, the solution given here works but it breaks the gallery in question and the block, you can´t add more galleries afterwards. Somebody there says to "append the html" but I didn´t grasp what he meant. Thanks in advance.
lahmacunradio/liquidsoap#142

[poespas]

Another way to go around this, (which isn't how it's supposed to work, obviously), is use the caption, set up a link, and span that link over the whole gallery item through CSS and a position: absolute .

[butifarra]

Thanks for your quick reply! I don´t know how to do that, how to write that piece of CSS code. Can you help me or send me a link to see how to do it?

[poespas]

Thanks for your quick reply! I don´t know how to do that, how to write that piece of CSS code. Can you help me or send me a link to see how to do it?

This wasn't a direct response to your reply, to have your JS snippet working, you have to put the piece of javascript/jquery code in your website, this can be done through multiple ways, I recommend following a tutorial like this , good luck !

[VonZubinski]

As addition to @nirodaonline and @jivygraphics jQuery approach and to help people like @butifarra, here is a temporary workaround in CSS that hijacks the image caption feature (thanks to @poespas for the initial idea)

1. Insert the CSS code (see below) into your child-theme style.css or the custom css tool in the theme customizer.

2. To add a custom link to an image, while in the gutenberg editor, insert a gallery, click on an image, click "write caption...", click the link icon and add your custom link, save changes.

3. The whole image should be linked and clickable in the frontend by now.

Bonus: If you still need the image caption feature, add the css class ".has-caption" to the gallery in gutenberg. This will re-enable the shadow background and display the white caption text at the bottom of the image again.

.blocks-gallery-grid .blocks-gallery-image figcaption, 
.blocks-gallery-grid .blocks-gallery-item figcaption, 
.wp-block-gallery .blocks-gallery-image figcaption, 
.wp-block-gallery .blocks-gallery-item figcaption,
.blocks-gallery-grid.is-cropped .blocks-gallery-image figcaption, 
.blocks-gallery-grid.is-cropped .blocks-gallery-item figcaption, 
.wp-block-gallery.is-cropped .blocks-gallery-image figcaption, 
.wp-block-gallery.is-cropped .blocks-gallery-item figcaption  {

    height: 100%;
    background: none;
    color: transparent;

}

.blocks-gallery-grid.has-caption .blocks-gallery-image figcaption, 
.blocks-gallery-grid.has-caption .blocks-gallery-item figcaption, 
.wp-block-gallery.has-caption .blocks-gallery-image figcaption, 
.wp-block-gallery.has-caption .blocks-gallery-item figcaption,
.blocks-gallery-grid.is-cropped.has-caption .blocks-gallery-image figcaption, 
.blocks-gallery-grid.is-cropped.has-caption .blocks-gallery-item figcaption, 
.wp-block-gallery.is-cropped.has-caption .blocks-gallery-image figcaption, 
.wp-block-gallery.is-cropped.has-caption .blocks-gallery-item figcaption  {

    background: linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent);
    background-size: auto 50px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    color: #fff;

}

.blocks-gallery-grid .blocks-gallery-image figcaption::before, 
.blocks-gallery-grid .blocks-gallery-item figcaption::before, 
.wp-block-gallery .blocks-gallery-image figcaption::before, 
.wp-block-gallery .blocks-gallery-item figcaption::before,
.blocks-gallery-grid.is-cropped .blocks-gallery-image figcaption::before, 
.blocks-gallery-grid.is-cropped .blocks-gallery-item figcaption::before, 
.wp-block-gallery.is-cropped .blocks-gallery-image figcaption::before, 
.wp-block-gallery.is-cropped .blocks-gallery-item figcaption::before 
{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
}

.blocks-gallery-grid .blocks-gallery-image a, 
.blocks-gallery-grid .blocks-gallery-item a, 
.wp-block-gallery .blocks-gallery-image a, 
.wp-block-gallery .blocks-gallery-item a,
.blocks-gallery-grid.is-cropped .blocks-gallery-image a, 
.blocks-gallery-grid.is-cropped .blocks-gallery-item a, 
.wp-block-gallery.is-cropped .blocks-gallery-image a, 
.wp-block-gallery.is-cropped .blocks-gallery-item a {
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
}

[paaljoachim]

A Gallery block containing nested Image blocks is being built in this PR: #25940
It could use some additional testing and feedback.

[pinkhairs]

Hi! I just wanted to post that this CSS worked for me perfectly without messing up the styling.

figure {
    position: relative;
}
figcaption {
	background: 0 !important;
	position: static !important;
}
figcaption a {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	color: #333;
	z-index: 999;
}

[benoittachet]

+1 here

I've found that it's already possible by modifying the gallery's HTML code, but Wordpress then tells me that block has invalid content. However, it still works, even with this error.

[peterpenguw]

2 years later we still got this problem huh.

…

On Fri, May 28, 2021 at 4:55 AM Benoit Tachet ***@***.***> wrote: +1 here I've found that it's olready possible by modifying the gallery's HTML code, but Wordpress then tells me that block has invalid content. However, it still works, even with this error. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#10057 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABF2T4CHQGQHZVFQQECDW23TP5LBZANCNFSM4FWGFZJQ> .

[paaljoachim]

Hello everyone.

There is a refactored Gallery block containing inner Image blocks.
Check out this PR and the comment from @glendaviesnz : #25940 (comment)
Then check out the first video to get an overview.

The refactored Gallery block will soon be added to the Gutenberg plugin.

There will be a parent "container" with the Gallery settings.
Each image (inner blocks) added to the Gallery will have the same settings as Image blocks have today, including adding different links to each image.

[glendaviesnz]

2 years later we still got this problem huh.

As @paaljoachim notes, the refactor of the gallery block is a better long term fix to this problem than adding a custom link option to the existing gallery, as it makes use of the existing functionality within the Image block, rather than having to duplicate this into the gallery block. 🤞 we won't be too far away from getting this merged into the plugin.