Images can be added as page content or as a full-width background. Images scale up based on the content block/section you're adding, the image's original size, and browser width.
The Website CMS facilitates two primary ways to use images:
- Image sections, like banners, backgrounds, or full-bleed images, that extend across the width of the page
- Image content blocks for cards, buttons, gallery layouts and more
Recommended dimensions for images, therefore, depend on where (or the way) you're adding them and how these images are intended to be displayed. In general, though, when uploading images into your website, they should in .JPG, .PNG or .GIF formats, and should be optimized for web (ideally, under 3MB) and under 2000px in width. Images exceeding this size will be slow to upload, and slow to load on front-end sites.
Body Sections
Sections are the defined regions that you add to a Page and can drop content into. Some Sections allow for Background Images that are decorative and provide context to the content layered on top of it.
Uploading a Background Image can be performed by hovering over the horizontal center at the bottom of the section and clicking the green camera icon, like so:
Sections that feature a Background Image are typically full-bleed - that is, an image that goes edge to edge on your screen -- and should be at least of 1500 pixels wide, and as the image is decorative should be static (.JPG or .PNG).
The height is subjective to the content that you're inputting within that section, and will also adjust based on the size of the visitor's screen. For this reason, we recommend that you adjust the Section Settings such that the Body Section height is set to "Auto". This will ensure the height adjusts to the size of the content within the Body Section. If you've set the height to a percentage then you run the risk of the content surpassing that percentage and spilling into other body sections.
Participant, Team and Group Pages
The background banner or cover image is also a Section with a Background Image. When adding full-bleed background images to Participant, Team or Group Pages in Peer-to-Peer, we recommend the image be approximately 1500 px x 325 px. The height of this region is locked, so do not use the Height section controls here.
Image Content Blocks
There are an array of image blocks among the library of pre-formatted content blocks in raisin.
Dropping an image block into a page will automatically size the image to the area specified by the content block, and further, to the width of the Section it's added into. The image defaults to a stock photo, but hovering over the image will display an blue camera icon and when allows you to quickly upload an image from your hard drive.
After uploading the image, it will fit instead of the frame of the placeholder image. You can manipulate the image:
- Zoom in/out with plus ("+") and minus ("-") signs
- Use the directional arrows to place the image within the form
- Click the ellipsis and select No Crop to choose not to fit the image into the frame, and use the natural ratio of the image
Once fit, click "Ok" to place the image.
Image Properties
After uploading, we recommend adding a Title tag -- which is especially important for accessiblity. SEO. To modify the image properties, like where it links to and alt/title tags, hover over it and choose the orange link icon. Enter a descriptive title here.
The Properties pop-up also includes a 'BLANK PLACEHOLDER' tab, showing you the current dimensions of the stock photo. Changing these dimensions also you to override the default height and width of the pre-formatted block so that you can upload an unusually sized image.
For use of animated GIFs: If you are thinking about adding animation to your site in the form of animate GIFs, this can be achieved via the Image's Properties. Uploading a .GIF directly via the CMS will produce a static image. Instead, use the Image Manager or Document Manager in your account to upload the GIF. Copy the web address or URL of the uploaded image. When you return to the CMS, paste the GIF's URL into the "Source"
Legacy Modules
For legacy modules, check out image specifications here.