Photo Galleries, Portfolios and Presentations

There are a few ways in which you can include photographs on your Yola website:

  1. Use the Picture Gallery Widget.
  2. You can use the Flickr Search Widget.
  3. Incorporate a Flickr Gallery Widget

The Picture Gallery Widget

The Picture Gallery Widget makes it easy to add a gallery to your website quickly and easily!  You do not need to add single photos into Picture Widgets, then resize it, or use a third-party gallery from another source.

Here are the steps to follow to create your Picture Gallery:

1. Go to Widgets > Popular.

2. Drag and drop the Picture Gallery Widget onto your page.

User-added image

3. You can either upload new images from your computer or browse uploaded images.
  • To upload new images from your computer: Click on "Upload New Images". Then browse through the folders on your computer to choose your picture that you want to add. Select the picture and click "Open" to upload it to your gallery.
  • To add pictures that you have already uploaded to your website: Click on "Browse Uploaded Images". Click on the picture inside the File Manager, then click "OK" to add it to your gallery.
  • Hint: To add multiple pictures to the picture gallery, hold down the "ctrl" key on your keyboard for Windows users (or "cmd" key for Mac users) while selecting the pictures. All the pictures you select will be uploaded to the gallery.
User-added image

4. To edit the layout, margins and hover text, click on "Edit" in the top left-hand corner of the widget.

User-added image

In addition, there are a host of other widgets and clever tricks that you can use to embed images into your website.

Let's examine the Flickr Gallery and other widgets before going on to explore what we call the DIY approach - using our standard editing tools to create a "menu" page of thumbnails which then link to new pages with larger photos with caption information.

Then we'll look at how you can embed code from a few other useful online tools (a Flickr gallery, a Zoho presentation, and a ViewBook slideshow).


Flickr Galleries

There are a variety of widgets designed specifically for use with Flickr - just have a look at the multiple options that Google Gadgets has listed: Google search listing.

For this tutorial, we'll expand on the things we learned in the Exploring Images tutorial about our standard Flickr Search Widget and our Flickr Lightbox. In addition, we'll pass along a few tips on creating a slick Flickr Slideshow.

The Flickr Search Widget

This widget (located in Widgets > Media) pulls squared thumbnail images from your Flickr account or from the Flickr pool. Clicking on any of these images takes you out of your website to the relevant page within Flickr. See how it displays here (horizontally across the top): Zanzibar Adventure.

To allow the Flickr Search Widget to access images from your own Flickr account, type in the email address that is affiliated with your Flickr account. Although this widget does not allow you to select specific images from your account to display on your Yola website, you can narrow down which ones will be chosen by using the "Search Phrase" box.

Remember that your images on Flickr will need to be publicly available to work on Yola.


Flickr Gallery

This widget (Widgets > Media) dynamically creates beautiful photo galleries for you in seconds! It automatically generates thumbnail images and the larger click-throughs. You configure the Flickr Gallery Properties in much the same way as the simple Flickr Search. Type in your email address and Search Phrase and then refine how the results display on your page:

  • Results per page
  • Number of Columns
  • Image Size.

In this example, it's set to display 10 "Small Square" images in five columns. Once you're done, click "Save" and republish your site to see the changes.


Flickr Slideshow

A good way in which you can embed a slideshow of a specific Set of Flickr photographs in your Yola website is to create and upload the images you wish to display to your Flickr account.

Go to www.flickrslidr.com. Type in your Flickr ID, plus Tags and hit the "Create slideshow" button. The FlickrSlidr generates a piece of code for you to embed into your website.

  1. Drag the HTML Code Widget (located in Widgets > Popular) onto your page.
  2. Paste the code generated by the Flickr Slidr into the HTML Editor.
  3. Click "Save".
  4. Republish your site to see the changes. 

In this example the code was adapted to include a Flickr User ID and Set ID (the numerical URL value that Flickr generates for a particular Set of photos). The User ID is your personal Flickr ID (your name or a numerical value depending on how you've set up your account), and the Set ID (a long number).


Inserting a Presentation

There are a variety of online applications that cater to the creation of sophisticated slideshows, portfolios and presentations. ViewBook and Zoho Show are two of the many options available.

Zoho Show

You can use Zoho Show to create and embed a presentation into your page to show a slideshow gallery of pictures.

You'll have to sign up to Zoho to use their services (it's free for personal use). Log in and click on Zoho Show, their Online Presentation tool (please note, Zoho has a very powerful offering of MS Office style applications). In this example, we've created blank slides and inserted images into pages using the "Picture' button (found on the Text Editing Toolbar). You can either use images from your Zoho library, Picasa or Flickr.

You can search and use Public Images from both Picasa and Flickr, or you can configure your account to grab images from your Picasa and Flickr accounts. In this example, images were chosen that are both publicly available on Flickr as well as from a personal account.

To embed your new Zoho presentation in your website:

  1. Click on "Publish" then on "Embed in Website/Blog".
  2. An HTML snippet will be displayed.
  3. Copy the code provided.
  4. Back on your site, drag and drop the HTML Code Widget onto your page.
  5. Then paste paste the code into the HTML Editor and click "Save".
  6. Republish your site to see the changes.

Sebastian, a Yola power user, shares his suggestion for embedding presentations here: Embed Presentations.


Another effective tool to build presentations, slideshows or portfolios is ViewBook. Simply create an account, a new Presentation and start uploading your images!

To display your ViewBook presentation:

  1. In Viewbook, click on Share > Embedding.
  2. Copy the HTML code provided.
  3. Then, on your site, drag and drop the HTML Code Widget onto your page.
  4. Paste the code into the HTML Editor. You can alter the dimensions by changing the slidez_width and slidez_height values.
  5. Click "Save".
  6. Republish your site to see the changes.
User-added image

To view the website featured in this tutorial, please go to: Zanzibar Adventure.


Related Tutorials

Links & Resources