Lostwithiel Area U3A
Toggle menu

Displaying Photo Galleries on website

Several editors have expressed an interest in creating photo galleries for their webpages using tables. For the images to display in all devices (Tablet, phone and PC) the tables have to be formatted in a particular way.  This page describes two methods of achieving this. If you are comfortable with using HTML then the second method is quicker.  Otherwise, try the first method.

 

Instructions for adding tables with images (Method 1)

  1. insert a table of one row with the desired number of columns using the Table dropdown menu in the editor
  2. Click into the table and select Formats menu > Table for mobiles
  3. Insert some sample text into each of the boxes. This will increase the width of the table and make it easier to perform next steps
  4. Click into each cell and go to Tables menu > Cell > Cell properties
  5. In the wide box type in the correct % with the % sign e.g. 25% for a 4 column table
  6. Add your image above the sample text as normal. Modify text as required. 
  7. To assist ease of viewing on small screens it is advisable to add a row of dashes, or similar, after the text

An example of the layout obtained after following these instructions shown below.  Also, the way various sized images are displayed can be seen.

 

aaaaaaaaaaaa -  Here is some sample text

---------------------

bbbbbbbbbbbbbb-  Here is some sample text

---------------------

cccccccccccccc -  Here is some sample text

---------------------

ddddddddddddddd - Here is some sample text

---------------------------

 

 

Instructions for adding tables with images (Method 2)

Further down this page are three examples of single-row tables containing four images, thee images and  two images in the required format

To achieve the required result "copy and paste" the source code for table layout you would like into your webpage as follows:-

1) When in Edit mode select Tools and then select <> Source code  (See Figure 1)

2) Find the section of source code you would like from this documen and cut and paste into the appropriate place on your webpage.

 

 FIGURE 1

 

 

3) Once you have inserted the code into your webpage  Click on blue OK button to return to normal editing mode.

4)  You can then replace the sample images with your images and modify the text under each image as required.

If you have any questions feel free to contact the webmaster.

 

THIS IS HOW THE TEMPLATES APPEAR  ONCE YOU HAVE  INSERTED  THE  CODE.

SAMPLE TABLE WITH FOUR IMAGES

These pots are threaded through a metal bar planted up with strawberries

.

I cut the clematis back every year to below the rails and up it comes again

.

The iris is looking lovely this year but the snails seem to like them too!

.

Nick thinned out this Acer in the Autumn. Before it looked like a big ball, now we can see the stems

.

.


.

SAMPLE TABLE WITH THREE IMAGES

I have a fairly small garden and have been enjoying tidying it up during this lockdown.

I have planted pansies, geraniums and marigolds in my patio pots.

.

Here is the clematis in flower which I'm training along the garden wall.

.

In my wild bit of garden, bluebells just opening up with ferns in the foreground.

.


.

SAMPLE TABLE WITH TWO IMAGES

I have a fairly small garden and have been enjoying tidying it up during this lockdown.I have planted pansies, geraniums and marigolds in my patio pots.

.

Here is the clematis in flower which I'm training along the garden wall.

.

 

_________________________________

 

COPY AND PASTE TEST WITHOUT LOOKING AT SOURCE CODE

 

SAMPLE TABLE WITH FOUR IMAGES

These pots are threaded through a metal bar planted up with strawberries

.

I cut the clematis back every year to below the rails and up it comes again

.

The iris is looking lovely this year but the snails seem to like them too!

.

Nick thinned out this Acer in the Autumn. Before it looked like a big ball, now we can see the stems

.

.