Info Centre

Adding Images to your Magento Store

Being able to add images to your Magento store easily, that also look right and load quickly is a very important part of managing your store.

The first thing you should be familiar with is if your store has specific dimensions it uses for particular sets of pictures. For example, slider images, product images and other images are sets of images which should all be the same ratio so that when uploaded they all look the part.

Product images in Magento should all be the same aspect ratio – whether it be square – say 1000px by 1000px or 1200 by 800px. As long as the main product images (not additional photo’s) are the same ratio, they will look okay.

As the slider is already set up with a specific size, these pictures should stay that size. To find out what size an image is, using firefox you can right click on your mouse, click on ‘view image info’ and from there see the exact size of the image that you need to be replicating.

Blog images also come with a specific aspect ratio, and by doing the above trick, you can figure out what ratio this is.

When creating pictures for your website, make sure you use Photoshop or a similar program when saving your picture. Photoshop has a special feature that removes a lot of unnecessary data from a picture and thus allowing it to be compatible with websites – especially if someone has a bad internet line or are using their mobile device to view your website. So always use the ‘save for web and devices’ and try to minimise the size of the picture (in Kilobytes) without reducing the quality. .jpg pictures usually work out the best in terms of reducing the Kilobytes without harming the quality.

Once you have your picture(s) ready, log in to your Magento admin panel.

UPLOADING PRODUCT IMAGES

To upload product images, click on CATALOG and MANAGE PRODUCTS.

You will see a full listing of all your products. Find the product you want to add pictures to and then click on the 4th tab down on the left hand side called ‘images’.

On the bottom right of this screen you will see two orange buttons – BROWSE FILES and UPLOAD IMAGES. The ‘browse files’ is used to find the image(s) you want to upload – you can select and upload multiple images at once with Magento. Once you have selected the images you want to upload from your computer using the ‘browse’ button, you will see a list of images ready to be uploaded in RED. When you are happy with the images that need to be uploaded, press the ‘upload images’ button, and all of the images you had selected will all be uploaded to the product in one shot.

If you want to change the main picture, or if you have just uploaded a new product with new pictures, you will need to make sure you click on the respective ‘base / small / thumbnail’ radio buttons. Without doing this, your picture will not show up in category or product pages.

Once done, make sure you hit the ‘save’ button at the top right of the screen.  Otherwise your work will NOT be saved.
 

UPLOADING SLIDER IMAGES

Slider images are really easy to upload.  Remember to make sure that they are the correct size.

Navigate to Manager in the admin menu and to EM Slideshow (see below).   You will see the list of current slider.  The homepage slider is the ‘main slideshow’.  Additional slideshows are the rider slideshows (and set up exactly as the home slideshow).

To edit the home slideshow, simply click on the line, and then on the ‘images’ tab.  Don’t click on anything else.  You will see the current images.  If you want to add to it, hit the ‘add new image’ button and choose your picture (1 picture at a time).  If you want to delete an image, hit the ‘delete image’ button.

Once you have uploaded an image (or images) to your slideshow, hit the ‘save’ button.  Check to see if an empty image has shown up.  This seems to be a little glitch with the image uploading software.  But it’s simple to remedy – just delete it and save it and the glitch is gone.  If you don’t do it, there will be a ‘blank’ image as the first sliding image on your slideshow, which will look a bit odd.

RIDER IMAGES

Since the rider images were first configured to be slideshow images, they are uploaded in exactly the same way as the homepage slider.  If you upload only one image and adjust the settings, it will show up as a static (non-moving) image.   The only thing to note here is when adding new riders, to ensure you duplicate the EXACT settings as with one of an existing rider.  So open up an existing RIDER slider and DUPLICATE the exact settings in each of the GENERAL / SLIDE ANIMATION and NAVIGATION tabs.  Also make sure that you clearly label the NAME section as to the rider’s exact name and the identifier is the rider’s name with a dash in between for any spaces.

BLOG PICTURES

Blog post images that are the FEATURED images – ie show up on the homepage section of the ‘latest news’ and that show up in the blog section as thumbnails need to be a specific ratio.  Again what happens otherwise is the images will look stretched or distorted.  So the best thing to do is to upload the right ratio of image and then all will look really nice.

So to navigate to the blog go to MANAGER > EM BLOG and MANAGE POSTS.

When you are there you will see a lists of all the blog articles there.

Either add new or click on an existing blog image.

In the first section you will see where to upload the ‘featured image’ (see above).  Simply click the browse button, find your prepared (correct size) image and upload.

Once done, you can go to the ‘content’ tab on the left.

If you are going to add 1 or multiple images to your blog post – scroll down to the ‘content’ section/box and click on the ‘image’ icon in the WYSIWYG panel.

You will get a box that opens up.  Click on the icon as pictured below:

This opens up the ‘media library’.  Click on the ‘browse’ button to find your picture (or choose an existing one by clicking on it).

Once you have your image(s) chosen, it has not yet uploaded.  It will show up as a red list.  When ready, click the ‘upload files’ button.  This will upload them (and they will show up at the bottom of the list – so you have to use the scroll bar to scroll all the way to the bottom).

Once you have scrolled all the way down, SELECT the image you have just uploaded and want to show up on the blog.  As you select it, you will notice that the INSERT BUTTON at the top right appears.  If all correct, click the ‘insert’ button.

This then closes that window and shows up the original image window – but this time with the image ulr showing.  Now add an image description and title – this is good for SEO.  Note: try to name images when you save the from photoshop as descriptive as possible.  Also try to include important keywords like ‘jet ski’ etc. in the image title, description and the image name – ie jet-ski-racing-event-riders.jpg rather than 1032493450.jpg

Once done with that – click ‘insert’ and  your image will show up.

Again remember once done with your blog post, ensure you save it.

UPLOADING MODELS’ PICTURES

The models have a CMS page of their own – go to CMS > CMS pages and find the models page.  These images are uploaded exactly the same way as the blog content pictures.  Just make sure they are the right size before uploading.