Welcome to the third part on my blog series for becoming a better content editor. So far I’ve covered using headings and using Metadata. This week I’m stepping away from type to talk about images/photos. This information is tailored for SilverStripe, but can be applied to most other Content Management Systems.

Get Organized!

I cannot stress enough how important it is to organize your images into logical folders. Taking the few extra steps to do this will improve your quality of life (okay, so that might be a bit extreme) but it will make it easier when editing your website.

How Do I Make Folders?

Click on the “Files” button located in the left sidebar of the CMS.

ss3 CMS with files section in red

You'll now be in the Files area of the CMS. Clicking the green “Add Folder” button will make a popup box appear containing a text field. Enter your desired folder name in the text field and press the “Ok” button.

ss3 CMS with add folder button in red

How Should I Organize My Images?

One of the techniques I’ve used to organize photos is to create folders based on the pages of the website. For example, I like to keep any images used on my blog post in one folder. So on this blog post which I’ve titled “How to Be a Better Content Editor Part 3 – Images” I’ll create a new folder with a similar name and put all my images for this blog post in there.

ss3 CMS with custom folder added

This method works great for me but maybe not for you. I recommend that you find a system that works for you and stick to it.

Using Images in Your Content

I’ve decided not to go through the steps of adding images because SilverStripe does a great job explaining that on their own help guide (http://3.0.userhelp.silverstripe.org/for-website-content-editors/working-with-images-and-documents/#Inserting-from-cms). Instead I will talk about the alternative text field.

Alternative Text

The alternative text, also known as the “alt” text is used when there is a problem displaying the image. It is also used by screen readers to assist visitors with visual impairments. Use the alt text to describe the picture you’re adding to the page. For example, if you were adding a picture of a blue mustang to your website you could just put “car” for the alt text but that isn’t very descriptive. Instead, use “blue ford mustang”.

That’s it for this week’s article. If you have any questions or have a suggestion for a future article please let me know in the comments below.