Images In Blog Posts: The Technical Side

We’ve talked about the legalities and etiquette of images in your blog posts.  Today, let’s chat about some of the technical things you should know when blogging images.

Size matters

High resolution images are a no-no.  Not only will it kill the speed of your site to host high resolution images, but it’s also bad blogging etiquette.  For best results, size images to no more than 500kb (and less is preferable).

Because most people are viewing your site on a widescreen monitor, portrait/vertical photos should be sized to about half of the width of landscape/horizontal photos.  This will help to keep the file sizes smaller, as well as keep each image within the viewable area of everyone’s screen.  For aesthetic reasons, this is why many blogs choose to “pair up” verticals in their posts.

Use WordPress’s built-in Media resizing functionality to help you out with resizing.  Under Settings -> Media you can supply a thumbnail size, a medium size (I use this for vertical images) and a large size (horizontal).  As you upload photos, WordPress will automatically create copies of the image resized to each of your specified dimensions.

What’s in a name?

A lot actually.  Search engines can’t “see” images, they simply recognize the caption (aka alt text), title, and image name and read those to index the image.  Name your images something descriptive and WordPress will automatically fill in the alt text and title with your image name.

When deciding on a file name, put yourself in the shoes of the searcher. “Juli and Jon Wedding” likely won’t produce any search hits. But “Yellow Sunflower Bouquet” might.

A helpful hint

If you find a photo on a blog and want to use it for your own blog (with the appropriate credits and permissions of course), it’s likely that the photo size won’t be exactly what you need for your blog. WordPress and Blogger both have ways of “hiding” the original photo source of a full-size photo. These little shortcuts may help you find a larger photo to meet your needs:

WordPress puts the sizing at the end of the photo name. Removing the sizing produces the full-size photo.

http://www.elizabethannedesigns.com/blog/wp-content/uploads/2010/06/Retro-Dessert-Table-249×375.jpg

becomes

http://www.elizabethannedesigns.com/blog/wp-content/uploads/2010/06/Retro-Dessert-Table.jpg

Blogger on the other hand, embeds the sizing within the URL. As with WordPress, removing one little section produces the full-size photo.

http://4.bp.blogspot.com/__udAgyKza48/SpxravhrAmI/AAAAAAAABVo/VcllvgzGBfs/s400/snapdragon-flowers.jpg

becomes

http://4.bp.blogspot.com/__udAgyKza48/SpxravhrAmI/AAAAAAAABVo/VcllvgzGBfs/snapdragon-flowers.jpg

My favorite image plugin

And last but not least, if you have an image-heavy WordPress blog, here is a plugin that you will love me for (seriously). It’s called Faster Image Insert.

WordPress by default allows for the uploading of multiple images at once, but the insertion of only one image into a post at a time. This plugin fixes all of that and allows you to insert multiple images into your post with one click. If it’s compatible with your version of WordPress and the other image plugins you may have installed, I definitely recommend giving it a whirl on your test site and seeing if it’s a fit for you!

What other image tips and tricks do you have to share?

Breaking Down a WordPress Theme

By far the most common question that I have received from ya’ll since starting Edit and Post is “How do I make my blog look the way I want?”.  Now that you have installed WordPress and know how to install WordPress plugins, it’s time to start learning about themes.

Themes hold files that tell the browser what to display and how it should look.  If you remember from this post, PHP gets turned into HTML and that tells the browser what to display.  In coding language PHP = “get”.  CSS tells the browser how the html you have coded should look.

WordPress comes installed with several themes, including the Default theme.  Let’s take a look at the files in the Default theme and see what they do.  Don’t worry if all of this is very confusing now!

PHP files control what is displayed

index.php – Displays your main blog page.  Includes PHP calls for all of the files that control how your main blog page is displayed.

header.php – The header file essentially sets up the page and includes PHP calls to “get” the CSS files for the theme, the blog information and title from your WordPress options, and your header image.  It also calls WordPress itself from your server and includes the opening html for the body of your page.  There can be lots more included in here (and we’ll get to that when we talk about more complex coding).

footer.php – “Closes” your page in the browser.  Calls the WordPress footer.  Also includes any credits, copyright info, etc that you want to display.

single.php – Displays a single post.  Includes PHP calls for all of the other page elements that you display on a single post.

comments.php – Displays the comments for a post.  This file is typically only called from single.php.

archive.php – Displays category, tag, and date archives, as well as any other kind of archive you might have on your site due to some advanced coding.  Includes PHP calls for all of the other page elements that you display on your archive page.

