Add a MagicSlideshow photo presentation to your webpage

Categories » » » All Pages
02nd June 2020

A picture is worth a thousand words.” And that is most certainly true on the internet. Giving your website visitors a really good look at what is being offered for sale, or the topic of an article, can make all the difference.

Magic Slideshow is the perfect tool for adding an impressive slideshow presentation to your webpages, with full screen view option. A key feature of all I.T.ZAP websites, the software is seamlessly integrated into the Ecommerce Templates "Image Manager".

The slideshow above will take you through the simple steps involved in sizing the HEIGHT of Small, Large and Giant images for upload into the "prodimages" folder on your website.

For more detailed explanations and recommendations, jump to the topics below.

  1. Image Filename Best Practice ⇒
  2. Image Aspect Ratios ⇒
  3. Image Heights for your first Small, Large and Giant photo ⇒
  4. Image Heights for second and subsequent photos ⇒
  5. I only have ONE image ⇒
  6. I do not really have ANY appropriate image to display ⇒
  7. I DO NOT wish to show any photo at all ⇒

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, give each photograph a descriptive-filename.jpg

But just as important, descriptive filenames will help you find images on the website server whenever you want to insert a particular photo into a webpage.

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

Image Aspect Ratios

The default aspect ratio for Small Preview Images is now 4 x 3 because digital cameras and iPhones generally take photos in that ratio. And so this way there is no need to edit those original photos, other than to give them a descriptive filename.

Your website CSS style sheet will automatically rescale images downward on smaller iPad and iPhone screens to fit the image container, according to the maximum width and height available.

(Personally, I prefer to crop images to a 16 x 9 widescreen aspect ratio, which matches the aspect ratio of a Full HD Resolution Computer Screen 1920 pixels wide x 1080 pixels high. But that does require using image editing software on your PC. Websites can be configured for a 16:9 aspect ratio upon request. The choice is yours.)

Image Heights for your first Small, Large and Giant photo

There are 3 separate image sizes, each sized differently according to HEIGHT. Sizing by height makes the image aspect ratio 16x9, 4x3 or 1x1 square totally irrelevant.

  • In this example we have multiple images to upload, and so we begin by clicking the 3 blue ... dots in the Giant Image column. To upload your second and subsequent images, you click the 3 blue ... dots beside the rows underneath.

Ecommerce Templates Image Sizes for MagicSlideshow presentation

Browse to select the first image to upload

Browse to select the first image to upload.

Resize the first image to HEIGHT

Resize the first Giant, Small, Large images to your desired HEIGHT.

(1) Small Image is a preview photo that appears on the products.php summary page. You only need ONE of these. Make the HEIGHT 300 pixels and that will fit perfect. The maximum WIDTH permitted is 400 pixels. So an image 400 x 300 pixels is ideal. You can upload a smaller image size if desire.

(2) Large Image appears here on the webpage. I recommend you make this image HEIGHT 500 pixels. However, if your original photos are a nice large size, then feel free to set a taller HEIGHT up to 700 pixels. Images will downscale fine on small mobile screens. Or maybe you would rather make the Large Image height smaller. The choice is entirely yours.

  • It is important to note that the dimensions of the first Large Image you upload will determine both Width and Height of your Magic Slideshow, even if subsequent photos are larger.

(3) Giant Image is the photo displayed in Fullscreen Mode when the visitor clicks the X in the top right corner. Make this image HEIGHT 800 pixels for a reasonable download filesize, or up to 1,080 pixels HIGH if your original photo is high resolution. Upsizing photos larger than the original dimensions will result in “fuzzy” images and is not recommended.

If your original source image is only small, then set your upload HEIGHTS according to what you think will look acceptable on-screen.

If you do not like the result, then simply repeat the Upload Image process, enter different HEIGHTS, and the previous images will be overwritten.

Can you size images by WIDTH instead ? YES you certainly can !

Maximum widths to set would be: Small 400 px, Large 1200 px, Giant 1920 px.

Image Heights for second and subsequent photos
  • This time you do not need a Small Image. So remember to open the middle drop-down and select "No Small Image". You may like to alter the Large and Giant image heights, just depending upon the original source photo resolution.

Browse to select your second image for upload

Browse to select your second image for upload.

Select "No Small Image" and then resize Giant and Large to your desired Height

Select "No Small Image" and then resize Giant and Large to your desired Height.

Browse to select your third image for upload

Browse to select your third image for upload.

Resize Giant and Large images to your desired Height

This time I altered the Giant Image Height to 500 px, because the original jpg photo was only 460 px high.

As you proceed, notice that Image Resize Heights are retained, according to your previous upload settings.

When done, the Image Manager file list will look something like this …

Ecommerce Templates Image Manager file list


I only have ONE image

If you only have one image and do not wish to activate MagicSlideshow, then simply leave the Giant Image column blank. Set the image HEIGHT to whatever you desire.

Ecommerce Templates Image Manager settings for ONE photo

I do not really have ANY appropriate image to display

In that case, you can use your Business Logo. In the Small and Large columns simply type “logo.jpg” and leave the Giant Image column blank.

Use your Business Logo as the Small and Large image

I DO NOT wish to show any photo at all

Open the Image Manager and in the Large Image column type this: prodimages/no-photo.jpg

Ecommerce Templates Image Manager, display no-photo.jpg

This is a bit of a hack. It actually displays a white square 1x1 pixel in size, but does achieve the desired result.

Please note: You still really do need to display some photo in the "Small Image" column, even if it is something generic like a business logo.

More related pages …

Apply Headings and CSS Text Styles to your webpage using CK Editor
Watch how to apply Headings and custom CSS Text Styles to your webpage using the Ecommerce Templates content management system and CK Editor.
How to insert a photo into the body of your webpage
This Webmaster Video demonstrates how you can insert an image directly into the body of a webpage and then, if desired, align your photo to the centre of the page.
Embed a YouTube video into your webpage and make it responsive
This Webmaster Video demonstrates how to embed a YouTube video iframe into your webpage. Then apply a ZURB Foundation mobile friendly responsive CSS style to make the video automatically resize to ...