Adding Images
Depending on your design, you may attach images directly to your content, or you may use text fields to add images.
When adding images, please keep the following in mind:
Basic rules for images on the web:
- Images must be in focus and clear
- Images should not contain text
- Images should supplement and enhance the content
- Images should not supply any of the necessary content, such as dates, locations, titles, etc.
Images should not be so large that they affect the page speed. Review recommended image dimensions
Types of images
Listing page and promotional images
These are square images that will link to your content from pages such as:
- Marquee on your main page
- Featured articles/news on your main page
- Featured events on main page
- Event listing pages
- News pages
- Newsletters
In events they are called Image for Event Lists.
In articles they are called Thumbnails.
If you plan to feature or assign an article to your marquee, the size and quality of the image must be better than that of a thumbnail.
Promotional images must:
- Be square, with a 1:1 ratio, otherwise aspects of the image will get cut off when presented
- Not contain text
- Be legible at a small size
- If for a marquee, it should be a high quality image
Find specific dimensions for each type of image here.
How to include images in CHSS Web
Attach an image
When creating an article, select the button to Attach Main Image
OR
When creating an event, select Image for Event Details page then Attach Image for Event Details Page
The width of the attached image is constrained to 250 pixels
Attaching an image allows you to include a byline and image caption that will be pre-formatted on the page below the image.
The attached image will automatically appear left-aligned on the page and the article text will wrap around it.
Insert an image
When creating content in CHSSWeb, certain fields will allow you to insert images within the rich content you have created.
To insert an image in the rich text field select Insert then Image.
This will give you the following options:
- General
- Advanced
- Upload
There are two ways to insert an image in the text field.
Browse for an image by selecting General,if you have already uploaded the image to CHSS Web and know the full URL for the image, you can paste it in the Source field under General.
Upload an image by selecting it from your computer.
When either uploading an image or providing the source for the image, the next steps are to provide information about your image.
Image is Decorative:
This lets screen readers know that these are only decorative images that don't have information needed for the overall understanding of the page.
Alt Description:
If for some reason your image does not load on the page, this text will appear in its place, so be descriptive. This is also used by screen readers to describe an image. Images should have this filled in or be set to Decorative. Read more about alternative text.
Width & Height:
Here you can specify the size you want the image to appear on the page.
Always keep the ratio locked (the lock button next to the width and height). This will ensure that if you change the image’s width or height, the image size will adjust to keep the image original ratio.
Do not assign a larger width or height than the original image; doing so will render the image on the page grainy.
Once the image appears in the rich text field, you have the option to drag the corner of the image to adjust the size.
Show Caption:
If you select this button, once the image is inserted, you will see a text field option just below the image where you can type an image caption.
Advanced:
Vertical space & horizontal space: When text wraps around your image on the page, you will probably want to add some space, so the text doesn’t touch the edge of your image.
Border width/style:
You have the option to set a border around your image.
Align the image
To align the image select the image, then the three dots in the editing tool, and select the alignment.
- The default alignment is to the left.
- Left aligned: text on the page will wrap around the image on the right of the page.
- Right aligned: text will wrap around the image on the left of the page.
- Center: text will appear below the image
- Justify: the image will be left-aligned and text will begin below the image.
When text wraps around an image, this is when you need to pay attention to the vertical and horizontal space options seen when uploading (or choosing) the image.
To edit the space around the image:
Choose the image, then the three dots in the editing tool, then the image icon then advanced.
This is where you can add space between the image and text.
Add a link to an image
Once you have inserted an image in the main content of an article or event, you can add a link to the image.
To add a link, select the image, then the three dots in the editing tool, then the link icon.
Add an image to the sidebar
Certain types of content such as articles allow you to add an image to the sidebar of your content. It’s important that the image you upload is not more than 200 pixels wide, or it will not render properly.