Images in SilverStripe 4: How to upload a new image

Locate the image you wish to upload. If you are taking a new selfie for use as a headshot, take it in natural light against a neutral background. Turn off your flash when taking the picture. 

Image size and proportion 

For headshots only: Your image should be cropped to a rectangle in portrait orientation with a ratio of 4:5 (8:10). Recommended image size is 72 ppi, 1000px high x 80px wide. 

For all other images: 

There may be a different truly ideal image size for each individual image use case. However, most images should be 72 ppi - 100 ppi in resolution and no more than 2,000px high or wide.

About image dimension in Silverstripe:
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.

Adding your image

To add your desired image or headshot to your page or Staff Page, navigate to the Image tab, then click “Upload new” or drag and drop image into the white box with the dashed border.

Once your image upload is started and the filename and thumbnail show up on the screen, the CMS requires that you “publish” the image before moving on to the next step. This takes a few clicks, so please be patient.

Begin by clicking the eyeball icon to start the image publication process:

Clicking the eyeball icon brings you to this screen. You won’t do anything meaningful here, just click the “Details” button in the upper right to keep the process moving along:

The final image publication screen offers you a chance to adjust the “Title” of the image, which is where you need to enter alt text. Alt text is very important for accessibility, especially for those who use screen readers and other assistive devices. You can see that our example shows the alt text “Placeholder Person Graphic” that describes the generic placeholder graphic image.

More about Title/Alt Text:
It should be 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.

Finally, click the dark green “Publish” button to publish the image before moving on:

Publication of your image brings you to the screen below, shown here in split screen mode.
Note that the image upload is complete when you no longer see the word “Draft” in red letters at left. In the Bio Page example below, the image should also display next to the name and all of the information from the “Contact Info” tab.

There is no need to click “Save” in the lower left corner if you see that the button’s background is white and a checkmark is present. The image below shows that your image upload was saved successfully and it’s OK to move on. 

*NOTE: If you get an error message at any time when uploading or publishing your image, don’t reupload the image! Pause for 2 minutes and reload the page. There is sometimes a lag between the upload acknowledgement and the image fully loading. If you keep reuploading, you’ll wind up with many multiples of the same image in the CMS.