View source for Updating the Website Slideshow

= Overview =

Updating the website slideshow is something that can freshen the look of our front page. Doing so requires one to collect the new images, prepare them, and then send them to an administrative user for upload onto the site. Updating the slideshow is done in two parts: Updating the slideshow gallery on our Smugmug account, then syncing the website to the gallery using the administrative tool on our website.  This is an important concept to understand:  changing the Smugmug gallery won't do anything to the website until the sync is done! 

The detailed steps to do both parts of the update process are below.

= Updating the SmugMug Gallery =

This set of steps will help you update the gallery that the slideshow pulls from on our SmugMug account.  These steps take place entirely on SmugMug!  Begin by logging into [http://media.penfieldrobotics.com/ our SmugMug site].  If you do not know the login information, contact someone on the leadership team.

== Clean Up Old Images == 

Once logged in to SmugMug, click "Organize" in the top-left corner.  This will take you to the SmugMug organizer. Now follow these steps:

# The main web site slideshow files are kept in a gallery under the "Other" folder.  Expand "Other" and locate the gallery named "mainwebsiteslideshow". Click it.
# You will now see the existing slideshow photos on the right side of the screen.
# If you want to back up the existing slide-show, do the following:
## Click the "Other" folder collection in the tree on the left.
## Click "Create" above the tree.
## Click "Gallery"
## Fill in the screen that appears:
### For Title, use something like "slideshowbackup-2015-02-09" for a slideshow backed up on February 9th of 2015 -- this doesn't need to be precise, just something that gets the point across.
### For the other fields, you can just leave them blank/defaulted. 
### ''IMPORTANT:'' Do not change anything on the Security & Sharing tab!
## You will now have a new gallery in the tree under the "Other" folder.
## Click once again on the "mainwebsiteslideshow" gallery.
## Click each image you wish to remove from the slideshow (or select them all if you will be starting over or want a full backup of the old one!)
## Drag these images into the new backup gallery you made in the prior step.
## In the pop-up, select ''MOVE''.
## Verify the images are no longer in the mainwebsiteslideshow gallery and are now in the backup gallery.
# You should now be left with just the images in the mainwebsiteslideshow gallery you wish to continue having be a part of the slideshow!

== Collect Images ==

From the SmugMug Organizer, do the following to collect images for the slideshow:

# Browse the various galleries ''inside the organizer'' to locate images you wish to have be a part of the slideshow.
# When you locate one or more images in the gallery of your choice, select the image(s).
# With the images of interest selected, drag them to the "mainwebsiteslideshow" gallery located under the "Other" folder.
# You will get a pop-up asking if you want to Move or Collect the images: ''Choose COLLECT''.  DO NOT EVER MOVE IMAGES OUT OF THE MAIN GALLERIES INTO THE SLIDESHOW - this will cause the image to disappear from the normal gallery!  Choosing "Collect" as instructed will cause the image(s) to be copied into the slideshow gallery.
# Repeat in other main galleries until you have collected all the images you desire.
# You can also upload directly to the mainwebsiteslideshow gallery if you have images to use that are not in a main gallery already, but this is generally not desired as pretty much any image used for the slideshow should be in our main galleries as well!

== Organize Images ==

Now you will order the images to appear in the slideshow in the order you wish them to.  ''Generally you want a team-oriented photo to be the first image!'' Good instances of this are team photos taken at competition or in the school.

Start from the SmugMug Organizer.

# Browse to the "mainwebsiteslideshow" gallery under the "Other" folder in the SmugMug Organizer if you are not already there.
# Simply drag & drop the images around to order them in the order you wish them to appear in the slideshow. 

== Caption Images ==

Each image in the slideshow should have a caption that informs the website visitor what it is.  You can edit in captions on SmugMug.  Alternatively you can do them during the website sync (see a few steps below).  Doing it on SmugMug has the advantage that if the image is used again in a future slideshow, the website sync will automatically populate the caption from SmugMug!

If you want to set the captions in SmugMug, do the following:

# Browse to the "mainwebsiteslideshow" gallery under the "Other" folder in the SmugMug Organizer if you are not already there.
# Click "Select All" in the top bar if you want to edit captions for all the images.  Alternatively, select each image you want to edit the captions for.
# Click the "Edit" button (looks like a wrench in the top toolbar)
# Click "Title, Caption, and Keywords"
# In the screen that opens, click "Unselect All" in the top toolbar if you had selected all or more than one image on the prior screen. Now select just the first image.  This will let you edit the captions one at a time.
# Now enter or edit any existing caption under CAPTION.  Remember, captions should be short and sweet!  They should also be formatted using proper capitalization and punctuation. Treat it like a title (This is a Good Caption; this is not because it has no caps...)
# Click "Save" in the bottom right corner.
# Select the next image and repeat the above steps until you are done editing captions.


= Syncing the SmugMug Gallery to the Web Site =

The steps below will sync the contents of the SmugMug gallery to the slideshow on the main web site.   During this process, you will initiate the download of the images to our web server, crop each one to fit the sizing of the slide show, and verify or edit the captions for each image.

This process will entirely replace the existing slideshow with the current contents of the "mainwebsiteslideshow" SmugMug gallery so it is very important that you follow the steps above to organize and setup the gallery to contain the new images you wish to appear!

Start by going to the Administrative section of our web site.  If you do not know how to do this or do not know the login information, contact the Leadership team.

Proceed through the following 3 phases of the update process in order:


== Syncing Phase 1: Cropping and Captioning ==

The first phase of the update has you crop the photos pulled from the SmugMug gallery to match the slideshow's dimensions, as well as verifying or editing captions for each photo.

# From the admin section home page, select "Update home page slideshow".
# The page that opens should display all the images from the SmugMug mainwebsiteslideshow gallery, in order, along with their captions.  If it does not look as you would expect, STOP and contact Jeff for help.
# For each image:
## Drag the cropping rectangle to get the portion of the image you find most appealing. You can resize the crop box, but the aspect ratio is fixed to that of the web site slideshow.
## Verify the caption appears as you desire. If it does not, either fix it on SmugMug (see prior sections) and then reload this page to repopulate from SmugMug, or edit it on the page.  Note that editing captions on this page will NOT update SmugMug and the edits will need to be made again if this syncing process is done again in the future (this is why, in general, it is best to edit the captions on SmugMug). ''Reminder:'' Captions should be formatted as they will appear in the slideshow! That is, using proper capitalization and punctuation. Treat it like a title (This is a Good Caption; this is not because it has no caps...) The length should be short. If too long it may be truncated!
# Once you are satisfied with all images and captions , click the Continue button.  ''Note that the next page may take a long time to load - upwards of 3 minutes depending on the size of the gallery!''  Do not close your browser, hit back, stop, or reload!

== Syncing Phase 2: Verification ==

In this step you are verifying all images look right after cropping. This page shows all the images cropped as specified on the previous page, with the captions you entered. 

# Look carefully at each image to verify it looks correct.  The images as shown here are how they will appear in the slideshow!
# Look carefully at each caption to verify them.  ''All images should have a caption'' -- one does not a big red ugly warning will be shown telling you to go back and add a caption.  You really should do this!!!
# If you need to edit anything, hit back in your browser to go to the previous step and edit things.  Repeat as needed.
# ''Stop!''.  Now.... go back one more time and verify everything is as you want it!  Once you do the next step, everything here will go live on the home page and the only way to fix it is to repeat the Sync process from Phase 1!
# When you are satisfied everything looks right, hit the "Finalize" button.
# The next page will tell you everything is finalized - don't close your browser until you see the verification message!  If an error occurs in this step, please contact Jeff for help!
# ''Check the main web site home page'' to verify the slideshow looks right.  If not, you can try the Sync process again from Phase 1.  Contact Jeff for help.


= OLD STUFF = 

THIS IS HOW WE USED TO DO IT MANUALLY.  Don't do this anymore.  This is here for reference until the new method has been used in practice a few times.

== Collect the Images ==

Collect new images to display - primary source should be our [http://media.penfieldrobotics.com Smugmug gallery] Choose images that are high enough resolution to not look fuzzy or grainy when sized to "full screen" of modern computers. Good images are ones that highlight the team activities and are relatively self-explanatory. '''The image should be understandable to people not involved with the team!!''' The best ones are the ones understandable and interesting to non-FIRST savvy people while still promoting what our team is.

When downloading the images from Smugmug, be sure to grab either the very large or original size image. You will resize it to something appropriate later, but you need to start with an image larger than the target size.

== Convert the Images ==

If any of the images are '''not jpeg''' (.jpg), you must convert them to jpg. Use Photoshop, Gimp, or some other tool. Photoshop is available on the school computers as of the time of this writing.

== Organize the Images ==

Place all the photos in a '''single folder''' on your computer; do not use any sub folders! Once you have them, decide on the order you want them to display on the front page slideshow. '''The first image should be something very team oriented''' such as a team photo at a competition event or community event.

Rename the images such that they are named as follows:

*image1.jpg
*image2.jpg
*image3.jpg
*....
*image9.jpg
*image10.jpg
*... continue as needed

'''Note Carefully:''' The website computer system treats file names as '''case sensitive'''.   Please use all lower case for files, including the .jpg extension!

== Resize the Images ==

Using gimp or photoshop or other tool, resize every image to ''exactly'' '''600 wide by 460 tall'''. You may need to crop the image if the aspect ratio of the image is different than 4.6:6 (it probably will be!). Once you have the aspect ratio correct, scale it to the size above.

== Caption the Images ==

Create a text file in the folder with the images named captions.txt. '''Use plain text not Word document or anything else'''. You can use "notepad" on Windows to do this if you wish.

In the file, put '''ONE CAPTION PER LINE'''. It should look something like this: <pre>
This is the Caption for image1.jpg
And here for image2.jpg
aaaaand here for image3.jpg
... etc ...
</pre>

Captions are mandatory for every image - the number of lines will equal the number of images when you are done. Please keep them in order with the images you chose.

Captions should be formatted as they will appear -- that is, using proper capitalization and punctuation. Treat it like a title (This is a Good Caption; this is not because it has no caps...) The length should be short. If too long it may be truncated.



== Package the images and captions ==

ZIP the entire folder to a name of your choice. In Windows you can right click your folder and "Send To Compressed folder".

Send the resulting ZIP file to Jeff Downs for upload. Please keep in mind it takes a day or two for upload.



== TLDR ==

#Get images and place in a single folder together.
#Convert all to jpeg/jpg
#Resize all to exactly 600x460
#Rename so they are in order as image1.jpg, image2.jpg, ..., image9.jpg, image10.jpg, ...
#Caption for each image on its own line in order in a file caption.txt
#ZIP result
#Email zip to Jeff Downs