Sitecore: Adding images
- Bass, Jeff
Resizing your image
Before you upload an image to Sitecore, it’s important to make sure it’s the correct size. When you upload a larger image than you need, your site visitors end up with a delayed page, and mobile users get extra strain on their data when they have to download that large image. So, how do you know what size you need? University Communications provides a helpful guide in the wiki to determine the correct size for your image, depending on where you are trying to add it. That page is located at http://spu.edu/imagesizes.
Once you have determined which dimensions you need, you can either resize the image in Photoshop or use a free online tool. I like to use a tool called Birme, which you can use by navigating to http://birme.net in your browser.
Adding your image to the Media Library
Now that you have a properly sized image, it’s time to add it to Sitecore.
When you first log into Sitecore and access the Content Editor, you will see another tab at the bottom, Media Library. If we click into this, we will see folders roughly organized in the same way as the SPU website. For example, the University Communications site is in administration and then university-communications in the content editor, and in order to access the photos for those pages, we navigate to administration and then university-communications in the media library.
It’s up to content editors to upload their images and documents to their department’s folder, which makes it easier for everyone else to navigate the library as a whole.
So, how do you add images to the media library? First, click on your department’s folder. Once you’re in there, click on the “Upload file” button. Click “Choose file,” and then select the image from your computer. Then, click the blue “Upload” button. Now, an important final step is to add alt text to the image. Alt text is important for site visitors who rely on screen readers, to provide a meaningful description of what is depicted in the image. Once you have added a description here, click “Save.”
Adding your image to a page
Now, if we go back to the Content Editor, we can navigate to the page we would like to add the image to. Let’s add the image to the item we created in the last tutorial. Scrolling down, I can see the “Image” field here. Clicking “Browse” will bring up the media library, and I can navigate to the image I would like to add. I find it helpful to click this small icon that enables us to view the media library as a list, as it is easier to navigate. Once you find your image, click the blue “Select” button.
Now, I want this image to appear wrapped in the text, with a width of about 25% of the total width of the content. To do that, I scroll down to the “Image Position” field, select 25 under “Width,” check the box under “Wrap Text,” and then choose my positioning. I would like the image on the left in this case. Once you are done, click Save, and then preview the page. As you can see, our image is appearing in the body of the text as intended.
Header images
In order to add a header image to our page, I am going to upload an image with dimensions I got from http://spu.edu/imagesizes . After adding the image to the media library, I return to our page in the content editor, and scroll down to the “Intro Image” field. Clicking “Browse,” I select the image from our media library folder, click the blue “Select” button, and then click “Save” on the page itself. Previewing the page, I can see that the header image was added correctly.