WiscWebCMS - Responsive Template (rst) - Adding and Using Image with Caption
This document explains how to add and edit the Image with Caption content block.
Using the Image with Caption content class allows you to place a single, static image on your page. It has several advantages over using images in Text Areas, including the option to add a caption, as well as choosing whether to show the image on small, medium, or large screens.
Adding the Image with caption content block
- Navigate to the page to which you want to add the image.
- Click on Open Page for Editing, and then click on Manage Main Content.
- Select Create and Connect Page.
- Select Image with caption.
- Add a headline for the Image. We recommend "Image with Caption - (Short Description)" where (Short Description) gives enough detail to let you know what the image is. This helps when doing searches for pages, so that you can easily tell your images apart.
In order to access the Block Settings you will have to click on Open image.
- Block Title: Allows for a title in large font to appear on top of the Image with caption.
- Alignment: There are 3 options for alignment, left, right, or center. If there is other content on the page, the image will be aligned left, right, or center, depending on which you choose.
- Width: You can adjust the width to which the image can stretch, or if you leave it on "Auto" the box will be constrained to however large the image is.
- Edit Image (required): This is where you can upload or select the image you wish to have presented. Upon clicking the red editing dot with an F inside of it, you will have a Management Server pop-up that will let you select the image once you click on the pencil icon next to Image as seen in the red required box in the picture below this paragraph.
After clicking on the pencil icon found in the required box in the image above, you will have a 2nd pop-up window that will lead you to the Media Asset Management window. Here you can click on Select Asset from Local File System to browse for pictures that haven't been uploaded onto WWCMS yet, in order to upload them. If the picture has already been uploaded, it should show up here and you would just have to click on the file name underneath the picture thumbnail and click OK in the bottom right corner to use that picture.
- Image alternative text and ALT attribute (required): You can find these 2 text sections in the required box in the 2nd to last image where it shows us how to select an image. Both are required and may be filled with pretty much anything, whether it relates to the image or not.
- Edit Caption: In the 2nd to last image on this page, at the very bottom of the image you will see a text box that says Caption. This is where you can edit the caption that will show up underneath the Image. Editing an Image with Caption's caption will give you something that is exactly like a Text Area content block, so you are able to treat it as such.
- Show on small, medium, large screens: Allows you to set the screen sizes on which the image appears. Small is for phones. Medium is for tablets. Large is for full screen laptops and desktop monitors.