“The Shortcode is for a service called PicApp, which offers up to the minute sports, news, and celebrity images from some of the top photographers and agencies throughout the world.”

View this official blog posting at Wordpress.com.

Visit PicApp.com, the provider of the free image web application.

Related posts on JungleJar:

• Wordpress 2.8 “Baker” Released
• Wordpress 2.8 Release Candidate 1 Released
• Wordpress 2.8 Beta 2 Released
• Contributing to WordPress, Part II: Graphic Design
• Will Norris Talks About Authentication in WordPress 2.8

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.

Related posts on JungleJar:

• New Free Wordpress Template: Ipsum.ak
• “The Observer” – Another Premium Wordpress Template
• All Wordpress Templates Updated
• Submit Your Wordpress Theme To 120 Websites
• Widgetize Your Wordpress Templates Tutorial Update

“We fixed this problem last night and have been testing the fixes and looking for other problems since then. Version 2.8.4 which fixes all known problems is now available for download and is highly recommended for all users of WordPress.”

View the official posting on the Wordpress Development Blog.

Related posts on JungleJar:

• Wordpress 2.8.3 Security Release
• Wordpress 2.8.1 Released
• Wordpress 2.8.1 Beta Released
• New Free Wordpress Template: Ipsum.ak
• Wordpress.com Introduces a New PicApp Shortcode For The Bloggers

Click here to view the official release notes at the Wordpress.org/development blog.

In a passing thought, I imagined it might be relatively interesting at the very least to actually be informed of the persons behind the fantastic finds. They do, after all, deserve a bit of recognition for shining light on the issues before they got out of control. Maybe even automattic might consider them for employment, hmm?

If you know of the person or persons behind the bug finds in Wordpress 2.8.1 involving the privilege escalation issues, please contact me.

Related posts on JungleJar:

• Wordpress 2.8.4 Security Release
• Wordpress 2.8.1 Released
• Wordpress 2.8.1 Beta 2 Released
• Wordpress 2.8.1 Beta Released
• New Free Wordpress Template: Ipsum.ak

“WordPress 2.8.2 fixes an XSS vulnerability. Comment author URLs were not fully sanitized when displayed in the admin. This could be exploited to redirect you away from the admin to another site. Download 2.8.2 or automatically upgrade from the Tools->Upgrade page of your blog’s admin.”

Read the post at the Wordpress Development Blog.

Related posts on JungleJar:

• Wordpress 2.8.4 Security Release
• Wordpress 2.8.3 Security Release
• Wordpress 2.8 Beta 1 was Released
• Wordpress I Heart Blogging Design Contest
• Wordpress MU 2.7 Beta Released

And lots of other new updates to our favorite content management system.

Read the official post at the Wordpress Development Blog

Related posts on JungleJar:

• Wordpress 2.8.3 Security Release
• Wordpress 2.8.1 Beta 2 Released
• Wordpress 2.8.1 Beta Released
• Wordpress 2.8 “Baker” Released
• Wordpress 2.8 Beta 2 Released

From the development blog..

“There are still a few issues to resolve and UI tweaks to implement, but since testing BlackBerry apps is so easy, we wanted to open this up as quickly as possible to anyone who wanted to take this app for a spin.”

…

“A few words of caution before you proceed: While we’ve tested this a bunch, this is a beta and there are a ton of hardware/OS combinations out there, so please test with a private blog or a backup blog before using on your high-traffic main blog — or wait for the 1.0 version before using this.”

To install this app, head on over to http://blackberry.wordpress.org/install.

Read the official post at blackberry.wordpress.org

Related posts on JungleJar:

• Wordpress 2.7 “Coltrane” Has Finally Been Released
• Wordpress 2.7 Release Candidate 2 Released
• Wordpress 2.7 Beta 3 Released
• Wordpress 2.7 Beta2 Released
• The Wordpress Team Clears Up A Few Things About 2.7

Some of the improvements include correctly displayed upload error messages, SSH2 filesystem requirements have been updated and the translation library has been updated to avoid a problem with a mbstring.func_overload.

Read the official post at the Wordpress Development Blog.

Related posts on JungleJar:

• Wordpress 2.8.1 Released
• Wordpress 2.8.3 Security Release
• Wordpress 2.8 “Baker” Released
• Wordpress 2.8 Release Candidate 1 Released
• Wordpress 2.8 Beta 2 Released

Bugs already fixed in 2.8.1…

• Certain themes were calling get_categories() in such a way that it would fail in 2.8. 2.8.1 works around this so these themes won’t have to change.
• Dashboard memory usage is reduced. Some people were running out of memory when loading the dashboard, resulting in an incomplete page.
• The automatic upgrade no longer accidentally deletes files when cleaning up from a failed upgrade.
• A problem where the rich text editor wasn’t being loaded due to compression issues has been worked around.
• Extra security has been put in place to better protect you from plugins that do not do explicit permission checks.

You can view the full post over at the development blog.

Related posts on JungleJar:

• Wordpress 2.8.1 Released
• Wordpress 2.8 “Baker” Released
• Wordpress 2.8 Beta 2 Released
• Will Norris Talks About Authentication in WordPress 2.8
• Looking at Wordpress Custom Fields and Images Further

“I’m very excited to announce to everyone that the latest and greatest version of WordPress, version 2.8 “Baker,” is immediately available for download. 2.8 represents a nice fit and finish release for WordPress with improvements to themes, widgets, taxonomies, and overall speed. We also fixed over 790 bugs. This release is named in honor of noted trumpeter and vocalist Chet Baker.”

“First and foremost, 2.8 is way faster to use. We’ve changed the way WordPress does style and scripting.

The core and plugin updaters in previous versions of WordPress have been such a success we decided to bring the same to themes. You can now browse the entire theme directory and install a theme with one click from the comfort of your WordPress dashboard.

If you make edits or tweaks to themes or plugins from your dashboard, you’ll appreciate the new CodePress editor which gives syntax highlighting to the previously-plain editor. Also there is now contextual documentation for the functions in the file you’re editing linked right below the editor.

If you were ever frustrated with widgets before, this release should be your savior. We’ve completely redesigned the widgets interface (which we didn’t have time to in 2.7) to allow you to do things like edit widgets on the fly, have multiple copies of the same widget, drag and drop widgets between sidebars, and save inactive widgets so you don’t lose all their settings. Developers now have access to a much cleaner and robust API for creating widgets as well.

Finally you should explore the new Screen Options on every page. It’s the tab in the top right. Now, for example, if you have a wide monitor you could set up your dashboard to have four columns of widgets instead of the two it has by default. On other pages you can change how many items show per page.”

View the official release post on the Wordpress Development Blog

Related posts on JungleJar:

• Wordpress 2.8 Beta 2 Released
• Will Norris Talks About Authentication in WordPress 2.8
• Wordpress 2.8.1 Released
• Wordpress 2.8.1 Beta Released
• Wordpress 2.8 Release Candidate 1 Released