I know Chris started to talk about this slightly in his last wordpress article but i was wondering if anyone could elaborate on it a little more or had any useful links, etc.
I want to be able to add an image to the left hand side of my posts on the homepage but as yet haven’t figured out how to do it and also haven’t found any links for it.
An example i’ve been looking is: http://www.psdtuts.com where they have the image on the left hand side of the posts preview.
Any help would be really appreciated.
Thanks in advance!
This is done with Custom Fields. These can be a bit scary at first but here’s a bullet proof way if you’ve never done it before.
Add this to your functions.php in your theme inside the php tags.
Now add this into your index.php where you want the image to be. Maybe just above <the_content>?I’m assuming they’re all going to be the same size, lets say 200x200px.
You’ll notice there’s no source for the image. We’re going to add this via a custom field called ‘frontImage’ in the post write page later.
Add this code into src=" " attribute.
You should now see this.
Maybe it is a bit of a longer way. You can just use ‘the_meta()’ or ‘get_post_meta($post->ID, ‘key name’, true);’ which will bring in any post or page custom fields but they have to be ‘inside‘ the loop. Also using just ‘the_meta()’ requires HTML knowledge as the ‘value’ needs to be wrapped in some sort of tag! What if the client has none?
Also using this you can display them anywhere ( sidebar, footer, header etc ). I’m currently building a company site which is not really a blog type site using wordpress as the CMS. Using this method in conjunction with the Custom Field Template plugin I can ad content to a Top Section, Left Content and Sidebar all from the same Page Editor. The client doesn’t need any HTML skills as the tags are in the theme ( like the above code ). They just see another write panel.
I’ve just done this with the jQuery ‘Innerfade‘ plugin in the theme.
In the Page editor you get three boxes each with it’s own image uploader. Upload the image, paste the url and that’s it. It also avoids the crappy image uploader ‘img class’ issue.
The code in the theme looks like this.
just what I was looking for.. :)
I have one question:
When I insert images they either squeeze or stretches to fit the box. I’ve tried to add the overflow: hidden to the css
but that didn’t work. What am I doing wrong?
in advance, thanks for all help
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".