Pictures First

One of the biggest shortcomings I encounter when building websites for small businesses is the lack of quality photos or illustrations. In many cases, either little or no planning has gone into the image content of a website before the design begins. Photos are the best place to start for image content. Illustrations are usually more expensive and time consuming but are sometimes necessary when trying to visualize abstract concepts, products or services.

One of the first things you should do in the design process is get together with your web designer and look over any photos you can make available. Your designer will let you know if the quality of the pictures is sufficient to incorporate into the design. It is important that your photos meet a high level of artistic quality as well as have resolution standards that are sufficient for the context of the photo. If the quality is not sufficient you can either hire a photographer to take high quality photos or buy stock pictures from a service like iStock.

When you are ready to start adding pictures in WordPress you may want to start learning some basic photo editing skills, especially image resizing.

If you are building an e-commerce site it is extremely important to have pictures of every one of your products before you begin building your site. If your business requires pictures that need to be taken at a certain time of the year, planning is even more vital. You could be building your website in the winter but be missing pictures that need to be shot in the summer, delaying your website launch by months.
When you have print jobs done by a graphics company make sure they give you a copy of all the artwork files and any other image files associated with the project. These assets will be invaluable when future website updates and design work are required.

WordPress Training

Nothing beats one on one training. If you live in the GTA I can provide that service at a very reasonable rate. Those not living in the GTA can get training via Skype.

Whether you’re looking to learn the WordPress basics or you’re ready to dive into HTML, CSS or PHP, I can help you get started. Once you get used to some basics concepts, WordPress can become a valuable tool. It’s important to understand that what you see in the administration panel can vary depending on the theme you’ve chosen or that may have been installed or custom designed for you. If you’re just starting out, you need to learn the difference between a page and a post and how the basic WordPress menu system works. If you are working with an additionally installed theme it may have features that are difficult to understand if you are new to WordPress.

Once you’re comfortable working in the administration panel you may get to a point where you want to change things that you don’t have access to in the various theme settings. Now it’s time to learn some basic HTML and CSS. WordPress administration gives you access to the source code in the theme files. Or you can go all in and start using a source code editor and an FTP client. You don’t always need an FTP client as most hosting providers offer file managers in their admin panels.

If you are someone who is already a web designer but needs to learn how to incorporate your designs into WordPress themes, take advantage of my hands on experience to get you going. Learn about template tags and ‘the loop’. Your designs should work within the theme framework so that the WordPress installation can be upgraded without affecting your design. You should never need to ‘hack’ the WordPress core as the framework provides a multitude of filter and action hooks to get you into the core functionality.

Find out more...

WordPress Simple Gallery Plugin

As mentioned in my ‘WordPress: Using the Gallery Feature’ article, I eventually wrote a WordPress plugin that overrode the standard gallery behavior so that a button would be displayed above a gallery that would activate a scrollable overlay containing large versions of the gallery pics. In the case where a gallery thumbnail is clicked the overlay would display the large version of the clicked thumbnail first, and you could scroll back and forth through the gallery from there. A ‘View As Slideshow’ button is inserted before the gallery that launches the overlay beginning at the first picture in the gallery.

The plugin uses AJAX so there is no additional image loading until the gallery overlay is launched and the initial page load is not slowed down. The advantages of using this plugin over the standard WordPress gallery on the default ‘Attachment Page’ setting are easier navigation; the overlay can be closed by clicking the display window close button or anywhere outside the display window, and the user does not have to wait for an attachment page to load every time a ‘Prev’ or ‘Next’ button is clicked.

Visit the Plugin Page

WordPress: Using the Gallery Feature

You may or may not be familiar with the WordPress gallery feature but it is an alternate option to add multiple images to a post. We’ll take a look at how it works out of the box for WordPress 3.6.1.

Ultimately, this will lead to the discussion of adding slideshows to your website so let’s look at slideshows in general. We’ll leave the topic of slideshows on homepage banners and headers for another article and focus on your actual page content. One question you must ask yourself is, “Are my visitors at a point in my site where they will take the time to sit back and view the slideshow I am about to present them?”

