Skip to content
Home » Blog of Donncha Hughes – Startup Web Training » How to add photo or image slideshow to your GIBO website?

How to add photo or image slideshow to your GIBO website?

The following two tabs change content below.

Donncha Hughes

Sole Trader/ Proprietor
Donncha Hughes is a mentor, trainer and business advisor. I deliver group and one to one training on Wordpress. My background is assisting business with development of marketing, business plans, grant and finance applications. See www.startuphughes.com for more...

Picasa Web Albums LogoThis blogpost will outline how to add (embed) a slideshow of images or photos stored in your Picasa Web album to your website. The post will detail how I added a slideshow to this post in WordPress and also the steps followed to add the same slideshow to a sample website that I created as part of the Getting Irish Business Online (GIBO) initiative using the Blacknight Solutions Content Management System which is known as the Blacknight Sitebuilder. BTW, similar principles and general instructions apply when embedding other media such as YouTube, interactive Google Maps and Slideshare presentations.

Adding Images or Photos to your Website

Most websites offer an easy method to upload and display photos on your website. If you have create your website as part of the Google and Blacknight supported Getting Irish Business Online initiative, you can add a Gallery with up to 12 images. This is a cool feature in that each photo or image is enlarged when it is clicked. The Blacknight Sitebuilder tool also provides a media uploader. When images (less than 1MB) are uploaded here they can then be displayed on any page on your website. As such there is no limit to the number of pictures you can display on the pages of your website. We address this as part of our GIBO workshop – see slide 44 of this slideshare presentation on the GIBO workshop page.  This blogpost outlines a more advanced feature – how to add (embed) a photo or image slideshow to your GIBO website?

Quick overview of Steps

A. Upload pictures to your Google Picasa WebAlbum.

B. Follow Picasa WebAlbum instructions to copy Html Embed Code

C. Using the Html Editor on your site, copy this code onto your site, in the page that you want to display the slide show.

I made one small amendment to the provided HTML code. I changed the width to “100%” in the very first line so that the slideshow goes across the full page.

End Result

This very slideshow has been added to the homepage of my sample website created to showcase the GIBO initiative (www.startuphughes.biz).

Lets get started

#1. Download Picasa and set up Picasa Web Album

Picasa is software that you download to your laptop that allows you to view, edit and organise all your photos and images. It is free. It is also integrated with a digital photo sharing website. You can upload your photos to separate Web albums to share by email with your friends. As we will show, you can also use it to embed photos as a slideshow in your website. Google Picasa Web Album one of Google’s foremost Apps. It is accessed from your Google account and linked to your Google+ profile.  It is free to set up and use.

For the purposes of embedding a slideshow, I recommend that a new web album be created. Then when you can add photos or images to this album and the slideshow is automatically updated on your website. Equally if you want to create a few slideshows containing separate images, simply organise your photos into individual web albums.

#2. Get the Code to Embed the Web Album

Within Picasa Web Album click on the folder that you want to add to your website. In my case it is called ‘Profile Photos’. On the right hand side you will see a small icon and blue text that reads ‘Link to this album‘.

google picasa Link to this Album

When you click on this text, another blue text icon <embed slideshow> appears. When you click on this, a pop up box appears as per image below. You are looking for HTML code that you can copy into your website … it is presented in a box with yellow background.

google picasa pop up box

The dropdown menu allows selection of album size being small, medium, large or extra large. The html code is updated accordingly.

#3. Copy into Html Editor of your website

In this wordpress blog, there is a option on the menu for this page to select Visual or Text. To copy the html code, Text has to be selected. You can then paste the html code provided by Google into the space on the page where the slideshow is to be displayed.

Wordpress Html Editor

Every Content Management System (CMS) has a similar Html Editor feature (may be referred to as html script edito). In the Getting Irish Business Online (GIBO) Blacknight Sitebuilder tool the html editor is accessed from the HTML icon as per image below.

Blacknight Html editor

 

As always, I hope that you found this blogpost useful. Comments – particularly from anyone who follows these instructions – are very welcome.

regards

donncha

@donnchadhh