Add a MagicSlideshow photo presentation to your webpage

Categories » » » All Pages
19th September 2017

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.

MagicSlideshow is the perfect tool for adding an impressive slideshow presentation to your webpages, with full screen view option.

A key feature of all IT 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 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

Generally, I like 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 if your Digital Camera or iPhone only takes 4 x 3 aspect ratio photos, they will be just fine. There is no need to edit those, if you do not want. The choice is yours.

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.

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.

Ecommerce Templates Image Sizes for MagicSlideshow presentation

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

(2) Large Image appears here on the webpage. I recommend you make this image HEIGHT 400 pixels. However, if your original photos are a nice large size, then feel free to set a taller HEIGHT up to 700 pixels for a presentation like you can see above. 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 HEIGHT of the first Large Image you upload will determine the Height of your MagicSlideshow, even if subsequent photos are taller.

(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 is a large resolution.

Image Heights for your first MagicSlideshow photo

Image Heights for your first MagicSlideshow photo

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.

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, as I have done in the slideshow above, just depending upon the original source photo resolution.

Image Heights for second and subsequent photos

Image Heights for second and subsequent photos

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

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

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

Ecommerce Templates Image Manager with MagicSlideshow activated

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