archive list photos
-
I want to do a page of photos that link to recipes I’ve posted. I used the [archives] shortcode, but I was wondering if there was a way to add photos to that list.
Thanks!The blog I need help with is: (visible only to logged in users)
-
Hi there!
What you can do is create a Gallery and link each image to the specific post. Take a look at the link below to see which gallery would work for you:
Please note that the “Link to” option does not apply to slideshows, so please do not choose that if you want to link back to the post.
Let me know if you have any questions with this!
-
Thanks for the reply! I just tried that, but it leads me to a full page view of that photo rather than to the blog post in which the photo was featured. Am I doing something wrong?
-
Hi there!
I’m so sorry. I mixed up attachment page with post in my head! So in order to link your image “gallery” to a specific post, you will have to make an HTML table and link to that post directly from there because the gallery feature does not allow you to link to a specific post.
So to create the HTML table, switch to the Text Editor when you are creating this page. The basic format of a table looks like this:
<table align=”center”>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>So you have 3 row, 3 column table. In this table you want to add an image and link it in HTML. So this is what it would look like:
<table style="border:none;"> <tr> <td style="border:none;"><a href="LINK"><img src="IMAGE LINK" /></a></td> <td style="border:none;"><a href="LINK"><img src="IMAGE LINK" /></a></td> <td style="border:none;"><a href="LINK"><img src="IMAGE LINK" /></a></td> </tr> <tr> <td style="border:none;"><a href="LINK"><img src="IMAGE LINK" /></a></td> <td style="border:none;"><a href="LINK"><img src="IMAGE LINK" /></a></td> <td style="border:none;"><a href="LINK"><img src="IMAGE LINK" /></a></td> </tr> <tr> <td style="border:none;"><a href="LINK"><img src="IMAGE LINK" /></a></td> <td style="border:none;"><a href="LINK"><img src="IMAGE LINK" /></a></td> <td style="border:none;"><a href="LINK"><img src="IMAGE LINK" /></a></td> </tr> </table>So where it says LINK, just add the link of the post, and where it says IMAGE LINK, please add the link to the image (make sure it ends with .png, .jpg, .gif.). Here is an example of this:
<td style=”border:none;”><img src=”https://www.google.com/logos/doodles/2014/veterans-day-2014-5688068602331136.3-hp.jpg” /></td>
-
Thank you so much for your help with this! I tried to do this for 2 posts with 2 photos, but when I select “preview,” its just coming up with that table text. I have copied and pasted the text below. Can you tell me if I'm missing something? Thank you!
-
Hi there,
So I found that you added the code to your Visual Editor and not your Text Editor. I moved it and now you should be able to see the image and edit the table to your desire.
Cheers!
-
Got it thanks! Is there a way to change the size of the photos or is that just based on the size of the photos in the link I used?
Sorry for all the questions! I really appreciate the help! -
Sure! You can change the width of an image via HTML using this guide:
http://www.w3schools.com/tags/att_img_width.asp
So an example of this would be:
<img src="wordpress.jpg" alt="site" width="42">Let me know if you have any questions with this!
-
-
-
No worries! You would add it between the <td> tags. For example:
<td><img src="URL_OF_THE_IMAGE" alt="site" width="42"></td>In betweens the quotes should be the url to the exact image, so it should end in .jpg or .png.
Feel free to reach out if you have any questions!
-
Ok I think I’m finally getting it! Is there a way to center the table itself on the page? When I preview the page, the images are all kind of skewed to the right, if that makes sense. I’m not sure if you can use this, but here is a link to the preview to show what I mean.
http://thecultivatedcupboard.wordpress.com/?page_id=91&preview=true
-
Hi there,
I’m not quite sure what you mean as it looks centered to me. Here’s a screenshot of what I see:
If this isn’t what you want, please let me know!
-
Strange! On my screen it isn’t centered (the picture of the eggplant is under “recipes” and the rest of the photos are to the right of that), but I guess as long as it works when I publish it it doesn’t really matter!
-
Oh yes! The published version may look different from the version in your editor. It’s looking pretty great!
Cheers!
-
ok great! One more question (at least I think this is the last one). Is it possible to label each image?
-
One more question (at least I think this is the last one). Is it possible to label each image?
You can by adding the label to the image using any image editing software. Then, upload that image to your Media Library. You can use the direct link to this new image instead.
Cheers!
-
I recently switched themes to the new Radcliffe theme. It seems that now my photos in the archive page are not the width and height I specified. I had them all set to 200×200, but now they are all different sizes and several are rectangular. Is there a way to fix this? Below is a link and the text entered to create the table.
<td style=”border:none;”><img src=”https://thecultivatedcupboard.files.wordpress.com/2014/12/close-side-view.jpg” alt=”site” width=”200″ height=”200″ /></td>
<td style=”border:none;”><img src=”https://thecultivatedcupboard.files.wordpress.com/2014/12/muffin-close-up.jpg” alt=”site” width=”200″ height=”200″ /></td> -
Hi there,
Instead of:
width="200" height="200"change it to this:
style="width:200px;height:200px"Then you should be set!
-
- The topic ‘archive list photos’ is closed to new replies.
WordPress.com Forums 