NOT a Guru!
Keeping it simple, without the hype. PC tips and Internet advice for mom and pop businesses.
Keeping it simple, without the hype. PC tips and Internet advice for mom and pop businesses.
This article is a continuation of a review on how to use Wordpress templates that employ TimThumb.php. If you have never used it before in your blog, you might get frustrated if the thumbnails are not showing correctly or the features section on the front page is screwed up. Yesterday, we took a look at the permissions you need to set on your Wordpress templates. Today, we’ll work with the images.
The Features Section.
Many of the magazine-style blogs have a “features” section that appears on the front page. Depending on the template you are using, the feature will have a large image or a background image. Go to the template publisher’s example page and take a look at what the features section looks like. The following screen shot is an example of one of my own magazine style blogs.
Right click on the image to determine its properties. As you can see in the following example, the image size is 615px x 223 px. You know, then, that your feature background image will need to be in those dimensions (or larger, proportionate dimensions) to work right. If the image is smaller, it will not look right and might mess up the formatting of your features section.
As you can see in the properties “detail” about where the image is located there is some language appended to the URL. In the example below, we see “&h=223&w=615&zc=1.” This tells you how TimThumb has resized the image.
Uploading Your Images for Use in a Magazine Style Blog.
You can either FTP your images into an image folder on your server; i.e., public_html/images or upload it via the Media Library in your Wordpress Dashboard. The important thing to remember is that TimThumb will NOT work with images on another server or domain. Your images must be on your own domain.
After you have uploaded your images, you can look at them in the Media Library that is part of your Wordpress Dashboard. By moving your curser under the image description, you have the option to edit, delete or view your images. For purposes of working with TimThumb, you will want to click “view.”
[NOTE: You can be doing this in two windows if you are working on your blog post at the same time as you are inserting images. Just open the Media Library in a new tab while you are drafting your article.]
After you click “view,” you will see a page of your blog that has a resized version of the image. You don’t want the resized version, you want the full version of the image. Click the image that you see on the blog page.
After clicking the image, you are taken to the full image, as stored on your server. You want to right click your mouse and copy the image location. If there is appended language (such as the resizing shown above), you are not at the image location. It should end with “jpg,” “gif,” or “png.”
Now that you have copied your image location, go back to your blog article and scroll down to the custom fields section. Paste the image location into the value of the custom fields and select Thumbnail as the name of the field (your template might have a different name from Thumbnail).
Click update and you are done. When you publish your article, you will see thumbnails that are created on the fly next to the snippets of the article.
A larger image will appear in the upper left of the full story, as shown below. And, of course, if you have published a feature story, the image will appear in the feature box.
Not every story will be a feature; however, use the same process as outlined above so that you include an image in the story itself, as well as thumbnail in the excerpt.
Popularity: 3% [?]
Sphere: Related Content
Another quality post! At least this time the security code wasn’t hidden
Nice Post this way we get images saved into our databases. Thanks indeed for the great informative post.
Thanks for the tips because those magazine themes really give a professional look-and-feel to blogs. I’m planning to use one of those in mine that now a days have a very simple one.
I agree … they definitely give a site a professional look. Hope the post helped with configuring issues.