Coding for recipe page

jojobloob · Member · Jan 12, 2014 at 9:05 pm
Copy link

Add topic to favorites
http://eatlittlebird.com/recipes/ This is my friend’s blog. She self hosts and had a friend write some code for her to get the thumbnails of her recipes as you see it here. Now I don’t want to replicate exactly what she has but I would like to make my Recipe File page (http://joblogsjobakes.wordpress.com/the-recipe-file/) a whole lot more visual with thumbnails of my recipes.

I have the theme Hatch and have the CSS custom upgrade. Does anyone know how I can code for something like this? All I see to get is thumbnails one on top of the other rather than side by side…

Thank you!

The blog I need help with is: (visible only to logged in users)
justpi · Member · Jan 13, 2014 at 4:46 am
Copy link
On the example you linked to, the images are captioned thumbnails, and they have been arranged the way you see by using table coding (which you probably don’t need).

When you are about to insert an image, you get alignment, link, and size options. To make the images show side by side, you simply set their alignment to left.

So start by inserting some images, and then we’ll see what coding you need.

The coding (and the result) cannot be exactly the same as your friend’s, because her theme is fixed-width while yours is responsive (it shrinks to adapt to different screen resolutions and mobile devices).
jojobloob · Member · Jan 13, 2014 at 7:40 am
Copy link
Ok that’s easier than I thought to begin with, thank you. I will start with that and see what happens on my various devices. Me and two friends I met online started our food blogs the same week a few years ago and whilst Thanh has had this format for a very long time my other bud has just updated her recipe page to look similar to Thanh’s. I’m going to need to have another think as to how I can format this page as I don’t want to look like I’m copying! I’m wondering if I can use the gallery option instead? Although that might not be clear how to use it for readers not offay with wordpress blogs….
justpi · Member · Jan 13, 2014 at 1:11 pm
Copy link
You’re welcome.
a) The basic thing you need to decide, when you arrange thumbnails in rows, is if you’ll go for fixed number of images per row (with images that become smaller as the theme becomes narrower) or for fixed-size images (with fewer images per row as the theme becomes narrower).
b) A list of image links arranged in rows and columns isn’t something unusual or original, so if you do the same it wouldn’t really be “copying”. But if you want a different layout, you could use only a couple of image columns, or even one column only, without captions, and with the post titles/links next to rather than below each image.
c) As for the gallery option, you can use it, but the only way to create links to the posts in that case would be to enter these links as the captions of the images: the gallery images themselves cannot link to posts.
jojobloob · Member · Jan 16, 2014 at 8:42 pm
Copy link
Well, I’ve done some playing. I’ve updated the bottom half of my recipe page – the savoury recipes as it is the smaller list. I’ve done a gallery and adding the link for the recipe it pertains to on each image. It’s a bit of a pain as you have to click on the image then on the link from what I can tell and it doesn’t seem to work on an iPhone. So I might have to rethink it. I’ve left the list above the gallery so if readers want to look up recipes via this “index” of sorts they can, or if they are inspired by an of the photos, they can click (two clicks) and find them visually… Maybe it’s a winner after all ;)

Thanks again for the help!
designsimply · Member · Jan 20, 2014 at 9:21 pm
Copy link
@jobakes, I just wanted to chime in to say I love how http://joblogsjobakes.wordpress.com/ looks with the Hatch theme on the front page!

I think to get a recipe index page that is a design similar to http://eatlittlebird.com/recipes/ you would need to do it manually for now. If you kept adding them as list items and included an image on the page, you could use CSS to format the list to look more like a grid. Here’s a basic example you can try based on the current setup of The Recipe File page at http://joblogsjobakes.wordpress.com/the-recipe-file/
```
.page-id-586 .entry-content ul li {
	border: 2px dashed red;
	width: 200px;
	height: 200px;
	float: left;
}

.page-id-586 .entry-content ul {
	list-style: none;
	margin-left: 0;
}
```
The “.page-id-586” part of the selector targets The Recipe File page specifically, and the red dashed border is just to help visualize the grid.

No items found.