404.php – If someone is searching for something on your site and goes to a permalink that doesn’t exist, they will see this 404 page.  Includes PHP calls for all of the other page elements that you display on your 404 page.

archives.php – Displays a list of your archives by month and subject.  Includes PHP calls for all of the other page elements that you display on your archives page.

comments-popup.php – If you want comments to display in a popup window, this file will be used to control what is displayed in that window.

functions.php – A super-important file that you don’t want to edit until you know what you’re doing.  :)  functions.php basically performs like a plugin, and any php code in here will be executed when you call the function from your other template files.

image.php – Displays a single image and includes PHP calls for all of the other page elements that you display on a single image.

links.php – Displays your blogroll links.  Includes PHP calls for all of the other page elements that you display on your blogroll links page.

page.php – Displays a WordPress page and includes PHP calls for all of the other page elements that you want to display on that WordPress page.  This file usually looks a lot like single.php.

search.php – Displays search results and includes PHP calls for all of the other page elements that you want to display on the search results.

sidebar.php – Displays the sidebar widgets that you have defined; if no widgets are defined, displays a default sidebar.

CSS files control how things look

style.css – a theme’s stylesheet is where the CSS for a theme is held.  Themes can have one or many stylesheets.  CSS is pretty complicated, so for right now know that each little section of CSS is called a div, and div tags control how whatever is inside them is displayed.

rtl.css – If you are publishing in a language that reads right to left, this stylesheet will be used.

English, please?

Let’s look at an example and maybe this will start to make more sense.  Remember single.php?  It’s the file that displays your single post page.

single.php is going to start by doing a PHP call for header.php. Remember, the header.php has already called in all of your stylesheets and WordPress itself.

<?php get_header(); ?>

Each section of your page is styled using div tags.  The header.php file probably had several div tags to display your header image, menu bar, etc.  In single.php the main content of your page is also enclosed in a div tag.  Let’s call it “content”.  When you include a div tag in your php file, WordPress will look in your stylesheet for the div tag name and display the results using the CSS assigned to that tag.

<div id=”content”>

Then it is going to ask the WordPress database for the data from the post itself.  This is an if statement in PHP, because if no post exists you want to include a message saying that no post exists.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Once it knows what the post is, you’ll want to format it accordingly.  So perhaps you have a div tag for your post header that you surround the post title with.  Because that is the only thing you want to format as a “title”, you will then close the div tag.

<div class=”post_header”>

<?php the_title(); ?>

</div>

Now that you have displayed the title, you want the content.  You probably have some styling for this, let’s call it “entry”.

<div class=”entry”>

<?php the_content(); ?>

</div>

Then you want to include your comments.php file.

<?php comments_template(); ?>

Now let’s close the if statement from above and tell WordPress what to display if no post exists, and once that is done we are done with the “content” so we will close the div.

<?php endwhile; else: ?>

<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

</div>

Lastly, we’ll call the sidebar and the footer.  Remember, the footer closes the page, so after the footer is called, single.php has done its job.

<?php include(TEMPLATEPATH . ‘/sidebar.php’); ?>

<?php get_footer(); ?>

This is a lot to wrap your arms around but I hope it’s starting to make some sense, because we’re going to be talking a lot more about themes as we start to edit each of the theme files, make new theme files, and add in awesome new functionality!

Any questions so far?

WordPress.com API Keys

Getting a WordPress.com API key is helpful for two reasons:

  1. It allows you to utilize plugins like Akismet (spam comment filtering) and WordPress.com Stats
  2. It allows you to comment on blogs hosted by wordpress.com without having to fill in all of the required fields

To obtain your own WordPress.com API key, sign up here.

Then, since you know how to install plugins, install WP-Stats and Akismet (Akismet may already be installed with your WordPress package, so simply activate) and use your fun new API key to block spam and see your page views!

How To Install WordPress Plugins

We’ve talked a little bit about plugins, so you know what a plugin is, but let’s go over how to find and install them.

The WordPress site has a comprehensive list of every plugin available.  From here, you can search for the functionality you’re looking for and see reviews of the plugins, number of downloads, installation notes, etc.  Chances are, if you want to do it, there is a plugin for it.

We’ll start by installing a plugin that saves some real estate on your WordPress dashboard, the Ozh’ Admin Drop Down Menu plugin.  By default, the WordPress dashboard menu is on your left.

When you install and activate Ozh’ Admin Drop Down Menu, the menu moves to the top, eliminating the need for lots of vertical scrolling.

There are two ways to install a plugin, through your WordPress dashboard, or through FTP.

