Working with images

Jojo has some fairly unique ways of handling images. We have found a good system that incorporates the best elements of:
  • Speed
  • Ease of management
  • Search engine visibility

Jojo stores user-uploaded images in the "downloads" folder. Only the high quality version of the image is stored, and lower quality versions are created automatically as needed.

Image URLs and resizing

Images are resized by changing their URL. For example, if you have an image stored in downloads/salmon-toasties.jpg then the following URLs will give you different versions of the same image.

images/default/salmon-toasties.jpg

This URL displays the image at it's original size.
Link to full size image (too big to fit on screen)

images/500/salmon-toasties.jpg

This image is 500px across the longest edge, in the case of landscape images the width is 500px.


images/200/salmon-toasties.jpg

The same image again, but at 200px.


images/h200/salmon-toasties.jpg

Using h200 forces the height to be 200px, with the width variable.


images/w200/salmon-toasties.jpg

Using w200 forces the width to be 200px, with the height variable. This is perfect for making images align nicely in a column.


images/s200/salmon-toasties.jpg

Using s200 will crop the image square. Obviously some of the original image will be lost by doing this, and this can ruin the effect of images where the subject is not centered.


Theme / plugin images

Each theme or plugin can have a images folder within it. Any images in this folder are accessible via the URL /images/your-image.jpg

These URLs don't reflect the actual server location of the file, which means the URLs should be quite permanent. Permanent image URLs is desireable as Google Image bot will include your images in search results.

For plugin and template images, the resizing functions above are not available. The reason for this is that the process of resizing can be a little inefficient. For template images that will show on every page, these should be optimized for speed and quality in a program such as Photoshop before being used on a site.
Dynamic resizing is perfect for content images however.

Hungry?

These images of salmon toasties came from Meal Motivation, a Jojo based cooking Blog.