Images Overview
Images are a very important part of keeping users interested in the information on a site, as well as informing complex ideas that are be better illustrated than explained. However, there are some important points to remember about images:
- DO NOT USE IMAGES YOU DO NOT HAVE PERMISSION TO USE.
- Finding images on google is not a viable source as all images are copyrighted with different permissions. You must find images with the correct permissions. Doing otherwise can open the borough up to possible lawsuits.
- MSB has its own repository of images available to use. All of the images in the repository have the correct permissions for you to use anywhere in MSB hubsites or MSB publications.
- Not all images will need to be uploaded to the repository for use - some images should be uploaded directly to the hubsite.
- Only images that can be widely used outside of a hubsite and are professional photography quality are placed in the official MSB repository. Site specific infographics and other single use images can be uploaded directly to the hubsites for efficiency.
- ALL IMAGES MUST HAVE ALT TAGS.
- The federal government has decreed that all levels of government sites must be ADA compliant. An important part of that is that every image has an alt tag - this is a specific description attached to each image that will be read by screen readers for visually impaired users.
- Choosing an image size
- The standard desktop screen is 1920 pixels wide. This means that unless you are putting an image in the background across the entire page, you do not need to select the large or original size from Blue Harvest.
Sections
Add an Image
1. The easiest way to add images is to use the image type. This will allow you to use url images and uploaded images.
Alt tags
Tip: Alt tags are vital for multiple types of users! Alt tags are used in place of images when links break, or when the consumer's connection is slow and the image wont load. They are also used by blind and other vision impaired individuals when they surf the internet. Remember, they should have the same access the seeing should have to our information! So, if there are images, you must give them context to why the image is there. Screen reader programs will get to images and say "image of" and then put in the alt tag you put in. If the image is decorative, you do not have to be as detailed, but if the content around it is influenced by the image, please be descriptive.
i.e. if you are talking about a meeting and the picture is of where the meeting will be held "a picture of station 61" is usually sufficient. However, if you are using the image to show damage that needs to be repaired, a description of "a picture of station 203 with a broken door, 2 broken windows, and graffiti on the garage door" would be more appropriate.
So remember, when adding images, an accurate alt tag is ALWAYS required for the site to stay compliant with new upcoming federal guidelines - and its just good practice to make sure the information is accessible to anyone who could be using your site!
1. Go to the settings of your image(s), whether you have just added them or not.
2. click on the Options heading to expand the section.
3. Click the "Image Alt Text" field and add a helpful description of the image.
Getting Images from Blue Harvest
1. Click on the image placeholder in the page. This may not be an actual image - but these instructions will work all the same.
3. Click the "Search..." field and search for keywords for the picture you would like to use.
4. Click on the image you would like to use.
5. Check the top right hand and click on the dropdown arrow.
6. Choose the size you would like to use (you usually do NOT need to use the large unless you are using it as a background). Use the medium or small "Copy URL" button.
7. Switch back to the tab with your page.
8. Double-click this text field and paste the address you copied into this field.
9. To change how the image displays, and to add the alt tag, click Options.
10. Click the "Scale Image to Fill" field.
11. Use the grid to change the focus of the image within the page.
12. Here, you can see the image has been focused on the middle next to a longer text block.
Upload an Image to Hubsites
Tip: Images that are single use, or not the highest quality should not be uploaded to the main repository. Instead, they can just be uploaded to that single hubsite.
1. Click on the image you would like to replace - this may be the placeholder, or a previous image.
3. Click "Browse for Image"
4. To change options, expand the panel for options.
5. Click the "Image Alt Text" field and add in a description for users who cannot see the image.
Swapping out images
1. If you need to change images, you can do that easily by changing the URL, or uploading the new image.
2. To remove the old URL, you can triple click on the text, right click and select all, or just hold the backspace/delete keys until the field is blank. Than you can enter in the new image.
Image settings
1. To get into any settings, click on the pencil on the image you would like to change.
2. Click on the Options header to open the rest of the settings.
3. The "Scale Image to Fill" button changes the image to (usually) grow or shrink to
4. Here, you can see the image no longer has the ratio it started with, but it takes up the whole height of its container. This means it cuts off some of the image.
5. To change the focus of the image, you can click on the grid under Image Focal Point. You can see the effect here.
6. Adding an Image Caption will add the caption under the image. There are not a lot of settings for this, so let us know if there are any issues with how it looks.
7. If you would like the image to be a link to something (for example it is a preview of a program or plan, and you want the program or plan to open when they click the name or the image), then you will enter in the URL of the document or link within the Image Hyperlink.
8. You will not use all of these settings for every image! They are not required. They are just some extra tools you can use for images.
