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.
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.