Tutorial: Uploading Photos & Photo Galleries

Last updated 2/9/22

1

Table of Contents

Guidelines for Photos Single Images
Multiple Single Images Photo Gallery Component Images Containing Text

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

• If image contains text, please see “Images Containing Text” section.

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 all images to remain ADA compliant

Can be used for multiple photos as a slideshow

OR can be used to show single image and provides enlarged 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.

Adding a Photo

1a

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

1b
If the text you want to add a photo to does not exist yet (and you’re going to add the text w/ photo all at once), click the Edit Page and then the green “Add New Component” button. Then you will add a Text Window and go in and edit.

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

4
This is auto checked. Leave as is.

5	Choose file from computer.

**Make sure it has no period (.) in the file title.**

3	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

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

7
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.

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.

8
Save to add the photo.

Examples of different px sizes

Black bar = 100% full width component

200 px

Black bar = 100% full width component

400 px

Black bar = 100% full width component

800 px

Deleting a Photo

1
Check the Remove existing Image box

2
Click save. The image will be removed.

Multiple single images = Images inside a Text Window component 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

	1
After clicking on the image
		
		icon,this window will pop up. Click in “Drop image” box.
		
2
Navigate to your file and select it i
list.
	
photo n the

3
Click Open.

4
Image will appear in your text box. Click on image in text box to bring up this menu.

5 Use this icon to select alignment – left, center or right – to position photo in
text box.

6 Use this icon if you want to add a caption
to your image.

7
Use this icon if you

want to add a hyperlink to your image.

8
REQUIRED

Add Alternative Text here.

9

Click Save to save all changes.

This is a brief description of the image and MUST
	
	be added to be ADA compliant.

• 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 flyer that when clicked, the flyer 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

1

Select Photo Gallery as Type

		
2
	
To add photo Choose you
your c

Only .png, allo
	
,select Browse. r photos from
omputer.

.jpg, .tiff files wed

3
REQUIRED

Add Alternative Text for each photo.

4

Title / Description are optional.They will add a black description box on the photo.

5

Click UPLOAD to upload your photos.

6
Click Gallery Options to

make changes.

10 Displays control buttons

(forward/backward)

7
Enter dates for gallery to

show/expire, if desired.

8	Select Display Mode:

11
DisplaysThumbnails.

Always auto checked,but NOT recommended.

• Fotorama Gallery:slideshow • Lightbox Thumbnails:
thumbnails of all images in a grid (depending on how many images present). Examples on following pages.

9
Select Rotation & Timing options.

12
Allows users to click a button to enlarge their view

of the photo. (You can do this with image versions of PDF flyers,as long as the PDF & RTF version is also available on the page.)

Example:See the flyer on the Boundary Study page

13
SelectTransition Effect options.

14
Click Save.

Fotorama Gallery

Automatically 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.

Title and Description show at the bottom of each photo.

Lightbox Thumbnails Gallery

Automatically 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.

Title shows at bottom of each photo.

Users can click on the image to enlarge it.

Images Containing Text

• Full text MUST also be available in either: • PDF & RTF
or

• Alt Text of photo

• For example:
• Text-heavy flyers • Schedules

• Newsletters

Images containing text (like this flyer) must also either:

1) Be available as a PDF & RTF download (in a Downloads component)
or

2) Have all text captured in theAlt Text of the photo.

If original file is available in PDF:

1

Add a Downloads component near image with PDF & RTF file.

2

In Alt Text of image in Text Window component,include the name of the file and the fact the fully copy is downloadable.

(See “Adding a PDF or DownloadTutorial” on this page for step-by-step instructions.)

(e.g.colorguard class – full copy downloadable below)

If original file is NOT available in PDF:

1

Add ALLTEXT in Alt Text field of image inText Window.

OR 2	If you hit the character limit in Alt Text:
a. Manually type copy into a Word file, and save as a PDF.

b. Then follow instructions on previous page for adding a Downloads component with PDF & RTF.

Kastner Intermediate Colorguard Class
Everyday people miss out on opportunities that could Kastner IntermediateColorguardClass Ev	change their life. Do not let that happen toy ou!
Participate in Kastner’s Colorguard class and grow your skills in acting, dancing, and performing in no time. Kastner Colorguar specializes heavily on technique in several areas of dance, which include ballet, jazz, contemporary, lyrical, and even some acrobatics/gymnastics!
In addition to working on dance technique we will also be learning dance routines for many performances throughout the year. During the second semester of school, we will “take the floor” in competitions against other schools as a winterguard.
Our class is an elective which requires commitment and a great work ethic.
Previous experience of dance, gymnastics, or theater is NOT required but is preferred. We have instructors able to teach every level!
Have any questions? Feel free to email or call marcopaim@cusd.com
559.327.2525