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)
- insert a table of one row with the desired number of columns using the Table dropdown menu in the editor
- Click into the table and select Formats menu > Table for mobiles
- 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
- Click into each cell and go to Tables menu > Cell > Cell properties
- In the wide box type in the correct % with the % sign e.g. 25% for a 4 column table
- Add your image above the sample text as normal. Modify text as required.
- 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 document 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 (METHOD 3)
Although not as flexible as methods 1 and 2, it is possible to use an existing table of images as a template and simply "cut and paste" this table and then make appropriate modifications to create a new set of images. See below.
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 . |
.
COPY OF SAMPLE TABLE WITH FOUR IMAGES
(Obtained by cutting and pasting above table without accessing source code)
|
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 . |
.
TEST WITH PHOTOS FROM ST BARTS GARDEN PARTY
UPDATE 8TH SEPTEMBER 2021
A very successful Vintage Garden Party was held in the Rectory on 4th September in aid of St Barts Tower Appeal. Thanks for Linda Beynon and Chris Short for these photos.
Rectory Garden Party - photos from Linda Beynon
. |
. |
. |
.
.
Rectory Garden Party - photos from Chris Short
. |
. |
