Website Editing: Add a slideshow to a web page

SwimOffice Admin - Webmaster

If you want to put a slide show on your home page, see first article below.

There are many ways to add photo albums and slideshows to your website. The basic process is to use some kind of photo storage site, generate embed code for an album or slideshow, then paste the code on a page in your SwimOffice site.

We will show you how to do so using Flickr and a slideshow generator called FlickrEmbed. Both are free.

  1. Navigate to https://www.flickr.com and Sign In, or click Sign Up if you don't have an account and follow the process.
  2. Upload desired photos on Camera Roll page.
  3. For all the photos you want to share on your SwimOffice site, you will need to make them public. Click the eyeball icon > Public.
    Flickr Camera Roll
  4. Click all photos you would like to share on your SwimOffice site.
  5. Click Add to album at bottom.
  6. Click Create new album.
    New album dialog
  7. Name the album, give it an optional description and click Create album.
    Add these photos to an album
  8. Click Done.
  9. Click Albums.
  10. If you want to put a slideshow on your site, skip down to Method 2: Create slideshow code. Otherwise, continue to Method 1.

Method 1: Link to album

This will generate code that places a thumbnail of your album on your SwimOffice site. When someone clicks it, it will open the album in Flickr. The downside is it takes people away from your site.

  1. Hover over the album you just made and click the Share icon.
    Flickr albums
  2. Click Embed.
    Share album to
  3. Change the size if desired.
  4. Click and copy the code in the field (Ctrl+C on Windows, Command+C on Mac).
  5. Open your SwimOffice site in a new browser tab and skip down to the Paste code in SwimOffice section.

Method 2: Create slideshow code

This will generate code that places a slideshow directly on your SwimOffice site.

  1. Click the album you just made.
  2. Select the URL in your browser's address bar and copy it (Ctrl+C on Windows, Command+C on Mac).
    Flickr album URL
  3. Navigate to https://flickrembed.com/.
  4. Scroll down to IMAGE SOURCE, click the dropdown and select Fetch Photos from Flickr Photoset / Album.
  5. Paste the URL you copied into the Enter PhotoSet / Album ID / Full URL field.
    FlickrEmbed Image Source
  6. Make any other customizations and click PREVIEW & GET CODE.
  7. Copy the code in the Step 1 field.
    Step 1 and Step 2 FlickrEmbed code
  8. Leave this tab open because you will need to come back to copy the code in the Step 2 field.
  9. Open your SwimOffice site in a new browser tab.

Paste code in SwimOffice

  1. In your SwimOffice site, navigate to the page where you want to display the album.
  2. Click Edit in the upper right.
  3. Click Source button.
  4. Put the cursor where you want the album or slideshow to appear and paste the code (Ctrl+V on Windows, Command+V on Mac).
    Content Editor Source view
  5. If you are adding a slideshow,
    1. Go back to the FlickrEmbed site.
    2. Copy the code in the Step 2 field.
    3. Switch back to your SwimOffice site.
    4. Paste the second set of code.
  6. Click Save Changes, OK.

__________
See Also
Create a photo slide show on my home page
Customize/Link Command home page Buttons
Add Photos to a Team Website Page

