What to put and where; how to organize your working steps to be more efficient; resizing and cropping images according to the style guide without the use of Adobe Photoshop; recommended alternatives to Photoshop.


In this video, you'll learn how to handle files and images for your site.

First let's revisit the folder structure — which we covered in an earlier video — where we have folders for our subsite called "underscore docs," "underscore images," and "underscore includes."

These folders allow you to upload your files of the same purpose and type into the same place.

Image subfolders are often created to host images specific to a page. This is helpful for pages that are going to display multiple images. This is not expected to be used all the time. It is meant to make it easier to find and add images to your page. 

When you highlight an image or file in the folder view, you'll have a limited selection of actions available in the right sidebar under Content Maintenance. 

One particularly important function is Replace. "Replace" allows you to upload a new version of a file—an image or document—without needing to update all references to existing instances of these files. In other words, if we replace a file using this approach all uses of the file on the site will also be updated as well.

Let's create a new paragraph and insert an image on this page. 

We'll browse to the folder that contains the file we need. Click on Choose File. We have some placeholder images in a different folder right here.

I'll insert a portrait-oriented image, which is "placeholder 190 by 120." Click on Open.

When you add an image like that, you will add alternative text. In this case, it's "placeholder."

To place this image to the right, choose "block right" then click "OK." 

The formatting doesn't appear on this image while you're editing, but we're going to copy more text to demonstrate this formatting in the preview. 

Paste it multiple times, then Save and close. 

In Preview, it'll show that the item is now floating to the right with text flowing around it.

Click on "edit page," select this image, right-click and choose "Edit Image," and you can change the class to block-left. 

Some of these classes are not compatible with images, so for formatting them in the context of a page, use block-left and block-right. 

Another important tip is to upload multiple images that are related to a page to the image folder.

Let's open a folder and upload multiple files using this placeholder image directory. Then click "Upload" and "Save." Now we have multiple files.

Let's go back to our work-in-progress page to edit this page, create a line break, and add an image.

You'll see an Explorer tab within the "Image Properties" window. From here, you can scroll down to the folder you need and see that multiple images are available to insert as needed.

By adding multiple images to a folder, you'll become more efficient with adding images to a page, instead of uploading one by one.

Next, we'll cover resizing and cropping images based on the style guide.

If we go to the Style Guide page, there is a page called "Using Images in the Web."

It's important to remember the guidelines on this page, including specific image sizes to use on pages.

If you're working with large images, use a program like Photoshop to edit them. Windows computers and Mac's also have built-in photo editors for you to use. 

There are sites like I LOVE I M G dot com that allow you to upload images and make edits, and it behaves a lot like a web-based Photoshop alternative.

In this case, there's an uploaded image called "placeholder 720 by 180."

We can make edits, such as cropping images, with a "Fixed Size" or "No Restriction."

So, we can change the "Aspect Ratio," have a "Fixed Size," or choose "No Restriction." Then we can save it.

Overall, this is an excellent tool and a great alternative to Photoshop for making quick edits to images you own.

To link to other files, first, ensure that you have uploaded them to the correct location. Type in the phrase you’d like to use to link to the file. Usually, it is the formal title of the document. Avoid using non-descriptive phrases like “download this,” or “click here.” Highlight the phrase, and in the Link field, you can type in the file name of the document. As you do this, you will get suggestions from Site Executive. You can also use the standard SiteExecutive browser. Select the correct file from the suggestions shown. You can also click the link icon to the right of the field, and navigate the folder structure to arrive at the file you are linking to.