Need help? Check out our Support site, then


How to: Insert a link into a Gallery Image

  1. On the following page of my site http://sylvan56473.wordpress.com/cars/ I have inserted a photo gallery that will eventually hold over 100 separate cars. I would like to be able to have a customer click on the picture and have it bring them to a different page with multiple pictures of that car. I just can't figure out how to make that picture into a hyperlink. Any suggestions?

    The blog I need help with is sylvan56473.wordpress.com.

  2. The Gallery thumbnail cannot link directly to the different page. The two available options are either the original image or an attachment page.

    If you change your Gallery settings to have the thumbnail link to an attachment page, you can then insert a link to the different page in the image description which appears on the attachment page. You can add this link to the description either in the Image Uploader or the Media Library. The different page with multiple images would be a static Child Page, which can be hidden in the navbar.

    If you don't want the intermediary attachment page but rather have a direct link to the Child Page, you would be better off not using the Gallery feature and create an HTML table instead. You would then insert the thumbnail images in each cell and have those link directly to the Child Page, again hiding them in the navbar.

  3. Hi justjennifer,

    Thanks for the reply. I have tried to link to an attachment page but it will not save the URL that I enter. It keeps defaulting back to the full scale version of the picture.

    I'm not good enough with HTML to play with that. I'm still fumbling my way thru this...

    Thanks

  4. If you change your settings in the Gallery from image to attachment and click the "Update Gallery settings" and "Update Post", what happens? If it doesn't save the settings, please contact Support directly as they are the only ones that can help on the backend of things. http://en.support.wordpress.com/contact/

    As soon as that problem is solved, then you can write links using a draft post and the Visual Editor, but you will have to copy and paste the code that is created from the HTML Editor to the description area of the image. http://en.support.wordpress.com/links/

  5. By the way, I'm not sure what you mean by " I have tried to link to an attachment page but it will not save the URL that I enter." In the Gallery settings, there's no URL to enter, only the option to link to the image or an attachment page. That's a radio box and you can either pick one option or the other for the entire Gallery.

  6. I think there is a little confusion here.

    If I understand sylvan, the original reference is to a "gallery" of photos on the blog, rather than the WordPress "gallery".

    If the theme being used functions like mine, it should be very easy.

    1. In the visual editor, click on the image you want linked to another page.
    2. In the upper left-hand corner, click on the landscape button that says "Edit"
    3. In the window that pops up, insert the URL of the page you want linked.

    When I clicked on one of your car photos, it took me to a full sized image. That URL probably will show up when you click the "edit" button. Just substitute the page URL.
    I suppose if you still want a full sized image you could do that from the separate page.

    Again - this is presuming everything works the same for all the themes. That's something I don't know.

  7. My terminology with websites is pretty limited so I might not be asking the correct questions. I believe shoreacres is right on the money with what I am trying to accomplish. Or justjennifer's reply's are above my head :) A picture is worth a thousand words, so I've attached a link to show where I am working.

    I was under the assumption that if I inserted the URL of another page the picture would link to it. Correct?

    Again, thanks for the reply's and helping me out.

    http://sylvan56473.wordpress.com/pic-edit/

  8. Yes, you're in the right place.

    Where it says "Link URL" is where you put the URL of the page you want to link to.

    If you go here and click on the first photo, it will take you a different website. The URL of <i>that</i> website is the address I put into the "link URL" space where I edited the photo details - the same page you included in your comment.

    Once you've edited the URL and saved the change, you can click the preview button and check to make sure things are working properly.

  9. That is what I've been trying to do, but it will not save the URL. It keeps defaulting back to the original picture. Maybe the theme I am using doesn't allow it...

  10. What is the exact text that are you entering into the Link URL box?

  11. hallluke - was just looking at his blog. He's using Greyzed and has a dropdown "Gallery" menu at the top - if pages are allowed in that theme it may be a matter of creating a separate page for each car and linking to that.

    And you just asked my next question. Thanks ;-)

  12. @shoreacres, @halluke-if you look at the underlying code on the "cars" page, it seems that sylvan is using the Gallery feature. I could be mistaken, but that is what I see. If so, it doesn't matter what URL he/she enters in the URL box of the individual image, the Gallery will simply ignore it as the Gallery only allows two link choices for its thumbnails: the original image or an attachment page. That is why I suggested adding the link to the "different" page in the description on the attachment page.

    Perhaps you can think of a more straightforward way of doing this using the Gallery. Otherwise, the only other alternative I know is to make a table using HTML in place of the Gallery.

    Cheers!

  13. You're right, it looks like some HTML is going to be needed. Have a look at the example below which uses floated divs instead of a table. It should be fairly easy to duplicate, the only problem being that you'll have to go through and manually copy in the URL to your image and the desired link destination too. Copy the inner div code and duplicate it as many times as you need inside the first container div, In the code below I've included it three times so you can see.

    <div style="overflow:hidden;">
    	<div style="float:left; margin-top:10px; text-align:center; width:25%;">
    		<a href="LINK_URL"><img height="112" width="150" title="IMG_TITLE" alt="IMG_HOVER_TEXT" src="IMG_URL?w=150&h=112" style="border:2px solid #CFCFCF;"></a>
    	</div>
    
    	<div style="float:left; margin-top:10px; text-align:center; width:25%;">
    		<a href="LINK_URL"><img height="112" width="150" title="IMG_TITLE" alt="IMG_HOVER_TEXT" src="IMG_URL?w=150&h=112" style="border:2px solid #CFCFCF;"></a>
    	</div>
    
    	<div style="float:left; margin-top:10px; text-align:center; width:25%;">
    		<a href="LINK_URL"><img height="112" width="150" title="IMG_TITLE" alt="IMG_HOVER_TEXT" src="IMG_URL?w=150&h=112" style="border:2px solid #CFCFCF;"></a>
    	</div>
    	...
    </div>
    <br style="clear:both; height:0;">
  14. Thank you very much @hallluke, That html code help me a lot!! But how can i make the links open in another page instead of the same one?

Topic Closed

This topic has been closed to new replies.

About this Topic