Website Design/Editing

  1. Website Design VIDEO Tutorials
  2. Automatically Archive or Manually Archive News
  3. Can I add HTML to my homepage text area?
  4. Can I Customize the Color of my Team Title?
  5. Website Editing: Translate site into another language
  6. Can I remove my USA and/or LSC badge from my banner?
  7. Add a custom background / wallpaper
  8. Can I move my command buttons?
  9. Change the Title/Banner/Header Text
  10. Change where Team Partners area appears
  11. Changing the USA Team Status and Level (Gold,Silver,Bronze & Level 1, 2, 3)
  12. Add Team Partners to site
  13. Website Design - Creating a Tab as a draft before releasing it to the public
  14. Adjust Event tabs on home page
  15. Website editing: Change / edit main home page text
  16. Chameleon: Change to the Chameleon Template
  17. Create a photo slideshow/slide show on home page
  18. Change the website background / wallpaper
  19. Limit the Number of Events Shown on the website home page
  20. Limit the Number of News Items Shown on the Homepage of my Sites
  21. How do I Move the Sign in column from Left to Right?
  22. Embedding a Google Spreadsheet / Excel
  23. Website Design - Allowing Non Admin to edit/administer a tab
  24. Set an event to be a Swim Meet or Team Function for the home page view
  25. Website editing: Upload logo to display on website and/or emails
  26. Chameleon: Quick Start Tutorial
  27. Website Editing: Content Editor - CKEditor
  28. Website Editing: Browse Server to manage files with CKFinder
  29. Best Practice to copy/paste text into the editor
  30. Creating Single & Double Line Spacing
  31. Embedding Videos into your Site
  32. Getting to the Finish Line - Season Teams
  33. Website Editing: Add a blog to your website
  34. How can I add scrolling text or a marquee?
  35. How can I add text to my pictures?
  36. Website Editing: Add a countdown timer
  37. Add a forum to website
  38. Website Editing: Add a music/sound/mp3 file to site
  39. Website Editing: Add a submenu/dropdown to a tab
  40. Add / create a team partner
  41. How do I add a URL to a picture?
  42. How do I add HTML to a page?
  43. Website Editing: Add or edit a tab/page or sub tab
  44. Website Editing: Add photo/image/picture to website page
  45. How do I add sound to my website?
  46. How do I change the layout of TeamUnify websites?
  47. How Do I Change the Time on our website to reflect my time zone?
  48. How do I create a online form or survey with Google Docs?
  49. How do I create a photo slide show on my home page?
  50. How do I create thumbnails of pictures?
  51. Customize / link Command home page buttons
  52. How do I edit a table?
  53. Website Editing: Edit or resize images/photos, add text to images
  54. How Do I Embed a Google Calendar?
  55. Embed a PDF in a web page
  56. How do I embed a PowerPoint presentation on one of my pages?
  57. How do I embed a Vimeo video?
  58. Embed a YouTube video
  59. Website Editing: Hit counter alternatives
  60. How do I get a link to open in a new window?
  61. Link to a page
  62. Link a photo / image
  63. Website editing: Make a tab or sub tab redirect to another page or site
  64. Website Editing: Add a slideshow to a web page
  65. How do I resize the Column or Cell Width in a Table?
  66. How do I resize the column or cell width in a table?
  67. How do I see who has used the Swim Today Widget?
  68. Set up or create anchors/bookmarks
  69. Website Editing: Set up Google Analytics on your site
  70. Set up a campaign in the Sponsor Center
  71. How do I setup/edit account details in your gateway?
  72. How do I use the new Swim Today (formerly Americas Swim Team) interface to collect leads for my team?
  73. How To Add Meta Key Words To Your Site?
  74. Website Editing: Embed a Google map
  75. HTTP Error 404 when I link to a document
  76. Linking or uploading a document
  77. Reader error
  78. Uploading/Linking files
  79. Benefits of switching to the Chameleon template
  80. Website Editing: Correct photo/image sizes/dimensions
  81. What do I do when I get the error wrong encrypted data?
  82. Where to edit "More Information" pages
  83. Website Editing: Supported file extensions when uploading
  84. Website Editing: Can't upload an HTML document in the editor
  85. Why do I keep getting a error when I upload a file/PDF?
  86. Why do sponsors show up in the Sponsor Center on my site who didn't sponsor my team?
  87. Why does my page I just edited appear blank?
  88. Why doesn't the slideshow load in Internet Explorer?
  89. Why doesn't my logo appear for logged in users?
  90. Why has all of my information dissappeared from the page and the editor?
  91. Why is editing slow or freezes?
  92. Why when I paste into the editor is my information not coming in correctly?
  93. Why won't my photos/images upload or display correctly? Color Profile
  94. Website title is pushing USA swimming badges
  95. Moving page contents to another page or tab
  96. Updating your bronze/silver/gold badge and level
  97. Canadian teams and sponsor center
  98. Column sort ascending/descending
  99. Partner Logo Size
  100. Connecting Picasa with my blog to instantly update my photos
  101. Wrapping text around a photo
  102. SwimOffice Editor - Editing your site in your Android device / Request Desktop Site
  103. Website Design - Editing your SwimOffice site on a mobile device / tablet
  104. Change settings on the spell checker
  105. Enable or disable spell check
  106. Website editing: Add/edit notes/content on Events page
  107. Website Design: Turn on/off USA Swimming Shop
  108. UK Website Editing: Display swim21 and clubmark kitemarks
  109. Website Editing: Display USA Swimming World 100 badge

Feedback and Knowledge Base