Put hyperlinks in a media
-
Hi there,
I just put a medio made with picture in one of my page and I would like that each picture leads to another page. In other words, I would like to put an hyperlinks in each picture.
So, I guess I have to insert some CSS code in this:
[gallery ids="271,270,269,272,273,268" type="rectangular" link="none"]
but I do not know how to do it.Can someone help me, please?
KR,
Maud
The blog I need help with is: (visible only to logged in users)
-
Hi, Maud, we cannot add links to images in galleries, all items in a gallery will open the Image Carousel when clicked. What you would have to do would be to create the same sort of layout manually using HTML within the post and insert the pictures into that layout. You can add custom links to images directly inserted into content. Generally what you would want to do is something like this.
<div class="my-img-gallery"> <div class="wide-img" linked image inserted here </div> <div class="narrow-img" linked images inserted here </div> <div class="wide-img" linked image inserted here </div> </div>There would be some custom CSS that would be required as well, but that is best worked out after the above has been done. What I would suggest is to create a draft page and work on this and then post back here and let me know when you have this done, and I can then help with any adjustments and create the custom CSS for you. There is no need to publish the page as I can see your draft pages. Also, all of the above work should be done in the Text/HTML tab in the page editor.
-
Hi,
Thanks already for the help provided.
I have done what was previously requested.
Could we go on? :) -
Hi, can I get you to actually insert the images into the divs instead of just the URLs to those images. You can link them as desired as you insert them. Let me know when you have and I’ll start on the code.
-
Hi there,
I guess it is done correctly this time.
Let me know if there is something else I have to change.
Thanks a lot.
-
Hi, and thanks. It seems there is one of the divs (narrow) that is missing an image, which you will see when you preview the page, but the following CSS will take care of the images and allow them to be linked to whatever you wish them to be linked to. Add the following to the bottom of your custom CSS.
.narrow-img { width: 50%; } .narrow-img:nth-child(even) { float: right; } .wide-img .image-container.alignnone, .narrow-img .image-container.alignnone { margin-left: 0; } .wide-img img { width: 100%; } -
Hi,
Indeed, one div was missing. But adding it back, everything is perfect and clickable. Thank you very much!
Still, I have a question: if I want to adjust the size of the whole thing, better do it through the CSS or resize picture in WP or resize picture in any otherway?
Kind Regards,
Maud
-
Great. On resizing, that depends. Do you want the whole thing smaller when viewed on a desktop or laptop?
-
Hi,
I wish the whol thing to be smaller when a visitor come to my website.
For now, when I do a “preview”, it takes a really huge place which is not easily readable.I guess that a solution would be to resize every picture but I am still hoping that there is an easiest way to handle it.
-
The best way to handle this is with CSS. Add the following two CSS rules. The first sizes the images for maximum width of 100%. I had missed that the Luxury theme adds 12% to the width of the images so they effectively become 112% wide. The second rule sets the maximum width for the my-img-gallery div to 650px. As it was, it was extending to the 750px width of the content container. You can edit that 650px value as desired.
.my-img-gallery .image-container.alignnone { max-width: 100% !important; } .my-img-gallery { max-width: 650px; } -
-
- The topic ‘Put hyperlinks in a media’ is closed to new replies.
WordPress.com Forums 