Try Ubuntu As Your OS Of Choice

When recently confronted with the decision to purchase a new laptop I was originally intrigued with the idea of buying a Chromebook. A Chromebook is basically a laptop device that runs the chrome operating system which is a hardware specific version of chromium OS which is built on Linux. The attractive aspect of the Chromebook was the relatively low price and the fact I did not want to deal with Windows. I was only looking for some lightweight portable computing. If you are an active Gmail and Google Drive user then a Chromebook can be a viable option. I briefly considered the tablet option but to get the screen size the Chromebooks were cheaper.

When I visited some retailers to check one out I found the availability of the Chromebook was limited and the Samsung Chromebooks had some battery/charging issues. I began to start thinking that if was going to go to a Linux based system then there were other options. About 7 years ago I actually ran Fedora Linux on my Mac G4. It ran fine and was impressed by the fact I was using a fully functioning operating system that wasn't Windows or Mac, but I had no real reason to switch from OS X at the time. For a new laptop I was ready to dive into the Linux option full on.

With most PC hardware Ubuntu is probably the most popular Linux distribution. As I mentioned earlier, my goal was to get some lightweight portable computing at a low price. I was content with purchasing old hardware for this purpose. Before I began the hardware search I created a bootable Ubuntu installation USB stick. I chose 32 bit since it was recommended for setups with less memory and I knew older hardware would have less. The USB stick allows you to boot Ubuntu and run it in test mode without actually installing, which allows you to test compatibility. The unit I ended up purchasing was an HP Probook about 3 years old. You will be hard pressed to find one without Windows preinstalled from any kind of registered dealer as they will usually come with a refurbish liscenced version of Windows and that is ultimately part of the cost. Your best bet is a private sale from some one you know looking to upgrade their laptop.

You can use the Ubuntu Software Centre Application to add and remove software and there are some great free apps like Gimp for image editing. You can install Ubuntu along side Windows just to try it out. You will get an option screen when you boot up asking which OS you want to start. If you want you can uninstall Ubuntu later.

Use YouTube For Your Video Content

When it comes to video on your WordPress site YouTube is often the best solution. A lot of website owners don’t like embedded YouTube videos because after the video finished, links to related videos appear which can distract visitors from your site or sometimes lead them directly to the competition. But the related videos feature can be disabled and the only thing that appears at the end of your video is the replay option. WordPress allows you to easily add videos using the [embed] shortcode.

Ultimately, YouTube videos display consistently on almost every platform imaginable. Plus, the YouTube API offers developers a variety of tools for customizing the display and navigation of one or multiple videos. Check out this 32-chapter online video manual for an example of a robust navigation system for multiple video clips.

I recently created a custom WordPress theme with special shortcodes for a client which gave them the ability to add video galleries to their pages. Visit this page to see a sample of how it works. Contact us for more info.

Rotating Smart Objects In Photoshop

In Photoshop, I've found that when rotating a smart object with sharp straight edges at small angles (20 degrees or less, say) the edges would appear somewhat jagged.

It almost looked as though there was no anti-aliasing. Closer examination revealed that there was anti-aliasing, there just wasn’t enough. I couldn’t find any obvious solution. On one occasion while experiencing this problem I thought I would try to rasterize the layer and see if there was any change. There was no effect. On another occasion I thought I would try something different. As an experiment I rasterized the layer before I rotated it. Amazingly the object edge no longer had the jagged appearance it had before. Upon closer examination I could see that there was definitely more anti-aliasing than before.

In the image below, the upper rectangle is a rotated shape layer while the lower rectangle was rasterized before rotation.

Note the difference in the amount of anti-aliasing.

Resizing Images In Photoshop

A good way to drastically reduce upload times of your pictures in WordPress is to resize them before you upload. Most layouts rarely require images of more than 1000 pixels in width so there is really no need to upload images much larger than that.

I have found that one of the easiest ways to resize pics in Photoshop is by just using the crop button without actually cropping anything out of the image.

What makes this method work is being able to make use of the width and height parameters for this tool.

Let’s say for example you have a 4000 X 3000 pixel photo that only needs to be 700 pixels wide to span the full width of your page content. There’s no reason to upload the full size pic for example, to WordPress or downsize the image with html attributes. All you need to do is set the width parameter of the crop tool to 700px, leave the height parameter empty, drag over the entire image and hit enter.
It’s always a good plan to copy any pictures you plan to use for resizing into a new location and preserve your full resolution pics. You may want them for other applications.

Another handy application for this method is for header and sliders images in various WordPress themes. Some of these themes call for exact pixel dimensions on images so that they render correctly. In these instances you can enter the specific width and height for the cropping parameters in the toolbar and select what you want in the crop frame. The resulting cropped image will be ready to upload to WordPress with the exact dimensions.

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...