Images: How to embed, size and caption an image (SilverStripe 3 ONLY)

As of April 2023, these instructions apply only to the fasterdata.es.net website.

Use updated image embed instructions for all other CS Area websites: NERSC, ESnet, CRD, CS.

1.  In the “Content” window Place the cursor where you’d like the image to appear in the text.
2. Select the Insert Media button (the tree icon in the editing controls at the top of the content editing window.
   
   

 

3. Upload your image or select it from the CMS filestore (if already uploaded)

4. Successful upload is confirmed by a blue bar showing the filename and size. DON’T INSERT YET. Instead, select “Edit” to set the files display properties.

5. Set file properties (guidance below)

Guide to File Properties

Alignment / style

By default, images are placed on the left on their own, that is, set off by text above and below. That arrangement may work well for larger images, but in many cases, you’ll want a file to display smaller with text wrapping on the right or left. You may also choose to center images displayed on their own.

Dimensions

Silverstripe will automatically set a default size based on the default alignment - which is on the left “alone” that is, on its own line without text wrapping. Images under 600px wide will be set to their maximum width; images over 600px wide are set at 600px (the maximum center column width). An image displayed on the right or left with text wrapping should be adjusted to be 250px wide or less. Edit the width, the height will automatically adjust to maintain the images aspect-ratio and prevent it looking squished or stretched.

Alternative text (alt-text)

Edit this text with a matter-of-fact description of what is in the image. For example: “Two computers sitting on a desk” instead of “10 gig monitors”. Alt text is read aloud to sight-impaired website users, so the text should be descriptive and  make sense. By default, SilverStripe populates Alt-text with the filename, which is almost never adequate to the task.

Caption text (optional)

To caption an image type a description here. 

Title text (optional)

Title text appears in a pop up window when the cursor hovers over the image (but the image is not selected)

6. Select the “Insert” button to place image. 

7. Select the "Save" button to preview how the image will appear on the published page.

Image Tips and Troubleshooting

Don't like where your image is placed? Need to resize it? 

Best thing to do try again by pressing CMD (or CTRL)-Z to "undo" and try again with different placement and/or dimensions.

Caption too short? 

Sometimes the caption box doesn't extend the full image width (as shown here). This is a known bug in Silverstripe 3.x. Learn a temporary workaround for SilverStripe 3.x only.