I'm using Image fields with Drupal 7 and I'm wondering if there is any way to add a hyperlink for each image?

A little about my setup:
I created a custom content type with custom image fields.
I have image fields with unlimited values.


spovlot’s picture

What do you want to link to? Do you also have URLs in your content type?

Or if you want a lightbox pop up like ColorBox (http://drupal.org/project/colorbox)

musiman’s picture

I would like to simply make it that we can insert a custom hyperlink. Basically what I'm doing is a banner system of sorts.

Do you know if that can be done?

spovlot’s picture

You probably want to add a link field to you content type using Link (http://drupal.org/project/link).

Then you can output your image and link with Views (http://drupal.org/project/views) to create a block to show your banner. You can use the Field Rewrite to link the image to the link URL.

Another option is to use theme templates to change the node template output.

musiman’s picture

thanks for your suggestions. I'll see what I can come up with.

chowdah’s picture

  • If you use Views, make sure to enable the Tokens module.
  • Add a custom url field to the content type holding the image(s) - Link module recommended, but this may also work with a plain text field.
  • In the View choose to ouput fields.
  • Output the field that holds the image and the field that holds the custom url.
    • Make sure the link field is arranged in the output so that it precedes the image field to make the link field accessible to the image field.
    • On the image field configuration page, don't use the 'Rewrite the output of the this field' option, use the one below it instead: 'Output this field as a link'.
      • In the Link path field enter the token for the url
        • See 'Replacement patterns' link on the form for a list of valid tokens
      • Check the box that says 'External server URL'
      • More options to customize the links are available, so set them as you wish
ThePickwickProject’s picture

Maybe one small addition to this great explanation: if you use the Link module, make sure to set Link Title to No Title, otherwise the image will link to a url with the Link Title rather than to the URL.

jenyum’s picture

Have you had any luck with this? I have been trying to do the same thing, with no joy. The problem is there is no way to associate multiple image values on a single node with multiple link field values on a single node. Cool that we can have these things in Drupal 7, but fairly useless if we can't make associations between them.

Without the link image field module, you can only link an image to its own node, or link a single image field value to a single link field value via views (and views is the long way around for something that should just work on the node.)

spovlot’s picture

Another option is to use the Field Collection module (http://drupal.org/project/field_collection) to "combine" a link and image together. You can use theming to create a linked image output from this field collection.

There are also some associated modules like Field Slideshow that support Field Collections to add links similar to what you want.

jenyum’s picture

Thanks, that's a little closer. This still requires a custom template just to customize an image link. There has got to be a better way.

spovlot’s picture

I think you are assuming that "everyone" wants to link external URLs with images. Drupal handles the case where you want to use an image to link to node content. But images to external links is not a standard use case.

Theming the field collection or creating the image link in Views is relatively simple. If you need more assistance, let me know.

jenyum’s picture

Most people want flexibility, as a general rule. It is odd to assume that everyone only wants to link to the node, particularly since images are often displayed on their node. I can theme the field collection or cobble something together with views, but this does nothing for the ultimate maintainer of the website who would rather not hire a Drupal developer every time they create a new content type.

An out of the box vanilla install of Wordpress comes with the ability to add a custom link to an image. This has become what most people (as opposed to most Drupal developers) would expect from a content management system. With all of the tremendously complex things we can do with Drupal without writing any code, it's bizarre that something this ordinary is not possible without jumping through time consuming hoops.

As a one-person shop, it is my job to sell people on the CMS, as well as to do the work. It's hard to explain to people why they would want Drupal (because they need scalability and community features) when basic content management tasks seem so complex. If everyone were a developer we wouldn't need any of these tools, but that's not really the point.

At any rate, I made a feature request for Drupal core.


spovlot’s picture

I am glad that you posted the feature request. Add the Wordpress screenshot is a great addition to show how easy it should be. I am also following the issue.

DYdave’s picture

Hi guys,

Thanks very much to all for your comments and feedbacks on this issue, it has been a tremendous help and source of inspiration.

I have been following this topic with a lot of interest and as you will probably see at #1570072-10: Ability to customize image links:

I went ahead and created a new formatter module with project at: #1837170: Image Link Formatter

You should be able to find more information on this at: #1570072-10: Ability to customize image links, but I just wanted to point out here that the Image Link Formatter module (approved project application and module) could most likely provide an alternate solution to what you would be trying to achieve here, that would satisfy the requirements for simplicity and flexibility.

Feel free to let me know if you would have any more questions, comments or particular concerns on this issue, I would surely be glad to provide more information.

Thanks again to all for your testing, comments, ideas, feedbacks and questions.

Davyin Internet Solutions - Drupal in China

odili’s picture

Hi DYdave,

Thank you for this excellent Solution.
I tried this module and it works great.

Is there a support for views, I tried getting the same result I got in node display in views but "Image Link Formatter" could not pull in the Link field url for the image.


cola.isr’s picture

having a same problem... while in views a formatter does not grab a link field...

Gabo11’s picture

I'd need to have the formatter working also in views!

pwaegemans’s picture

Configuring this was piece of cake.

Drupaltarzen’s picture

http://drupalmodules.com/module/image-link-formatter , cheers :-)

took me 4 days to find this :D

Alauddin’s picture

joeuk31’s picture

unfortunately Image Link Formatter only accepts a token, rather than allowing an actual link to be added when adding content

VM’s picture

well ... one could add a link field to capture the link and then the image link formatter token to connect the link field to the image which turns unfortunate to fortunate ;)

joeuk31’s picture

Good idea, however the issue I have is that the image field accepts more than one image and I need each image to have a link, similar to how they have alt text or a title tag.

VM’s picture

for a multi-value image field you will need a multivalue link field and custom code. http://drupal.stackexchange.com/questions/39462/formatting-my-link-field...

joeuk31’s picture

Thanks for sharing, this would be a good idea for a new module, what do you think?