Site Images

This page has been written to pull together information about site images. Some of the information is in manuals, but obscure, and some is hitherto undocumented.

We deal with the more obscure first (scrolling banner, category and advert images) and end with the normal range of images found in articles.

PRELIMINARIES

Note about getting at a specific image or file on the site:

You can access any file on the site by typing its exact path and name in your browser window (including extension). You can then save the file to disk if you want. Or you can obtain FTP access to the image parts of the site and download files directly to disk.

Here is a practical example to access pic1.jpg (the first scrolling banner image) for any SEECA site:

http://www.SITENAME.org.uk/components/pictures/pic1.jpg

Now to go through the various image types. The links are shown in generic form and the file names are similarly generic.

SCROLLING BANNER IMAGES

http://www.SITENAME.org.uk/components/pictures/picNUMBER.jpg

Scrolling Banner images are stored here in a pictures folder in the site components directory. All banner images must be made to exactly 568x200 pixels or the scrolling effect will be spoilt. The scrolling images are named pic1.jpg, pic2.jpg etc up to whatever corresponds to the settings in images.xml. Note that pic1.jpg is always displayed as a still image for those without Flash enabled browsers and that the name is hardwired into the site code (so if you fancy a name change for your pictures then you must leave one picture in the pictures folder named pic1.jpg).

Note that the Scrolling Banner images on the SEECA portal site are sized at 568x270 pixels. The reason is unknown. It makes the SEECA portal unique in this respect.

SCROLLING BANNER IMAGES XML FILE

http://www.SITENAME.org.uk/components/images.xml

The banner images.xml control file is stored in the components root. At its simplest it stores the images to be displayed and their order. Scrolling rates and whether images are clickable etc can be adjusted. There appears to be no upper limit to the number of images being scrolled. Refinements can be made such as creating a banner image store linked to the repository so people can have a leisurely look at the images: such things are reflected in changed instructions in the images.xml file. There are non-critical errors in the supplied xml file which causes error messages to appear in Google Chrome. The errors have been corrected at RDCA but they can be left uncorrected elsewhere as they do not affect the functioning of the file: for the purists a look at the RDCA xml file should reveal what needs to be done.

CATEGORY IMAGES

http://www.SITENAME.org.uk/images/categories/originals/NAME.jpg

Category images are stored here. They are not scaled by the software and, like scrolling banner images, must be prepared offsite in an image package. The advice on the SEECA sites, in the category image dialogue, is that you should submit an image of 568x100 pixels. This should read 538 for the width and anything from 100 to 118 for the height (RDCA is now tending to use a height of 110 having experimented with everything from 100 to 120).

Note that the recommended category image size for the SEECA portal site is 568x100 - but putting 568x110 category images there might give less of a letterbox effect.

Footnote: for some reason all the SEECA sites (except the portal site) have been given an extra 30 pixels of white space in the category image placeholder and note also that the style sheet left justifies the images in the placeholder. Both these factors mean that the image scaling is a bit critical to avoid malcentred images or those that overrun the right hand side of the placeholder and have their right hand side truncated.

ADVERT IMAGES

http://www.SITENAME.org.uk/images/adverts/originals/NAME.jpg

Advert images are all stored here. Images are used differently depending on whether they appear in a central panel advert or a right panel advert.

Central panel: All images are displayed at their exact size. It is imperative that any image over about 135 pixels wide is resized to 131 wide: very large images will just bleed out under the right hand panel or extend right down the main page. For conformity the images should be scaled to 131 to match what happens in the right panel and to make the central panel images identical in width.

Right panel: Whatever the size of image it will be displayed by your browser as 131 pixels wide: small images will be enlarged and bigger images will be shrunk. However, this is not to suggest that an image of several megabytes can be loaded up as an advert. If this is done the load time of the main page will suffer and will cause aggravation to people with a slow broadband. What actually happens is that the magabyte image is downloaded to the browser and then the browser resizes and displays it at the smaller size. Its clearly best that the image starts out at 131 so it is neither too small or too large when it arrives at the "customer's" browser.