The nice thing about the WordPress gallery is that you are presented with a simple grid of decent sized thumbnails about 150px square each (the default WordPress thumbnail size), of all the pictures in the gallery. You can change the default thumbnail size in the WordPress admin > Settings > Media panel.

So at a glance a site visitor can see all the content of the gallery and decide from there if they want to take a closer look. Some slideshows have a strip of tiny thumbnails under the main slide area but they are usually too small to be of much help, and not all the pictures in the gallery can be seen.

How do we add a gallery to a page or post? We start with the ‘Add Media’ button on the edit post screen, which is the same step we would perform if we were just adding a single picture. When you get to the Insert Media window you can then choose ‘Create Gallery’ from the left hand menu. You can select images from your existing media library or upload new ones. Once you have selected all the pictures you need in the gallery, you can click the ‘Create a new gallery’ button.

Once the gallery is created you can drag and drop to change the image order. Choose the number of columns in the gallery setting menu on the right and the ‘Link To’ setting. The ‘Link To’ setting requires a little explanation. There are 3 options: ‘Attachment Page’, ‘Media File’ and ‘None’. This setting determines what will happen when a user clicks on an image in the gallery. The third setting ‘None’ is the simplest. Nothing will happen when a user clicks an image. ‘Attachment Page’ is the default setting which means that the user is taken to a page generated by WordPress containing a full size version of the image they clicked as well as a previous and a next link, which allows you to cycle through every attachment that was ever associated with the post even if it was removed. I will discuss this behavior more, later. The remaining option, ‘Media File’ takes the user to a blank page containing the full size image. The user would then have to hit the back button of the browser to get back to the gallery.

The ‘Attachment Page’ (default) option is probably the best of the 3 options. There are a couple of drawbacks to this option to be aware of. One is the navigation back to the gallery. It may not be obvious to the user where to link back to the main article, at least not in the default WordPress theme. It depends on how the attachment template for that theme is built. Another drawback is the fact that a new page is loaded for each different attachment image when you use the ‘Prev’ and ‘Next’ buttons. This fact becomes very inconvenient when a user has to scroll down the page after every page load to see an entire image. As I mentioned previously the ‘Prev’ and ‘Next’ buttons scroll through every attachment ever used by that post, even after it is removed from a gallery. What I eventually ended up doing was building a plugin that overrode the ‘Link To’ setting and added a ‘View As Slideshow’ button to the gallery. When a user clicks the button or one of the images in the gallery a slideshow window pops up and in the case where an image is clicked, that image is displayed in the slideshow window. Forward and back buttons are provided so that the user can scroll through the images in the gallery if they want.

Resizing Your Pictures Or Images With iPhoto

First off, let me tell you that I am writing this article from the perspective of a photoshop user. Not everybody uses photoshop however and in this case I am attempting to solve the resizing issue with iPhoto users. This issue first came up when working with WordPress clients. When creating pages and posts, WordPress offers some basic options when it comes to photo sizing which generally work fine. Some other options of some themes use photos in specific areas of a theme (headers for example) that require specific pixel dimensions in order to display correctly.

I do my photo editing on a Mac but I have rarely used iPhoto. The first time I launched iPhoto I was more or less mystified, which is tough to admit for a long time Mac user. Number one, there is no Open item in the File menu?! I think that was the end of my first user experience with iPhoto. It was back to photoshop. Down the road I eventually ran into folks who needed some help with iPhoto. So, back to iPhoto. “Import to Library...” is the File menu item that gets your pics into iPhoto. The next logical step was to click Edit (bottom right toolbar in the iPhoto window).

This window offers a crop button. Clicking this button reveals a drop-down box with a “Custom...” option. Here you can enter the target dimensions of the picture you will eventually want to upload. Click “Done” and go back to your Photo window. In the test I did for this procedure, I tried an 800 X 600 crop. When I clicked the Info button I saw that my pixel dimensions were much larger than 800 X 600. I checked the original file and saw there was no crop made at all. The 800 X 600 specification does not refer to pixels but aspect ratio only, and all the editing you perform in iPhoto is stored only in the iPhoto library. For the resizing process, you should still use your target pixel dimensions in the crop window just to keep the process simple.

