Profile picture for user admin
Daniel Sipos
15 Feb 2013

Image Link Formatter is a really handy module that allows you to have a link behind the images you upload via the Drupal core image field. It does so by combining it with another contrib module: Link.

So to get it working you install both modules and then you add a Link field and an Image field to the content type you want this to happen for. On the Manage Display tab you can hide the Link field so it doesn’t show up on your node page - since that is not the point of using this particular field. Remember, you can add multiple Link fields to the content type if you need to.

Next (still on the Manage Display tab), instead of Image as the format for your Image field, you select Image Link Formatter. In the image style configuration, you can still choose whichever style you want to use for displaying the image but under Link image to you have to select Link (field_link).

For me it is field_link in parentheses because that is how I named the Link field I just created. For you it may be different.

Now, when you create a new node of that type, you upload the image like you normally would and you add a URL to the Link field as usual. And now when you view your node, the URL in the Link field will be behind the image that gets displayed on the page. And you still have available all the typical config options for the Link field - like the target page, rel attribute and others. Isn’t that great?

But now for the kicker: what do you do when you have multiple images in that one Image field? and you need different links for all of them... If you don’t know how to get multiple images in one field, all you need to do is select the Number of values users can enter in the field - under the Image field settings. Now, to get different links behind each of them, do the same with the Link field, i.e. allow users to select multiple values for it as well.

Then when you create your node, upload multiple images and add multiple links. The order of the images you upload will correspond to the order of the links you add. So for instance the third image in the field will have behind it the third link you add. So all you need to do is count. And that my friends is pretty cool.

Have at it and let me know how it works out for you.

Profile picture for user admin

Daniel Sipos

CEO @ Web Omelette

Danny founded WEBOMELETTE in 2012 as a passion project, mostly writing about Drupal problems he faced day to day, as well as about new technologies and things that he thought other developers would find useful. Now he now manages a team of developers and designers, delivering quality products that make businesses successful.

Contact us

Comments

Farris 27 Feb 2013 11:27

Great!

This is just exactly what I need. Been trying to put links on the web graphics I got from http://www.yourwebgraphics.com/ but I can't get it to work. I thought the trouble was with the images or something. Glad to know it's not that. Thanks a lot for this.

Dalin 03 Mar 2013 21:05

Or just use the Linked Field

Or just use the Linked Field module which is a whole lot more flexible

Daniel Sipos 03 Mar 2013 23:10

Thanks for the comment!

Thanks for the comment!

Can you also add different links to multiple images uploaded in one field?

Larry H 16 Jul 2014 06:53

I don't have a Link option in

I don't have a Link option in the following 'Link image to' drop down described in the instructions above:
"
but under Link image to you have to select Link (field_link)
"
? How do I add a Link option ?? My current choices are File, Content and Nothing

nurul 13 Oct 2014 05:02

hi, thanks this module is

hi, thanks this module is great! but i arranged my node using Nodequeue module, i cant get to directly open the link from the block that i used. really appreciate if you can guide me through this.

Agustín Jiménez Chacón 04 Aug 2016 18:54

A Great Help!

Hey Danny Sipos!Your post really saved me in order to provide a link behind an image!After a long search I found your article and it was just "follow your steps"...Thanks a lot!!!

Add new comment