Yola Support

Tutorial: Photo Galleries, Portfolios and Presentations

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

You can use Slide, SmugMug or Flickr Search widgets from our library.
Try our no-fuss Flickr Lightbox 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 Lightbox and other widgets before going on to explore what I 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 I'll give you a peek into how you can embed code from a few other clever online tools (a Flickr gallery, a Zoho presentation, and a ViewBook slideshow).

Flickr Galleries

There are a host of widgets out there 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 I'll recap on our standard Flickr Search Widget and show-off our Flickr Lightbox. In addition, I'll pass along a few tips on creating a pretty Flickr Slideshow.

The Flickr Search Widget

This widget 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 (in the right column): Zanzibar Adventure.

In the tutorial Introducing Images, I deal with the Flickr Search widget and configuring its properties to have it display your photos. I'll briefly recap here.

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 (usually a Yahoo address). 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 Lightbox

This widget dynamically creates beautiful photo galleries for you in seconds! It automatically generates thumbnail images and the larger click-throughs. You configure the Flickr Lightbox 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, I've set it 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.

In this example I've adapted the code to include my 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).

Go here to view the page with the embedded slideshow: Zanzibar Adventure.

The DIY Approach

For those who like to get their hands dirty, this DIY option may be more to your tastes 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.

Drag the Text Widget onto your page, click inside the box as if you were about to type text. Now click on the 'Insert Image' icon in the Text Editing toolbar (the one with the green tree). This brings up the File Manager from where you can choose or Upload an image to insert into the Text widget. Select a first image and click 'ok'.

Resize your image to more thumbnail proportions by dragging any of the corner nodes. I find the image dimension indicator in Firefox very useful in ensuring that all my images are the same height (a horizontal line of thumbnail images looks good if the height is consistent in all the images). Unfortunately Internet Explorer does not have this functionality. In my example I've kept all my images 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 the 'New Page' button. Name it something logical like "photo1" and be sure that the 'Include in the menu' box is NOT checked. Your new and empty page will load up ready for you to add your photograph. In my example, I've dragged the Two Column Layout widget onto my page and placed a Text widget into the right column for the caption information and an Image widget into the left column. I've stretched the left column so that it snugly fits my 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 menu page with all the thumbnails. Select the first image and click on the "Link" icon in the Text Editing toolbar (it's next to the Insert Image icon). The Link Editor dialog launches with the default setting to link to a Page. From here select the page the 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. See Zanzibar Adventure as an example of a simple gallery created using these standard Yola tools.

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

On this page (Zanzibar Adventure) I've used Zoho Show to create a presentation that I've embedded into the page to show a slideshow gallery of pictures of the lovely city of Stonetown.

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 (btw, Zoho have a very powerful offering of MS Office style applications). I've created Blank slides and inserted images into my pages using the Insert Image icon (found with the Text editing functions). I can either use images from my 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 my example, I've used images that are both publicly available on Flickr as well as from my 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 builder.

This is a the piece of code used for my example website:

In addition, one of our kind users gave us this additional piece of code to remove all the banner advertising on the slideshow itself (thanks Sebastian!). See it included here:

Read Sebastian's suggestion here: Embed Presentations.

Viewbook

Another great 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 below in the HTML Editor into your web page. You can alter the dimensions by changing the slidez_width and slidez_height values.

Check it out! The ViewBook slideshow is in the left column: Zanzibar Adventure. Note that the ViewBook presentation may be slow in loading in the building mode, you must Preview your page to see it in action.

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

Links & Resources

Was this useful? yes | no