Front Page

to the Web site of Quakers in Devon and Cornwall.

This website has (at least) two purposes, to serve to provide (a) information/inreach for Quakers in the south west, and (b) information/outreach for enquirers and other visitors. We are committed to the impossible objective of doing both simultaneously. However, it is accepted that the Home Page (aka front page) will be mainly for enquirers.

The front page is made up ofa horizontal menu bar and two areas:

  • a body area
  • a column on the right showing recent items of interest.


The main menu and the page footer are site-wide elements, appearing on all pages.

All these elements except the page body itself are Drupal "blocks", not editable by the normal Drupal editing facility, and are normally maintained by the General Editor (GE).

The page body is based on some "scripts" which select the bulk of the content at random from a library of options. It too is therefore not editable by the Drupal editing facility, and is normally maintained by Technical Support. 



Raymond provided the following explanation of how the body works. The text needing some tidying up.


I found I was unable to add the Javascript in the way I expected because
Drupal automatically stripped it out, apparently for security reasons.
There were several options available but I don't yet know enough of Drupal's
background working to fully understand them let alone implement them.
However, I discovered a Drupal module (JS injector) which I installed and
found that it seems to perform the behind the scenes magic that I needed. I
may later further explore other ways of doing this for performance reasons
although it does not seem to be unduly slow.

Now for an explanation of how it works:
In summary, the HTML for the page in question contains "hooks" and the
Javascript dynamically creates new HTML to substitute for those hooks. The
result of this displays the required material.

More detail:
The page contains the following HTML:
<p><big><strong>Whenever this page is refreshed a randomly selected
image related to Quakers or Quakerism will appear . . .</strong></big></p>
<p id="piccy">&nbsp;</p><p><br><big><strong>You will also see a
randomly selected excerpt from our Advices and Queries . .
<p id="AandQ">&nbsp;</p><p><br><big><strong>If you really can't wait
until your favourite image comes round again, here are all the captions.
Click on the number to see the image:</strong></big></p>
<p id="captions">&nbsp;</p>
(The hooks are "picky", "AandQ" and "captions")

The Javascript can be found inside the "JS injector" entry under
"Development" within the "Configuration" tab.
The script is called "randomItems". Click on "Edit" to see the details, in
particular, the code itself and the page to which it relates. Being in the
"footer" simply means it is last thing in the body.

Most of the script is made up of array entries for the advices & queries,
images, captions and size parameters.
The guts of the script are:
var n = Math.floor((image.length-1) * Math.random()) + 1;
var imghdr = "<CENTER>";
var picture = "<img src=\"" + image[n] + "\" height=\"" + height[n] + "\"
width=\"" + width[n] + "\" />";
var descrip = "<p><big>[ " + n + " ] &nbsp; " + caption[n] + "</big></p>";
var imgftr = "</CENTER><P>"
document.getElementById("piccy").innerHTML = imghdr + picture + descrip +
var x = Math.floor((AandQ.length-1) * Math.random()) + 1;
var tabhdr = "<CENTER><TABLE style=\"table-layout:fixed; width:50%\"
bgcolor=\"#FFD0D0\" CELLPADDING=\"5\"><TR><TD width=\"50%\">";
var quote = "<big><I><a href=\"\">Advices
and Queries</a> - " + x + "</I><BR>" + AandQ[x];
var tabftr = "</big></TD></TR></TABLE></CENTER><P>";
document.getElementById("AandQ").innerHTML = tabhdr + quote + tabftr;
var list = "<center><table style=\"table-layout:fixed; width:60%\">";
for (i = 1; i < image.length; i++) {
list += "<tr><td style=\"width:10%\"> <a href=\"" + image[i] + "\"> [ "
+ i + " ] </a></td><td style=\"width:90%\">" + caption[i] + "</td></tr>";
list += "</table></center";
document.getElementById("captions").innerHTML = list;

The build... lines fill the arrays according to the information provided.
The document.getElementById lines substitute the hooks in the target page
with the HTML constructed from the array information reached by the
pseudo-random numbers n and x.

This is not the neatest code but, for now, it works!