Adding images to an existing gallery Creation of a new gallery

Adding images to an existing gallery
Creation of a new gallery
Website Coordinators can create a Gallery. If you do not have a Website Coordinator you
can log a request with IT Service Desk to have one created.
About galleries
Galleries contain two different sized images. The smaller images are referred to as
thumbnails. They offer a preview of the image, when a thumbnail is clicked on it opens up
a larger version of the image.
Adding images to an existing gallery is made up of a number of steps. This document is
broken down into a series of tasks to assist you in this process.
File size, cropping and changing image dimensions
To learn about the importance of reducing an image’s file size and how to crop and
change the dimensions see Cropping and resizing images using Microsoft Office Picture
Manager
To add images to display in the gallery
1. To create the larger image
a) Using Microsoft Picture Manager (or your preferred photo editor), crop your
image(s) to 600 pixels high by 800 pixels wide (this is the maximum allowed size)
This will ensure your page will load quickly and provide the best display to those
viewing it
b) Save a copy of this image (using Save As) so you retain the original (if necessary)
Once you have saved the large version you are ready to create the thumbnail.
2. To create the thumbnail image for the gallery page
a) Using Microsoft Picture Manager (or your preferred photo editor), crop your
image(s) to 80 x 80 pixels square
b) Save a copy of this image (using Save As) so you retain the large image. You
should add the descriptor “thumb” or “TH” to its name so you can easily distinguish
between the two different sizes, for example, you could call the thumbnail: “deansaward-02-thumb”, and the large image “deans-award-02”
Page 1 of 5
3. To login to Edit+
a) Open your web browser and navigate to the gallery you need to edit. Once there
add /_edit to the end of the address to login to Edit+.
Now you are ready to upload the large images.
4. To upload the images using Edit+
a) Click New
which is located in the toolbar (top left) to launch the Asset
Creation Wizard, then click Files (from left menu) and the file type of Image
Click Image
to select
The Image Details screen will open
b) Click Browse and navigate to where the large file is saved, double click on the file
to select it (or click once and choose Open)
The file name will be automatically entered into the Enter a name field. If you wish
to change the display (friendly) name of the file click in the Enter a name field and
type a new name
Page 2 of 5
c) Enter the Alt text and Caption. Alt text is short for alternative text. It describes
website images that cannot be seen for people of vision impairment through their
assistive-technology. Alt text should describe your photo and can be as minimal or
descriptive as you like
The Caption appears underneath the Large image and is used to explain the
photo to people viewing it through the Slideshow.
d) In the Decorative Only? and Show In Menu? Sections click No to select (see below)
e) Under Create locations click Select Current Asset and click Create.
In the example below 2013 is the gallery location. (If you weren’t on the gallery
page when you selected New you would click the Select New Location to navigate
to and select the gallery location)
A progress bar will show the status of the upload. Once the upload completes you
can make the image live.
5. To set the large image’s status to Live
a) Click Edit on the Image Wizard Complete screen
Click Edit to open
Details screen
In the example above, the filename of John Smith’s photo is PP. When a friendly
name is entered it’s used to display it in certain areas but does not change the
actual name of the file. You can think of the friendly name as a mask or display
name
Page 3 of 5
b) Under Status, click the down arrow next to Change and select Approve and Make
Live
c) Click Save (top right of toolbar)
If you would like to learn how to upload more than one image at a time go to step 6
otherwise to learn about linking the thumbnail to the large image go to step 7.
6. To upload more than one image at a time
a) Click + Add more once if you want to upload an additional image
b) Click + Add more for every additional image you wish to upload simultaneously
c) Repeat from 4 b) to 5 c)
In the example below 5 images need to be uploaded simultaneously so the + Add
more button was clicked 4 times. Remember you need to make each of the images
live so they can be viewed by non-editors on your website.
Tip
If the process of uploading multiple images at once is stalling or too slow you should reduce the
number of images. Try 5 at a time to see how long that takes and increase accordingly.
If you added too many image placeholders you can easily remove them
To remove an image placeholder
a) Click the red circle with the white minus sign to remove the New
Asset (image placeholder)
Page 4 of 5
To upload your thumbnail images
a) Repeat from step 4 b) through to 5 c) to upload your thumbnail images
b) In step 4 e) you need to select the Thumbnails folder inside the gallery as the
location to create the thumbnails under
Remember you need to make each of the images live so
they can be viewed by non-editors on your website
7. To link the large image to its thumbnail to make the gallery work
a) Click the Find an asset button (see circled right) to open the
Asset Finder for your website
b) Navigate to the large image, click to highlight it and then click Select. The Details
screen will open, scroll down to the Related Image section
Under Related Image you can set your thumbnail image by entering the image
asset’s ID or you can click Select
Click Select
c) If you don’t know the image asset’s ID click Select and the Asset Finder will open
again, navigate to the thumbnails location, click the corresponding thumbnail and
click Select
d) Click Save
8. To preview your gallery
a) Open the Asset Finder and click the main
Gallery (that the Images are under)
b) Click Select. In the example below the main
Gallery is called 2013
c) Click Preview
on the main screen
You have now finished the process
Page 5 of 5