We can still end up with the proper dimensions in our file but there is one more step. You need to to select “Export...” from the file menu. You can choose File Export. Now you can select JPEG, choose your quality (try medium) and your size. Choosing “Custom” for your size allows you to specify a maximum dimension. For the 800 X 600 example I could set my maximum width to 800px. The resulting image would be 800 px X 600 px. Now you can name the file anything you like, store it any any folder and upload it from your WordPress admin panel.

Developing this procedure revealed some interesting things about iPhoto. The original file is stored in the library and you can always revert to that after doing any editing. When you import your photos directly from your camera into iPhoto, you can’t directly access them in the Finder. You can navigate to the iPhoto library in the Finder but all you will see is the iPhoto library icon. The idea is that if you want to search and navigate through Photos on your Mac, you use iPhoto. This setup doesn’t really work for photoshop users. (Try dragging and dropping a picture into photoshop, make some changes and save the file.) So photoshop users are stuck with either the Finder or using something like Adobe Bridge. For the vast majority of photographers, iPhoto has everything you need from basic editing to printing and sharing your pics, so you should never need to use the Finder.

More imaging tips...

Adding Pictures In WordPress

Adding pictures in Wordpress is a fairly straightforward process. For the best results however you need plan ahead a bit. The first thing I recommend is deciding how large you want your picture to be. If the picture is going to be small you have the option a placing the picture on the left or right side of the article and having the text wrap around the picture. The much simpler scenario is a picture which covers the full, or nearly the full width of the article.

To illustrate the simplest way of getting a picture into a page lets look at the ‘Sample Page’ that comes with the default Wordpress installation. The first thing we need to know is where the image file resides on your computer. It’s a good idea to have a folder specifically for images you may want to include on your website.

Select the page or post you want to edit (in this case Pages > All Pages > Sample Page) - Position the cursor at the position within the text where you want the image to appear. Since we are adding a full width picture you can just position the cursor on a blank line above or below a paragraph.

Click the ‘Add Media’ button. You can drag and drop files into the upload area or use the ‘Select Files’ button. Once your file is uploaded you will see it selected in the Media window. On the lower right hand side of the window there is an Area labeled ‘ATTACHMENT DISPLAY SETTINGS’. The last option is size. If you’re using the twentythirteen theme the ‘Large’ option has the width conveniently set to match the full width of the page text. If you use this option you can set the alignment to ‘None’. I usually set the ‘Link to’ option to ‘None’ as well unless you want the user to be sent to an attachment page or directly to the full size image file when they click on the image

Now you can click ‘Insert into page’. If you are satisfied with the results you can update the page. You can remove pictures or change their settings at any time by clicking on a picture in the edit window. A set of buttons should appear. The left button allows you to change the settings for that picture. The right button will remove the picture entirely. The picture will remain in the ‘Media Library’ so you wont have to upload it again if you decide to use it in the future.


One thing to remember is that pictures taken at high resolution can be very large files. WordPress can handle large files and do some resizing behind the scenes but your upload times might be quite long depending on your internet connection. If you have a lot of pictures it can also take up a lot of space on your server. If you know how to resize images you may want to limit them to 1000 or so pixels in width before you upload them. High resolution pics are often more than 4000 pixels wide. (For those using applications like iPhoto you can read this article to learn how to resize your image files.) Also make sure the original images aren’t too small. A full width picture should be at least 1000 pixels wide to be on the safe side - half width, 500 pixels, and so on. Check the file information using Windows or the Finder in OS X to determine image sizes.

More on WordPress....

Why Use WordPress?

WordPress has generally become the most popular open source content management framework available. Probably the biggest reason is its easy to learn user interface which allows website content to be added and edited without any desktop software or advanced technical experience. It doesn't matter what stage you are at in terms of your website or web application development. WordPress content editing capability can be integrated into an existing site or built into a new website from the ground up. If you already have experience using WordPress or WordPress themes and plugins, we can add or taylor existing features that allow you to control the content of your website exactly the way you need to. Existing themes can be refined so that they look exactly the way you want them to.

More on WordPress...