Photo Galleries, Portfolios and Presentations

There are three primary ways in which you can include photographs on your Yola website.

You can use the Flickr Search, Slide or SmugMug widgets from our library.
Try our no-fuss Flickr Gallery widget to quickly add a dynamic photo gallery.
Build your own gallery using our basic Image, Text and HTML editing tools.

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 vareity 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 Introducing 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 the "Multimedia" folder) 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 (located in the "Multimedia" folder) 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 keywords and then refine how the results display on your page - Results per page, number of Columns and Image Size. In this example, it's set to display 10 "Small Square" images in 5 columns. Once you're done, click "Apply" and voila!

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. Drag the HTML Widget onto your page and paste the code generated by the Flickr Slidr into the HTML Editor. Click on "Save".

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).

The DIY Approach

For those who like to get their hands dirty, this DIY option may be more to your liking than using the widgets available in our Library. In this way you can individually select the images you wish to show and display them as thumbnails. These can then be made clickable to larger images with supporting information. You do not need an account with a third-party site like Flickr, Slide or SmugMug for this approach.

Drag the Text Widget onto your page, click inside the box as if you were about to type text. Now click on the "Picture" button (the one with the green tree) on the Text Editing Toolbar. This brings up the dialog box from where you can choose or upload an image to insert into the Text Widget. Select an image and click "Select".

Resize your image to thumbnail proportions by dragging any of the corner nodes. The image dimension indicator in Firefox is very useful in ensuring that all of the images are the same height (a horizontal line of thumbnail images looks best if the height is consistent in all the images). Unfortunately Internet Explorer does not have this functionality. In this example, the images have been kept to a height of 96 and a width of 150 pixels.

Place your cursor back into the Text Box and hit the space-bar once to allow for a single character space. Then add another image by repeating the previous steps. You should be able to fit 4 - 6 thumbnail images into a single line. Save your page!

Now you need to create new pages which will contain larger versions of your images plus whatever information or caption you'd like to accompany them. To do this, click on Page | Add New Page. Name it something logical like "photo1" and be sure that the "Show in navigation" box is NOT checked. Your new and empty page will load up ready for you to add your photograph. In this example, the Column Divider Widget was dragged onto the page and a Text Widget was placed into the right column for the caption information and there is a Picture Widget in the left column. The left column is stretched so that it snugly fits the 640 pixel wide photo. Insert or Upload your image, type in your caption information and Save.

Now all that's left is to make the thumbnail images link to the large photographs. Return to the page with all the thumbnails. Select the first image and click on the "Link" button on the Text Editing Toolbar (it's next to the Picture button). The Link Editor dialog launches with the default setting to link to a Page. From here, select the page that correlates to your image (eg. "photo1") and press "Ok". Link each of your thumbnail images in the same way and Save your Page!

You can test your page by clicking on the "Preview Page" button and then check that all your links work as they should.

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, click on Publish then on "Embed in Website/Blog". A window pops up that makes the necessary HTML snippet available for you to copy and paste into the HTML Editor of the Yola Sitebuilder.

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

Viewbook

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 inside your Yola website click on Share > Embedding and copy/paste the script in the HTML Editor into your web page. You can alter the dimensions by changing the slidez_width and slidez_height values.

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