You may remember a previous article I wrote here on JungleJar.com called Using Custom Fields To Post Your Images, but if not, I’m going to reintroduce a few of the code snippets and methods I wrote about in the tutorial about how to save and display image data from custom fields within Wordpress.
In this article I’m also going to cover a few of the small yet robust code block methods I myself tend to practice quite a bit that I didn’t previously touch on.
Who Does This and Why?
I believe this is the best starting point for this tutorial. I for one would want to know exactly how essential this bit of Wordpress knowledge is to know, how often other experienced webmasters and Wordpress Theme authors incorporate this knowledge into their websites/templates, and why this is still a very useful alternative to using a Wordpress Plug-in to handle the article thumbnail postings.
This method of displaying a website post’s thumbnail became ultimately popular with the advance of the “Magazine Style” Template craze. Basically what this means is that the website is set up to resemble an online magazine of sorts with aesthetically relevant thumbnail images used to offer a bit of personality and intrigue to the related article. Template authors found that the easiest method to quickly incorporate these images directly into the website with the image placement, enhancements, etc automatically accounted for via CSS style sheets was by using the Wordpress Custom Fields section of the write page.
So, is this method still widely used? Yes, and I really don’t see this changing. This method of incorporating the aesthetics into the article is so straight forward that really there is no need for the complexities of a plug-in.
So, in my opinion, you should become at least somewhat familiar with this technique even if you have no plans to take advantage of it at all. It could offer you solutions to other problems, as the custom fields do not exist solely for any one thing such as images, and associating the usage of images with the custom fields is a fantastic way to begin learning about them and utilizing them if you’re new to Wordpress.
The Custom Field
First off, let’s take a look at an actual Wordpress Custom Field filled in with a key or name (‘img’) and a value which is the URL of the thumbnail we’ll be using to symbolize our article.
Essentially what this does is tell Wordpress to assign the value we’ve entered (in this case the URL to our thumbnail image) to the key (‘img’) which will act very much, if not exactly like a simple variable. That is, we will refer to ‘img’ later on to display our image since ‘img’ will stand for the URL of our image.
The Wordpress Loop
This is the absolute bare bones functionality of my method of capturing data from Wordpress Custom Fields within the Page / Post editing section of Wordpress.
1 2 3 4 | <?php while (have_posts()) : the_post(); ?> <?php $image = get_post_meta($post->ID, 'img', true); ?> <?php echo $image; ?> <?php endwhile; ?> |
Essentially what you have here is little more than the Wordpress Loop which every Wordpress website / template must have. This begins with the PHP while statement and ends with the PHP endwhile statement.
The section that takes advtange of the data stored in ‘img’ is..
1 | <?php $image = get_post_meta($post->ID, 'img', true); ?> |
which takes that data and assigns it to the PHP variable we’ve created named $image.
The next line basically takes this information and prints the URL (not the image yet) to the screen.
In the section below you can really see how the usage of the IMG HTML tag, the Wordpress specific PHP and the CSS image class all come together.
CSS Styling of Images
More than likely you’re going to want to manipulate the styling, especially the positioning of your blog post’s thumbnail, and one of the most common CSS attribute added to the specified CSS image class is a float attribute.
1 2 3 4 | <?php while (have_posts()) : the_post(); ?> <?php $image = get_post_meta($post->ID, 'img', true); ?> <img class="yourimageclass" src="<?php echo $image; ?>" alt="Our Image" /> <?php endwhile; ?> |
1 2 3 4 5 | img.yourimageclass { float:left; width:auto; height:auto } |
While setting the width and height attributes won’t do much in the way of speeding up the actual image loading speeds, which is what setting the width and height of images before the boom of big-time broadband was most importantly used for, but what setting these values to ‘auto’ does do is just as important in the new era of things.
The auto attributes allow you to specify the attributes which is required in order for the XHTML file to validate by the W3C’s standards which also allows you the flexibility of not having a static image size. That is, you are free to use a thumbnail of any size while also having your XHTML files validate via the validator at w3.org.
This is a neat little trick you’ll most likely want to remember in the future.
A lot of Wordpress Theme authors still do not take advantage of this very simple validation fix to allow their template users the flexibility of choosing the size of the post thumbnail for themselves.
Assign a Default Image
If no image is entered into a custom field when publishing your blog post, would you like a default image to be displayed instead? A useful example of this would be a semi-large magazine or book icon to be displayed to represent the fact that your blog post is an article essentially.
1 2 3 4 5 6 7 | <?php while (have_posts()) : the_post(); ?> <?php $image = get_post_meta($post->ID, 'img', true); ?> <?php if(empty($image)) { $image = "http://www.anydomain.com/img/document.png"; } ?> <img class="yourimageclass" src="<?php echo $image; ?>" alt="Our Image" /> <?php endwhile; ?> |
Another good example of using this technique would be to display your personal avatar to bring personality to a blog post even if you didn’t assign a specific thumbnail to the post.
A visual example of this can be seen below which is just a snapshot of a post display while using vexed.box — a free and premium Wordpress Template created by us here at JungleJar.com for the masses to enjoy.
No Image? No Problem.
And of course occasionally you’re going to want to post a blog post without using any thumbnails to symbolize the article or take up any unnecessary space.
1 2 3 4 | <?php if ( isset($image) && !empty($image)) { ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <img class="thumbnailclass" src="<?php echo $image; ?>" alt="Featured: <?php echo $loopnum; ?>" /> </a> <? } ?> |
This code above will assist you in doing just that. It checks to see if the variable $image exists and contains data, and if it does, it will display the thumbnail with the CSS image class ‘thumbnailclass’ providing the styling. If no image data exists, the code will simply carry on without forcing the boundaries of an image when one does not exist.
I used you code to assign a default image and it worked like a dream. Thanks.
Rob Cubbon´s last blog ..Adding a client testimonial page to your website
I have to use it as well. thx