How to install a plugin through your WordPress dashboard
  1. Navigate to Plugins → Add New
  2. In the search field, type in the plugin you want to install, in this case we’ll search for “Ozh Admin”
  3. When the search results appear, locate the plugin and click “Install” then “Install Now”
  4. Click “Activate Plugin”

If you have a zipped file of your plugin, you can also install it through the WordPress dashboard.

How to install a plugin using FTP

By now, you know that I love FTP and do the majority of my work in Core FTP (if you need a refresher on FTP, read this post).  To install a plugin using FTP:

  1. Download the plugin that you want to install from the WordPress plugin repository
  2. Unzip it to a folder on your computer
  3. Sign into Core FTP, or your chosen tool
  4. Navigate to www.yoursite.com/wp-content/plugins
  5. FTP the plugin folder from your computer to your server
  6. In your WordPress dashboard, navigate to Plugins → Installed → Inactive and activate your new plugin

Plugins are addictive.  Don’t say I didn’t warn ya!

You Need a Test Site

Big red flashing word of warning!

Be super-careful when you are following these instructions and be very sure not to edit the web server or database for your actual website!  Always be sure that you have backed up your database and web server before doing this, just in case.

We’re going a little out of order here, but this topic has come up several times already and is so important that I thought we should cover it immediately.

You need a test site.

So how do you set up a test site for your WordPress blog?  First, purchase a separate domain name (anything works) and set it up for hosting.  Then, take the following steps to copy your production site (the techie term for your user-visited website) to your test site.

Let’s say your production site is www.mycookingsite.com/blog and your test site is www.mytestsite.com/blog.

Step 1: Copy your web server
  1. FTP the following files and folders from www.mycookingsite.com/blog/ to your computer or hard drive:
    • wp-admin
    • wp-content/themes
    • wp-content/plugins
    • wp-content/upgrade
    • wp-content/index.php
    • wp-includes
  2. On your computer or hard drive, delete the plugin folder for wp-stats if you have it enabled.  This is to insure that you do not confuse WordPress’s dashboard when you create your test site.
  3. FTP all of the individual files that are at the same level as the wp-admin, wp-content, and wp-includes folder to your computer or hard drive.
  4. FTP all of the files from your computer or hard drive into www.mytestsite.com/blog/.

You’ve now made a copy of everything on your web server except your images (no need to have these on your test site).

Step 2: Copy your database
  1. You have already downloaded the nifty WordPress Database Backup plugin.  If you have yesterday’s backup handy, great, otherwise go to Tools → Backup and run a backup of your entire database.
  2. Create a new SQL database through your web hosting company.
  3. Through your web hosting company, there should be a service called phpMyAdmin.  Log into phpMyAdmin using the username and password for your database.
  4. Select your newly-created database in phpMyAdmin and click on the “Import” tab.
  5. Browse for your backup file, be sure that the SQL button is checked, and click Go.

Step 3: Update your test database’s WordPress options
  1. In phpMyAdmin, click on your test database, and the table wp_options (or wp_xxxxxx_options).  BE SURE YOU ARE IN YOUR TEST DATABASE.
  2. Find the option name “siteurl”.
  3. Click the pencil on the siteurl line to edit the information.
  4. Change the siteurl to your test site.
Step 4: Update your wp-config file
  1. In FTP, navigate to the root of your TEST wordpress installation.  In our example this would be www.mytestsite.com/blog.
  2. Open the file called wp-config.php
  3. Change the values for DB_NAME, DB_USER, and DB_PASSWORD to your test database information.
Step 5: Validate
  1. Visit www.mytestsite.com/blog/wp-admin and log into your test site.  You will log in with the same username and password as your production site.
  2. Verify that your test site is visible at www.mytestsite.com/blog.

Voila! A perfect copy of your blog.  Use your test site to edit your theme, install new plugins to play with, develop new functionality, test upgrades of WordPress or plugins, etc before applying the changes in production.

PS – If you aren’t on WordPress, but instead have an HTML website, you should still have a test site.  Simply FTP the files from your web server to your computer, and then FTP back up to your new domain.

PPS – Your web hosting provider should also allow you to easily password-protect your test site’s domain.

PPPS – You should also read the WordPress Codex articles about Restoring Your Database From Backup and phpMyAdmin.

Edited To Add: PPPPS – See comments below for some reasons why you need a test site – this can include changes to your WP theme, or testing out plugins and new functionality, and creating new page templates – and also a shortcut method that doesn’t involve a whole backup of your production site.