Add links from blog posts to photos in a gallery
-
Hi!
I want to make a gallery where every photo links to a separate blog post within my blog.
I am creating a page where I aim to put one photo for each crochet pattern I have made. Every pattern you will find within my blog as blogposts.
How do I do that?The blog I need help with is: (visible only to logged in users)
-
Right now Galleries don’t allow custom link-to URLs. But we have a couple ways you can do this:
1) The simpler way, a little click intensive though:
Add each image individually on your page instead of a gallery. Then, for each image adjust the “Link To” setting to “Custom URL”:
https://en.support.wordpress.com/images/image-settings/#attachment-display-settings
Copy the URL for your post, and paste it into your image setting’s “Link To.”
2) A little more advanced, but faster if you’re comfortable with it:
Make sure each of your crochet patterns shares a common tag, like ‘pattern’ or ‘crochet-pattern.’
Then use the display-posts shortcode to list all the posts with that tag, and include the featured image.
-
That is unfortunate! I have made something similar to number 2 already if you look at the page DIY in my blog. I am not satisfied with it though as I have not found out how to put the photos side by side. With 50 patterns and more to come, it is not convenient when my readers have to scroll and scroll and scroll. Is it a way to post the photos in columns of 3 or 4?
I have also tried number 1 but I have the same problem with that as I cannot put my photos side by side. If there is a way, please let me know!
-
Wow, you’ve really done a lot of CSS work there!
In theory I think we can work it into a two-column layout, but we’re probably going to run into issues with width. Would you be willing to switch that page to the Full Width page template?
Without the sidebar we should have enough room (on desktop views) to make the display-posts display as two-column, then leave it at one column for tablet/phone.
-
-
Not without a widget area. :(
Another idea to reduce scrolling could be to use the posts_per_page argument to only display the top few patterns on your DIY page, then provide a link afterwards to an “All Patterns” page where you display all the Patterns posts?
The All patterns page would still be a long scroll, but the idea would be that anyone clicking that far into it is probably willing to look through a lot more as well. Might be able to get away without images on the All Patterns page as well to keep it streamlined.
-
No, I do not like that! Photos inspire in a totally different way! I already have a list of all my posts – Archive and it is so boring and uninspiring!
This is a limitation I do not appreciate! :( So, how do I display my pattern in a nice/selling way on one page and with photos?
This is how I would like it to look like:
3 columns of photos side by side with one line “the header” under or above it. Both photo and header linked to the pattern they display.
Let’s make it a full width page if necessary. I can live with that! ;)
I really do appreciate all the help you are able to give me regarding this matter! If you or anyone could code it for me I would easily and happily pay for it! This is very important to me! :) -
Sorry for the wait, but wanted to let you know I’m working on this code for you today. I think the best way to set it up is this:
- Setup the columns manually on your page with in-line styles. This is a 4-column example but we can turn it into 2 or 3 by adjusting the width percentages:
<div style="width:22%;float:left;"> Col 1 </div> <div style="width:22%;float:left;"> Col 2 </div> <div style="width:22%;float:left;"> Col 3 </div> <div style="width:22%;float:left;"> Col 4 </div> - Add multiple shortcodes, one per column, such that all your patterns will be displayed once on the page (using the posts_per_page and offset arguments.
- Adjust CSS such that the shortcodes will display with the text beneath each featured image.
In theory this will work even with the default page template (with sidebar) but it’ll probably be ‘scrunched’ with three columns in the smaller space. We’ll play with it. :)
This is just a bigger project than some, so I’m still carving out the time but should have it ready today. We’ll get you there! You’ve got some great customizations already, so if you’d like to take a crack at it yourself with this approach just let me know :)
-Alex G.
- Setup the columns manually on your page with in-line styles. This is a 4-column example but we can turn it into 2 or 3 by adjusting the width percentages:
-
Okay — how about this for a first shot. :)
Currently where you have this shortcode:
[display-posts category="DIY – Do It Yourself " include_excerpt="true" image_size="thumbnail" wrapper="div" posts_per_page="-1"]Cut that shortcode out, and paste in this code in its place:
<div style="width:30%;margin:0 1.5%;float:left;"> [display-posts category="DIY – Do It Yourself " include_excerpt="true" image_size="thumbnail" wrapper="div" posts_per_page="40"] </div> <div style="width:30%;margin:0 1.5%;float:left;"> [display-posts category="DIY – Do It Yourself " include_excerpt="true" image_size="thumbnail" wrapper="div" posts_per_page="40" offset="40"] </div> <div style="width:30%;margin:0 1.5%;float:left;"> [display-posts category="DIY – Do It Yourself " include_excerpt="true" image_size="thumbnail" wrapper="div" posts_per_page="40" offset="80"] </div>This will create a three-column layout within your page body. Next up is some CSS:
/* Vertical space between listings*/ .page-id-9304 div.listing-item{ margin-bottom: 40px } /* Keep titles below images */ .page-id-9304 div.listing-item>a.image{ padding-right: 15px; }The numbers of 40px and 15px will likely need a bit of adjusting — I tried to replicate your page on test site closely, but the real thing is always different. :)
I made this CSS looking at the page using Default Template — using the Full-Width template there will be more room, so the CSS would likely need to be different as well.
Let me know if this is a better track for what you’d like — I can help you with the final tweaks or we can look for a different approach entirely. :)
-
I’m sorry but it has been quite a while since I made any changes to the code…! 😔 I do no longer remember where I am suppose to find it!? I have been looking everywhere for the code you want me to replace…
-
Replacing the shortcode with the new divs and shortcode would be in the page editor for your DIY page:
https://bautawitch.wordpress.com/wp-admin/post.php?post=9304&action=edit
And then to add the CSS, you’ll need to open up your blog’s Customizer:
In the Customizer, click the CSS tab and just copy+paste this code to the bottom of your previous CSS. :)
-
Great! Thanx for refreshing my memory! I have now made the changes but there are still a lot of text that I rather not display on this page.
Otherwise, I’m truly happy with the 3 columns! :) -
Awesome!
Which text do you want removed?
If you take out this argument from each of the new shortcodes…
include_excerpt="true"… the shortcode will only display the featured image and post title, not the excerpts. Would help clear it up a bit.
With every change the content like that though, be a prepared to take another look at the CSS and adjust the margins up/down as needed.
-
You and I have quite a time difference so I’m sorry I do not get back to you immediately when you are so extremely nice and helping me out with this!
Great! :) I think we are getting there!
Now I have only the post titles under the photos but as the titles have different length, it looks kind of messy!I would like the 3 photos to be side-by-side in 3 columns. How about making the text size a little smaller for a start? How do I do that? And also I would like the text to be right under the photo not like now, floating a few cm below. I guess this is what you mean when you tell me to adjust the CSS and I will give it a try but I feel very insecure about it and I’m afraid I will mess it up! :(
-
Another weird thing is that all of a sudden, the DIY page not only shows the posts categorized as DIY but many more???
-
Copy and paste this CSS to bring the titles closer to the image. Adjust the “-5” number up and down to change the space. Instead of “-5px” you might also look at “0px” and “-10px” for example.
/* Less space between photo and title*/ .page-id-9304 .listing-item a.alignleft{ margin-bottom: -5px; }This CSS will make the text smaller. Also try experimenting the number here. You might prefer 60% or 65% instead of my 70%
/* Smaller font size*/ .page-id-9304 .listing-item a.title{ font-size: 70%; }In trying to make the images always line up, this will be a bit tricky because each of these items are ‘floated.’ Their position is always relative to the item before it. So with changes to the size of images or titles… the alignment will change.
I’m thinking through ways of how to make them more uniform (by always adjusting the images sizes with CSS and perhaps using text-overflow to always keep titles to one line) but will need a little more time to think it through. :)
Another weird thing is that all of a sudden, the DIY page not only shows the posts categorized as DIY but many more???
Ah, this is my fault. :(
When creating the shortcode, I put in the Category name of “DIY – Do It Yourself ” but shortcodes can’t read spaces in this way, so it’s disregarding the Category tag entirely and just displaying all posts.
In each shortcode replace this bit:
category="DIY – Do It Yourself "With this instead:
category="diy-do-it-yourself"Then click Update on the page, and that should clear it up. :)
-
-
Took me forever to figure it out, but I found it!
There was an extra space in between category=”diy-do-it-yourself” and image_size=”thumbnail” that was breaking the shortcode.
Went ahead and adjusted it for you. :)
-
Then try out this CSS for the alignment:
/*Uniform listing item size for alignment*/ .page-id-9304 div.listing-item{ height: 180px; max-height: 180px; } @media screen and (max-width: 420px){ .page-id-9304 div.listing-item{ height: 120px; max-height: 120px; } .page-id-9304 .listing-item a.title{ font-size: 50%; } } -
WOW! You did it! It looks sooo great! And I am so happy! :D
Would it be possible to make the photos just a tiny bit bigger without to much work?I’m sure you are sick of me now, so I understand if you will say no but I have 2 other “small” questions regarding my blog. May I ask you (you are my guru! :) ) or should I post a new support request?
1. I would like people to be able to make comments even if they do not enter a particular post. Like when they scroll up and down in my flow.
2. If not possible and maybe even if, I would like to add a widget where they may send me a message!
3. After the header in my blog post it says Posted by BautaWitch. It looks fine on a computer but on my iPhone it looks awful and I would like to center it.God, I’m so happy with my DIY-page! You are the best!
- The topic ‘Add links from blog posts to photos in a gallery’ is closed to new replies.
WordPress.com Forums 