This example is primarily focused on loading images from a specific folder under the Pitt Public Health's Flickr account. An alternate account can be used with a different album if you wanted to use certain images on your page directly from Flickr.

  1. Log into Flickr
  2. Click "You" > "Organize"
  3. Select "Albums & Collections"
  4. Under "Collections" on the left, expand Web Graphics and open "Web-CDN"
  5. For a visual reference, it may be helpful to look at the settings of an existing image:
    • Open the icon > Open Photo page > Scroll down to the photo's settings.
    • Review naming convention (for reference only) and Privacy setting (Note: It is set to Private, but a user can see it if they know the URL directly to the image.)
  6. Click the Upload icon in the top right.
  7. Select your (already sized and scaled) image to upload.
  8. Apply naming convention if one exists to the photo "Title".
  9. Change the "Privacy" setting to "Private".
  10. Set the album to "Web-CDN".
  11. Finish uploading.
  12. Go to the new image's "Photo page"
  13. Click the Downloads icon (lower right of the photo).
  14. Select View All Photos.
  15. In the view options, click Original. The photo will open.
  16. Right-click the image and choose "View Image". The photo will open in the browser.
  17. Copy the URL of the image.
  18. You can now leave Flickr if you are done.
  1. Log into the Stage Pitt Public Health site
  2. Go into Edit mode (Edit > Edit this page)
  3. Open the module's Advanced Editor.
  4. Choose HTML view
  5. In the HTML, you will see:
        background: url('SOMEURLHERE')
  6. Alternately, the HTML may be something like:
        <a href="SOMEURLHERE">Example Text</a>
  7. Replace the existing URL with the one that you copied from Flickr.
       Caution: Don't accidentally delete the single quotation marks around the URL in the HTML view.
  8. Close the Advanced Editor.
  9. Publish the page.
  10. If it looks ok, repeat the process on the Live site.