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.
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.
function get_custom_field($key, $echo = FALSE) { global $post; $custom_field = get_post_meta($post->ID, $key, true); if ($echo == FALSE) return $custom_field; echo $custom_field; }
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.
Now write a New Post with a title and content. Scroll down to Custom Fields and in the "Key" text box put in "frontImage". That's the name we called earlier in index.php. Now upload your image using the image uploader. Don't add it to the post. Copy the URL in the uploader link dialogue box and press "save all changes".
Go back to the Custom Fields box and paste the URL into the "value" box.
Save the post and publish it. On your front page you should now see the image. Notice how in the actual post the image isn't there. This is because the custom field hasn't been called in single.php. Do that if you want.
When you write a new post select "frontImage" from the drop down in Custom Fields and add a new URL into the value box.
This is the easiest way for me. And using the function at the top you can call post or page Custom Fields both inside and outside 'the loop' leading to some pretty cool CMS type stuff. Create as many fields as you like and call them using the 'get_custom_field()' function. The possibilities are endless!!!!
Try the 'Custom Field Template' plugin which is really cool and will work in 2.7 aswell. Flutter is also good but a bit of a mess as it's still beta.
Wow. that seems like a lot of work. I was wondering how they did that. there has got to be an easier way. Thanks for the post. I am going to bookmark it and give it a try when I am not tired.
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.
Let's say for a Movie Review Blog you could have the review in the left content or post (div). Then in the side bar you could have a custom template to list.
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!
Add this to your functions.php in your theme inside the php tags.
function get_custom_field($key, $echo = FALSE) {
global $post;
$custom_field = get_post_meta($post->ID, $key, true);
if ($echo == FALSE) return $custom_field;
echo $custom_field;
}
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.
<?php get_custom_field('frontImage', TRUE); ?>You should now see this.
<img src=\"<?php get_custom_field('frontImage', TRUE); ?>\" title=\"\" width=\"200\" height=\"200\" alt=\"Post Thumb\">Now write a New Post with a title and content. Scroll down to Custom Fields and in the "Key" text box put in "frontImage". That's the name we called earlier in index.php. Now upload your image using the image uploader. Don't add it to the post. Copy the URL in the uploader link dialogue box and press "save all changes".
Go back to the Custom Fields box and paste the URL into the "value" box.
Save the post and publish it. On your front page you should now see the image. Notice how in the actual post the image isn't there. This is because the custom field hasn't been called in single.php. Do that if you want.
When you write a new post select "frontImage" from the drop down in Custom Fields and add a new URL into the value box.
This is the easiest way for me. And using the function at the top you can call post or page Custom Fields both inside and outside 'the loop' leading to some pretty cool CMS type stuff. Create as many fields as you like and call them using the 'get_custom_field()' function. The possibilities are endless!!!!
Try the 'Custom Field Template' plugin which is really cool and will work in 2.7 aswell. Flutter is also good but a bit of a mess as it's still beta.
That should help. :D
Let me know how you get on.
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.
Let's say for a Movie Review Blog you could have the review in the left content or post (div). Then in the side bar you could have a custom template to list.
-Movie thumbnail image
-Certificate
-Year of release
-Director
-Company
-Genre
-Cast
-Synopsis
I guess it's a layout/CMS thing really. Once the function is in place the syntax is pretty much the same anyway.
Anybody else have any thoughts on this?
Tob
Thanks again! :D
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
#content .exerpt img {
height: 175px;
width: 175px;
float: left;
margin-bottom: 20px;
margin-right: 20px;
overflow: hidden;
}
but that didn't work. What am I doing wrong?
in advance, thanks for all help