Uploading Photos & Photo Galleries

Last updated 1/31/19

1

Where to go when you need help:

Digital Communications Tool Training Portal on the cusd.com website

eSchoolView Help

Contact Leslie Ashford or Jonathan Mathis

http://www.cusd.com/communications-homepage/digcommtool/

Click the Help button up at the top bar when logged into your website

LeslieAshford@cusd.com; ext: 73031

JonathanMathis@cusd.com; ext: 79114

Guidelines for Photos

• High quality images (this does not mean you can’t use a nice phone camera, but be sure the
image is of good quality before posting)

• Horizontal photos post better than vertical photos.

Single images:	Multiple images:	Photo Galleries:

Embedded image options in a Text Window Component (NOT inside the text box)

Upload your images into the text box of a Text Window Component

Make sure you provide Alt Text for the image so we are ADA compliant

When used for multiple photos as a slideshow

OR can be used to show single image and provides enlarge arrows

What to consider when adding a photo

Single Image = Embedded Images in a Text Window component

• Embedding images does not take away storage space on the website server! This makes it the preferred method.

• When to use:

• You want your image to appear with text

• You can place your text in the text box and then add your image to the dropdown section labeled Embedded Image Options

• Image will always appear on top of or next to text, but NEVER under text

• You want an image to appear by itself and you can place it wherever on your page (you can do this as many times as you like.

• You can leave the text area blank and skip down to the Embedded Image Options

• For great examples on how to have multiple single photos, each in their own component, please see any of Sierra Outdoors' Staff pages.

To add your photo to text

a

If the text already exists, click the pencil icon to edit this component.

If the text you want to add a photo to does not exist yet (and you’re going to add it while also adding a photo to it in one go), click the Edit Page and then the green “Add New Component” button. Then you will
b	add a Text Window and go in and edit.

Click the arrow for “Embedded Image Options”
(this is where you will add your single image)

This is auto checked. Leave be.

Choose file from computer. **Make sure it has NO . In the file title.

FIRST
Change the size of your photo here:
• >150 px = small icons • 200 px = medium icon • 400 px = ~ half the
component (medium image) • 600 -800 px = full width of
component (HUGE image)d

Choose alignment.
**If there was text in the text box above, this will determine the alignment in relation to the text.

MUST add Alternative Text or else you will not be able to move on and photo will not save.

• • •

Left = image left, text to right of image Right = image right, text to left of image
Center = image on its own line, text is
	
underneath.

Save to add the photo.

NOTE:
If you want to change the size of the photo, you must FIRST change the px #, THEN re-add the photo from your computer.

Black bar = 12/12 full width component

200 px

Black bar = 12/12 full width component

400 px

Black bar = 12/12 full width component

800 px

To delete a photo and have no image

Then click save. The image will be removed.

Multiple single images = Images inside a Text Window component’s text box

• This DOES take away storage space on the
website’s server.
	Only recommended if

absolutely necessary.

• When to use:

• You want your images to appear with text and have all info live in one component.

• Use the image upload icon in your text box

After clicking on the image icon, this window will pop up.

To Upload a photo from your computer, click this icon

Once uploaded, it will appear in the list of files to the left of the window.

Select the photo from the list and check the box.

Use the same px measurements here.

ONLY change the Width, height will auto adjust.

Type the Alternate Text HERE! DON’T FORGET TO DO THIS!

Select this setting to wrap text

Change alignment in the text box, NOT here.

Change Margin to 5-10 here

Click OK to insert into your text window.

Inside your text box, looks like this:

On your page, it will look like this:

• Photo Galleries do not take away storage space on the website server! This makes it the preferred
method.

• When to use:

Photo Gallery Component

• You want to have a slideshow of images on your page that auto scroll through

• You want several images in a row

• You want an image of a flier that when clicked, the flier is enlarged

•

NOTE: Make sure you choose photos all in the
	
same orientation

• All photos are vertical or horizontal, but not a mixture of both

Select Photo Gallery as Type

To add photo, select Browse. Choose your photos from your computer.

Only .png, .jpg, .tiff files allowed

Click UPLOAD to upload your photos.

WARNING: photos are not added yet!

1.	Add Alternative Text 2.	Title / Description are
optional. They will add a black description box on the photo.

Wait for photos to upload one
	
by one. The page will refresh
		
when done.

Note: you do not get to
		
change photo sizes in this
	
component.

Click Gallery Options to make changes.

Rotation/timing

Allows users to click a button to enlarge their view of the photo (you can do this with image versions of PDF fliers, as long as the PDF & RTF version is also available on the page)

Fotorama Gallery: slideshow

Lightbox Thumbnails: thumbnails of all images in a grid (depending on how many images present.

Control Buttons (forward/backw ard arrows)

Always auto checked, but NOT recommended.

Fore example, see the flier on the Boundary Study page

Transition effect options.

Fotorama Gallery

Title / Description

You cannot change the size of the photos, BUT
		
you can change the size of your component using
	
the columns method.
	See the columns/window 2

Auto takes up the full width of your component.

tutorial for more info.

Lightbox Thumbnails Gallery

Auto takes up the full width of your component.

You cannot change the size of the
	
photos, BUT you can change the
		
size of your component using the
	
columns method.

Users can click on the image to
	
enlarge it.