Gutenberg: 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 [e-mail]
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
https://github.com/WordPress/gutenberg/issues/10057#issuecomment-423321078,
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.
https://github.com/WordPress/gutenberg/issues/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.
https://github.com/mmmnmnm/lahmacun/issues/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 !