Hi Ralph,

I have written this tutorial from scratch, as your setup uses a little more up to date software than my past tutorial. I hope it all makes sense, but drop me a line if anything is unclear!

Some people choose to print out their tutorials, to have them easily on hand when they are updating their website. Other people chose to simply keep them open in a new window, to refer to.

Your images are handled by something called ‘Portfolio Slideshow‘. There is also plenty of tutorials online, if you feel like a Google.


Starting a New Gallery

Starting a new gallery is easy. Just make a new page (see the basic writing tutorial). Any images uploaded to that page will appear in your gallery automatically. Thumbnails, large images, etc.

Then all you need to do is enter the following code to make it appear:


and click Update to save your changes.

It should look like this:

Screen Shot 2013-09-23 at 6.29.19 PM


Later you will get fancier, but this is enough to get started.

(OK, here’s an example of ‘fancier':)

Screen Shot 2013-09-23 at 6.23.33 PM



Preparing New Images

(You don’t need this bit Ralph, as we have worked this out in previous emails, but this is what I usually tell other people, for reference).

Take a look at how large your images are. Most images will appear best if they are first around 495 pixels high (and any width). This gives good color and detail, while loading quickly, and appearing on the page without any scrolling.

If you need help resizing images, we have written a quick guide for Photoshop. Gimp is a free version of Photoshop, and Googling ‘free online image resizing’ will also reveal free, fast online tools to do this.

Pro Tip

Some people don’t realize that .jpg files deteriorate every time you re-save them. This is because they are compressed each time (like photocopying a photocopy). Keep untouched master copies in a stable format (a good one is .tif), then edit and send .jpg copies of these.

Using Your Website to Resize Your Images

Your website will also resize your images for you! All you need to do is to tell it what size you would like your images.

First, in your Dashboard Sidebar, go to Settings, and then Media

Screen Shot 2013-09-23 at 6.06.35 PM

You will see a range of options. We recommend setting the ‘large’ or ‘medium’ size as the size you want your main images to be. You might decide to make the one you choose 495 pixels high, and 1200 pixels wide. (This is extremely wide, just to be sure).

Screen Shot 2013-09-23 at 6.06.41 PM

Click ‘Save Changes‘.

You can make sure Portfolio Slideshow is set to show large (or medium) sized images in the Portfolio Slideshow Settings:

Screen Shot 2013-09-23 at 6.05.19 PM

The part you want to check is ‘Slideshow Size‘, which should be the size you set earlier (here it is large).

Screen Shot 2013-09-23 at 6.05.51 PM

Once you have your images approximately right (there is a 5MB limit – see below – and 1MB is larger than you will need), just upload them and they will be converted to the right size for you.


Uploading Images

Just go to the page you wish to upload new images to (click the title of the page, or Edit):

Screen Shot 2013-09-23 at 6.22.09 PM

Scroll down to the section that says “Portfolio Slideshow”. Click the button that says ‘Upload and Manage Images‘ to add your images:Screen Shot 2013-09-23 at 6.35.10 PM

You will see a screen like this (on a Mac, these looks similar on a PC), and you do as it says – drop your files in the box to upload them, or click Select Files.

Screen Shot 2013-09-23 at 6.37.12 PM

Uploading Problems?

You will see above it says the Maximum upload file size is 64MB. This is way, way, way too large. Most images only need to be 500 KB (about half a MB, to 1MB maximum) as this will even fill a whole screen.

We found people were getting into trouble trying to upload and manage 64MB files, so we reduced the maximum to 5MB. This is still five times larger than you need for large, crisp images.

If a file won’t upload, check its size. It may be larger than 5MB, changing the image size should fix the problem.

Once you find your image on your computer and select it with a click, click on Open.

Screen Shot 2013-09-23 at 6.34.22 PM

You will see something like this, with a picture of the image above it, telling you it is all uploaded.

You don’t have to change anything below, just click ‘Save All Changes

Screen Shot 2013-09-23 at 6.37.39 PM

You can safely close the next confirmation screen, by clicking the small X in the upper right hand corner:

Screen Shot 2013-09-23 at 6.38.02 PM

And you should see the image in its spot on the end of your slideshow queue:

Screen Shot 2013-09-23 at 6.39.03 PM

You don’t strictly need to press ‘Update‘ to update your page, but you can if you want to keep the software happy. When you look at your page live online, you should see your image there, in all its glory!


Changing Your Thumbnail and Image Order

Something most people want to do is fine tune the order that their images appear. This is very easy to do.

Simply go down to your Portfolio Slideshow section, and drag and drop the small images into the order you want. Here, I have dragged the green image closer to the middle of the queue:

Screen Shot 2013-09-23 at 6.53.54 PM

Click Update to save your selection, and view your page to see them in their new order.

Screen Shot 2013-09-23 at 6.54.06 PM


Deleting an Image

It is also easy to delete an image from your slideshow. Click ‘Upload and Manage Images‘ again.

Screen Shot 2013-09-23 at 6.39.03 PM

Click on the section that says Gallery, to see all the images you have uploaded to your slideshow. Click on Show next to the image you want to delete:

Screen Shot 2013-09-23 at 6.57.47 PM

Scroll down to where it says Delete. Click it. It will give you a warning, click Continue.

Screen Shot 2013-09-23 at 6.58.12 PM

Click Update to save your changes.

Screen Shot 2013-09-23 at 6.54.06 PM

Adding or Changing Work Details

You will likely want to have work details like your title, type of materials used, and/or size or a year appear with your works.

Repeat the earlier steps. Scroll down to Portfolio Slideshow, and click ‘Upload and Manage Images':

Screen Shot 2013-09-23 at 6.39.03 PM

Click on Gallery again, and ‘Show’ on the work you wish to update its details:

Screen Shot 2013-09-23 at 6.57.47 PM

You have up to three lines of information, and an ‘Alternative Text‘. Here is an example of classically filled out work information:

Screen Shot 2013-09-23 at 7.07.37 PM

Title is the work title, although it could be anything or everything connected to your work, separated with commas.

Alternative Text is some text that will appear if there is ever a loading issue with the viewer’s computer. Leave it blank if you don’t want anything to appear. It can also help Google Images identify your image. You can write whatever image search terms you want your work to appear under.

Caption is whatever you want for line two. Here we have used it for the year.

Description can be a description of the work – but here we have used it for the work’s medium, and its size.

You can see what the information entered above looks like, it is here:

Screen Shot 2013-09-23 at 7.15.43 PM

Click Save Changes to save your changes.

Screen Shot 2013-09-23 at 7.07.51 PM

Click Update for your information to appear live on your website.


Change Thumbnails and ‘Previous/Next’ Navigation

You can turn your thumbnails on, or off, or put them at the top, or the bottom, with a click. You can also do this with the previous and next image navigation. The settings to change are here:

Screen Shot 2013-09-23 at 6.06.07 PM

There is a large range of other options you can alter – including automatically playing slideshows, the speed, make images jump to specific pages or web addresses, and do other things. Play with the settings to see what they do, and look for the many online tutorials for whatever you would like to do.

We also have different, more advanced image handling software available, that you can use in your website instead of Portfolio Slideshow. Read the other image handling tutorials for more information.