Inserting Media into Your Page Build
The Best Tip For Inserting Images:
Pictures are like spices, they add to the dish but shouldn’t be the dominant flavor.
- Make sure you have sized your photos appropriately in an external editor.
- The largest your images can be is 330 x 330 pixels.
- Choose photos that relate to your content.
- Be judicious about your photos, too many photos takes away from your real content and can make your site look crazy.
- You can always get a refresher on how to upload media files in the Media Library training video.
Walk Through and jump to Points in Video
- To insert images into your page build, first lock your page and open the text editor.
- At the top of the text editor pop up window you will see a series of icons.
- The rainbow button with the triangle in the middle nestled in the linking icons is your button to FUN!
- This colorful button here is our InsertSitecoreMedia icon.
- This option will allow us to insert media files that we have previously uploaded into our Media Library.
- First use your cursor to click in the content editor field where you would like your image to go.
- Next, navigate to the colorful InsertSitecoreMedia icon at the top of the editor.
- Click it.
- A new window will pop up displaying the Media Tree.
- Find the folder where you have stored your uploaded images.
- Locate the image of your choice, click it and then click Insert.
- The image will now show up in the editor window.
- Make sure your images are properly sized before you even put them in the Media Library.
- To fix the placement within the text and make the image look more to your liking, you can make some adjustments by using the Apply CSS menu.
- CSS, also known as Cascading Style Sheets, will allow you to wrap text and add borders to the images on your site.
- To utilize these tools, click on the image you want to adjust.
- It will be properly selected if you see little white boxes on the corners and sides of the image.
- Then go to the CSS menu at the top of the editor, it will say Apply CSS class.
- Pull down the menu and try out your options.
- The only real way to understand how the CSS works is to just play around with it for a bit.
How big can I make my photos?
The largest we allow is 330 x 330 pixels. But honestly, your images can be a lot smaller than that. Standard is around 125.
Why can't I resize my photo in Sitecore?
It will distort the image and it will also cause a weird uneven black border around the image. Always use an external editor!!
Why do I keep getting told not to put images in Secondary Content?
Secondary content is very small and specifically sized and images tend to break the frame. It is best for links and limited text. Your secondary content will look cleaner without it and you can always use the same images in your primary content build where there is more space.
How do I move the image around? Can I just drag it?
No dragging but if you select the image you can do all sorts of fun things like moving it around or adding borders through the CSS menu. It is in the top right hand corner of your text editor next to the menu that says "normal."
- Make sure the images you choose relate to your page and add necessary or complementary information.
- Size your images in an external editor.
- 330 x 330 pixels at the largest.
- Most images will be about 125 x 125 pixels for average sized photos in a page build.
- Do not try to resize your images in Sitecore.
- Use quality resolution images. 300 dpi.
- Do not use too many images. Your content is the important part of your build.
- Use the CSS Class options don't just insert an image without applying a CSS class.
- Do not insert pdfs, word docs, or any other "media files" only media images.
- Do not put images in Secondary content, it is just too small of a space.
- You may need to insert and delete your images a few times to get the exact placement you desire.
- If using multiple images on a page size them the same. Uniformity is always easier on the eyes.