Photos – how to prepare, upload and utilise them effectively
Before uploading a photo to SiteCore it is important to ensure that what you have is correct. The recommended formats for photos are either jpeg or png and it is important that you pay attention to the sizing of the image. The standard width of a microsite is 600pixels and anything surpassing that is generally too large, especially since large photos have high file sizes which slow the loading time of the website. However the size that you need depends on the purpose of the photo on the site, as banners for microsites for example need to be 920 width, much more than 600, meaning the sizing of photos is dependent on purpose. The details for each photo are as follows:
- Horizontal Carousel Images: 1280x460
- Vertical Carousel Images: 320x417
- Corporate Short Banner Image: 1280x200
- Microsite Banner Image: 960x273
- Corporate Embedded (Body of Text) Image: Max600 Width, Variable Height
- Microsite Embedded (Body of Text) Image: Max580 Width, Variable Height
- Thumbnail Image: 74x74 (Rounded corners)
- Feature Module Image: 550(variable by size)x200 (feature modules fit to the block so there is less need to worry, just make sure the image is not overly large)
Once you know what size you need the photo to be, the easiest and most accessible way to resize a photo is in paint. Find the photo in the file on your computer and right click open with paint. Here you can see the resize button, simply change the quantity to pixels and change the horizontal, the vertical automatically changes proportionally, then press ok and save the image under a new name so as to not lose the original should you need an alternate size later on.
If the photo that you are editing is a thumbnail then you will need to edit using as there is an option to round the corners of the image. Simply go to the site and select upload file, finding the relevant photo that you wish to turn in to a thumbnail.
From here, crop the image to be what you want to appear and resize the image to be 74x74 pixels.
When the image is the correct size you can round the corners off to make sure it looks correct on the page. Do this by selecting the round corners button and changing the border width to be 0 and the colour to white.
Remember to apply changes and save your image to be uploaded to SiteCore and used as a thumbnail.
To upload photos, go to the media folder and create your own folder by right clicking and creating new folder. If you are working on a microsite just try to make sure that folder is under the folder for your relevant site.
Select the folder that you have just created and upload files (advanced) and choose the photos that you wish to upload into your folder. Holding down control and clicking allows you to add more selections without removing your current selection and holding shift and clicking allows you to select any number within the selected image and the one you shift click. Once done select open and this window will pop up.
Ignore most of what’s on this page, the advanced settings we chose are so that you can go through and add alternate text to each photo for accessibility. Go through and describe the photos as primitively as possible and once done select upload and wait. Submit, approve and publish the folder to make these photos available to be used by anyone at any time throughout sitecore.
To use photos you just have to click insert media in whatever text field you are editing in, for a regular text editor it is as I’m showing you now.
For more detail on how to do it on each different aspect of editing, see the other videos or guides on this page.
The last thing I want to talk about for photos is how to make it so that an embedded photo doesn’t get lost off the page if someone is looking on a screen that isn’t large enough to accommodate it. To do this, select the text field that you have inserted the photo in to and at the bottom select HTML.
Here you have to look for the image which will look something like this.
Scan across and where it has the dimensions replace both the horizontal and vertical values with 100%.
This means that when your website is on mobile or if the window is shrunk sideways, the person using the site won’t lose any of the photo as it fits to the screen.