How to add photos to your website page

14th May 2016
Article Publisher

This explains how to upload and set the size of photographs to create an impressive “Magic Slideshow” presentation on your website page with full screen view option.

Upload original full size images that you have saved on your local computer. Let the “Image Manager” take care of photo resizing and filesize optimization for fast download on the web. All image files will be uploaded into the “prodimages” folder on the server.

Image Filename Best Practice

You will be surprised about how many extra website visits you can get from Google “Image Search” alone !

For additional Search Engine Optimization, simply give each photograph a descriptive-filename.jpg

  • Press the F2 key to Rename a file. (Or right-click and select Rename.)
  • NO spaces in filenames, use-dashes-to-separate-words and use all lower case letters.

Note that filenames for the web are all CaSeSensiTive. To avoid errors, confusion and mistakes, webmaster best practice is to always use lower case.

Facebook and Twitter Integration

This is how you specify the one photo filename to be automatically detected and uploaded into a Facebook or Twitter post. Your website pages will all have the necessary Open Graph meta code.

Even if you don't have a Facebook or Twitter social media account, it is best practice to do this anyway. It is now commonplace for people to share interesting web page URL's on Facebook and Twitter. And it is your feature photo that will instantly attract attention, get clicks and more visits to your website.

  • Follow this simple naming convention for your best feature photo, and then all will work fine and dandy.
  • Make one photo filename exactly match the Page Reference.
  • For example : Page Reference = my-new-webpage
  • So make any one Image filename = my-new-webpage.jpg
    Giant image size works best for this. This photo must be .jpg lower case extension; not .JPG

Open the Image Manager

Click the Image Manager button

Click the Image Mgr Button

Click the button in the Giant Image column

Click the button in the Giant Image column

Click the blue button with 3 dots ... in the Giant Image column

Click the Browse button

Click the Browse button to select a photo on your local computer

Click the Browse button to select a jpg photo on your local computer

Browse your local computer and select the original full size jpg photo to upload

Locate your original full size jpg photograph and then click Open

Set the HEIGHT of each image size as recommended

16:9 ratio 1920 x 1080 pixel Full HD widescreen photos will suit your website layout best. Although the Giant Size photo does not necessarily need to be that big. Also please note that the following size settings will also work just fine for 4:3 ratio photos as well.

Magic Slideshow Recommended Image Sizes

IMPORTANT : The "Populate smaller image fields?" box must be ticked, YES.

  1. Magic Slideshow Giant Image : 1080 pixels HIGH.
    > Once a Giant image is uploaded, Magic Slideshow will be activated.
    > If your original source photo is only small, then just resize to whatever height you consider will retain an acceptable image quality. (See note below about fuzzy images.)
  2. Small Image : 225 pixels HIGH.
    > This will be used as the Page Preview photo. You only need ONE of these.
    > Your website CSS style sheet will automatically scale this photo down smaller as necessary to fit the layout, according to the web visitor's device screen size and screen orientation, portrait or landscape.
  3. Large Image : 400 pixels HIGH.
    > These images appears on your Long Description page. i.e. This page you are reading now.

Wait for the file to upload

The image upload and resize process may take up to 30 seconds or a minute, depending upon the original filesize. On the internet, file upload speed is 10 times slower than download speed. So be patient.

Your file was successfully uploaded

Click the “Close Window” link

Repeat the upload process for the second and all subsequent photos

  • For the second photo upload, open the dropdown menu and select "No Small Image". You do not need a small photo from this point on.

Sizes for second and all subsequent images

Upload any number of photographs, remembering that each must have a unique filename.

But I only have ONE photo !

In that case there is no point in activating Magic Slideshow. So leave the Giant Image column empty and just upload your single photo into the Large and Small columns.

What to do when you only have one photo to upload

The recommended maximim image sizes for a single photo are :

  1. Large : Max 400 pixels HIGH or Max 700 pixels WIDE. But make this smaller or larger as you like. Whatever looks good to you.
  2. Small : Max 225 pixels HIGH or Max 400 pixels WIDE.

Uploading one photo only

My Giant Full Screen images look FUZZY !

Well, that means upscaling the original photo to full HD resolution 1080 pixels High was just too ambitious. No problem. This is easy to fix.

Simply upload the photo(s) again using the same filenames. But this time, make your Giant image say 600 pixels High, or whatever you think will look okay.

The previous photo files will be overwritten on your website server.

How to add Titles and Captions to the Slideshow

This is more advanced, but easy enough to do if you follow these steps carefully.

Open the “Image Manager” and notice that in the “Giant Image” column you have a code snippet that looks something like this :


(1) To add a Title overlay on that photo, you would simply type red code onto the end like this :

prodimages/magic-slideshow-webmaster-video.jpg" title="STEP 1 : Click the Image Mgr. button to open it

IMPORTANT : Please notice the " double quote mark to begin, but there is NO QUOTE on the end. The software adds " quote marks " to both beginning and end of this snippet when generating the finished HTML page code.

(2) To add a Title with a Caption underneath, then you would type code onto the end like this :

prodimages/magic-slideshow-webmaster-video-2.jpg" title="STEP 2 : Click the first Blue Button in the Giant Image column" data-caption="The Upload Image window will open

Notice that the Caption font size is slightly smaller and a bit lighter in colour, compared to the Title.

(3) If you would like just the smaller Caption only, then you would add code onto the end like this :

prodimages/magic-slideshow-webmaster-video-3.jpg" data-caption="The File Manager on your local computer will open

(4) Can I have 2 Titles or 2 Captions on a photo ?

  • NO, that does not work.

Titles and Captions added to a Magic Slideshow presentation in Ecommerce Templates

When finished adding Titles and Captions, remember to click the "Submit" button to save your changes.

Navigating through the slideshow

Desktop computer users can use their mouse to click the < and > direction arrows that appear (upon hover) either side of each photo. You can also use the Left and Right arrow keys on the keyboard. To pause the slideshow, hover the mouse over the photo.

Mobile touchscreen device users can simply swipe Left or Right with their finger to cycle through the photos.

Otherwise click or tap any thumbnail preview image (or bullet) underneath the photo slideshow.

Click the icon at top right to expand into Full Screen view mode.


What do you think ?

Add your comment ⇒

You may also be interested in …

Apply Headings and CSS Text Styles to your webpage
Insert a photo into the body of your webpage
Embed a YouTube video into your webpage and make it responsive