Obtaining advert images: you can prepare images for adverts by using a photo package and scaling images to 131 pixels wide, GIMP2.8 is an excellent comprehensive free package. Or, and this only applies to the right panel, you can find an image in the uploaded/scaled part of the site (see below) that is already scaled to 275 pixels wide (these are the images with the _s suffix, see also below for details). These images are sufficiently lightweight not to cause loading problems even though they are about 4 times heavier than necessary.

Site changes note: When the sites were first received both advert panels operated the same - that is, advert images were displayed in each panel without any browser resizing so it was imperative to get the size "right" for both advert panels at around 132 pixels give or take a few. This restriction was lifted by Community Sites for the right panel on all the SEECA web sites possibly around the time of the 134/131 change. All sites except Laindon now automatically resize advert images to 131. Laindon images for some reason are resized to 133.

OTHER IMAGES - ORIGINALS

http://www.SITENAME.org.uk/images/uploaded/originals/myimage.jpg

Here are the originals of all images uploaded when creating an article. They are named exactly as suggested by you during upload to the site. However, note that if you reload any images they will be given a numerical suffix that will increment by one after each reload. This is a solution to the distinct possibility of different images with the same name being loaded to the site. So you can have myimage.jpg, myimage1.jpg, myimage2.jpg etc on the site, even though you are merely loading myimage.jpg each time.

OTHER IMAGES - SCALED

http://www.SITENAME.org.uk/images/uploaded/scaled/TOKEN

After the original is uploaded the site automatically makes four compressed images and puts them into the above scaled folder. 

Note: If the original image is less than 542 pixels wide then the results will be complicated. Generally the site will try to do its best but will not scale anything up. So standard thumbnails, for example, made from an 80x50 image will be 50x50 and will not fill up the placemarker. Best to keep the smaller dimension of originals above 542 pixels unless you are looking for some special effects.

Image 1, TOKEN = myimage.jpg

This has the exact same name as the current original image in the originals folder, be that myimage or myimage1 etc. It is 542 pixels wide or 542 pixels high, or 542 pixels square depending on the original's format. The image is scaled, not cropped or distorted. Such images are used at the bottom of the page.

Image 2, TOKEN = myimage_s.jpg

This is 275 pixels wide, high or square depending on the original's shape. The image is scaled, not cropped or distorted. These images are used for normal displays down the right hand side of the page.

How to find the _s file: Method1 is to go to an article page, then right click on a suitable image which should be one 275 pixels wide (usually found down the right hand side of the screen). Then save the image onto your computer somewhere convenient like the desktop. Method2 is to identify the desired file in the same way and this time to fill in the missing SITENAME and TOKEN information in your browser window, not forgetting the _s.

http://www.SITENAME.org.uk/images/uploaded/scaled/TOKEN

The image will appear in your browser window and you can then save it to disk. Perhaps a bit more laborious then Method1.

Method3 is to get FTP access to the site and look at the scaled folder directly. Perhaps this is even more laborious than Method2 unless a lot of file manipulation is contemplated.

Image 3, TOKEN = myimage_t.jpg

This is 131x131 pixels. The original is either scaled or cropped depending on a switch in Settings. Cropping is the default setting. These images are used for photo gallery displays at the bottom of articles.

Image 4, TOKEN = myimage_ts.jpg

100x100 pixels. This is the thumbnail image appearing as an icon. It corresponds to the first image on an article page. Note that the first image on the page can be hidden if required which is useful, for example, if the thumbnail source image is a manually cropped version of one of the page images etc.

ALTERNATIVE IMAGE POSITIONING

Alternative image positioning can be achieved by the use of image tags, with or without horizontal ruler to control text, or by the use of HTML code using the $rawcontent command and $rawcontent box.

FTP UPLOADING AND WARNING

You can obtain FTP permission from Community Sites to upload to the banner images Pictures folder and change the control file images.xml if necessary. You can also get additional permission to have FTP access to the images folders but Community Sites warn against uploading anything there that would normally be dealt with by the site software because it will interfere with change controls. Obviously there is nothing wrong with using FTP to look at the site image folders and to download anything there of interest, just don't upload.