Creating a gallery of Images

Creating a gallery of Images

Summary

Create a grid of thumbnail images that open up with a dramatic effect.

Creating an image gallery with Reason8.

An image gallery is a great way of showing off your products and services.  It's a lot easier than you might think to create a great looking gallery .  This short guide is aimed at showing you how to do this.

1.  Prepare your Images

It goes without saying that the secret to a great image gallery is a great set of images.  If your images are high quality your gallery will look fantastic.  If they are of poorly quality or poorly composed you galleries will be poor.

Image source

If you can supply your own great images, that is tremendous, alternatively we recommend www.bigstock.com - amazing images from just a couple of pounds each.

Image size

You must upload each image you want to display one by one. 

If your images are massive our system might complain. (in which case visit http://www.shrinkpictures.com/  we recommend a size about 760 pixels)

2. uploading your images

Once you have uploaded your  image you need to add them into your website library.   

This is simple:

1.  Click on the upload images button on the left of your control panel

build a website

2. Choose upload larger images

build a website

3.  Upload the images by clicking the Browse button:

build a website

3. Create a nice tabular layout for your thumbnails

Once you have uploaded your images you now need to create a neat table that will hold the thumbnails.

If you are editing a partly built gallery provided by Reason8,  you may already have a table that you can extend. 

To Modify a table:

Right click your mouse inside the table (making sure not to click on the images by accident).  You will see a little menu appear

build a website

Choose Row and then Insert Row After and this will insert a new row of cells into which you can add image thumbnails.

*** Note :  This is also a great way to extend any table you create using the method below ***

Create a table from scratch

Of you don't already have a table created then you can create one.

1. Place your cursor where you wish to add a table

2. click the "Insert Table” button.

build a website

3. Select the number of rows and columns you need,

4. Select the width of your table. To fill the width of your website page neatly, select "percent" rather than "pixels" and enter a value of between 95% to 100%. Again this can be changed if need be.

Add thumbnail images into your table

Click inside the cell that you wish your first image to appear in and click the insert image button.

build a website

If you have already uploaded the image as we described above then simply click on

build a website  then build a website

Alternatively

Upload the thumbnail image directly by clicking the browse button and adding it from your computer.

build a website

Resize the image to thumbnail size

When the image appears in the preview area of the image properties window you then need to size it to appear small like a thumbnail:

build a website

 

 

Click the RESET button and it will show you the dimensions of your picture.

Choose a value that will be your thumbnail size (a value from 100 - 200).  All you thumbnails will be this size.

Enter this number into the box that has the biggest number and the other number will change automatically.

Enter the thumbnail size a value from (100-200) into the box that has the largest number

Click  [ADD TO WEBSITE ]

**  Note: If you have created a table from scratch and this is the first image you have added, don't worry if the table suddenly seems to collapse after you enter your first image, this is perfectly normal **

Position the image in the centre of the table cell

To make sure that the image appears in the centre of the cells right click right click the image and choose the " Adding and Changing Images"

build a website

Then align the image in the centre as shown below:

build a website

Then click the image and the centre align icon on the editor bar:

build a website

Once you have a set of thumbnails neatly positioned in the table you can now link each image to bigger images and make them open with a stunning effect.

Linking to bigger images

1.    Select the image that should be sitting in your table by clicking it once

Click the yellow icon on the top row of the editor icons

build a website

2.    Select File

build a website

3.    Select Images

build a website

4.    Select the larger version of images from the library that you see (remember that the images are usually shown in the order that they were uploaded)

5.    Choose 'YES'  to open the image automatically

6.    Finally click save to website:

build a website

Save the page and then test your new gallery
 

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');