Images can be easily uploaded and displayed on the club website.
Images are mostly shown in our photographic galleries and our trip reports, but can be attached to any page, e.g. the club nights page or the weekly activity summaries.
See also:
Thumbnails
The website respects user bandwidth and data usage and loads pages quickly by displaying small versions of the images through creating thumbnails on the server beforehand.
Image display on the website
Images of up to 32MB can be uploaded, and can be viewed at full resolution if required.
- Talk to the webteam if you need to upload larger images.
- The webteam recommends and prefers that images are uploaded at full resolution.
In general photographs are handled as follows:
- most pages include a thumbnail random image from our photo galleries to provide illustrations and show club member's the activities we have done. These images mostly float to the right hand side of the page, thumbnail sizes may vary depending on the page.
- the home page shows large, and changing, thumbnails of photocompetition photos
- the homepage also shows the clubnight talk promotion images
- thumbnail images on website pages click though to the photo gallery which they are in located in the photo gallery pages
- clicking on an image opens a larger thumbnail (approximately 1,000 pixels wide), this is set on the Site.Image Template page
- clicking on the larger thumbnail opens the original (up to 32MB) image
- see also Photo tips and Adding photos
Downloading full size images
As described above, click through from a thumbnail to the large thumbnail, and again through to the original image.
Image handling technical information
While PmWiki has good built in support for images and file uploads, the TTC website uses the superb ThumbList recipe (or add on), and the handy drag and drop multi-upload recipe to make it easy to add photos to our Photos photo galleries.
ThumbList provides additional markup for the wiki.
(:thumblist:)
to show all images uploaded to the page
(:thumb:)
to show a specific image, and
(:thumbgallery:)
to show images with captions and titles
This markup requires parameters to be specified to work, see the Thumblist documentation.
ThumbList's main features are to take a full size photo and thumnail it to the size required or specified for the page, thus making the page load faster and reducing bandwidth and data usage.
A range of parameters allow the specification of image selection criteria, display of image metadata, order of display and size of display.
See the ThumbList documentation for full usage details.
Random images
An example of how a random image is displayed on the TTC website
>>rfloat noprint<<
(:pagelist group=Photos fmt=#randomimage name={Photos.HomePage$:randomskip} list=normal count=2 px=200:)
>><<
|
-< First: FullName="Photos.2016-12-14KaitokeRegionalPark"; group="Photos"; name="-HomePage,-*Template*,-RandomImage,-Test*,-Recent*,-Group*,-PhotoCompetition,-*PhotoCompetitionRules*,-SideBar,-*Index*"; thumbname=""; thumbskip="*.gif|*.png|*_omit*"; order="random"; order2="name"; count="2"; thumbcount="1"
TTC
011 Going Up
|
Random photos, or photos selected by date or category, are provided by the #randomimage
pagelist format.
Uploading images
There is a photos template page for each new photo gallery added, and a photos template upload page (see right) to provide an uploading facility.
All photos provide a two level click though to a single larger version, and then through to the original image.
This is supported by the site image template.
Image rotation
Web browsers don't natively support image rotation. Photo orientation data is part of the EXIF tags included in the picture.
Natively, a picture is always in the landscape format by a browser for historical reasons.
To fix this for the website, rotate the picture before uploading, or rotate it and re-upload it. To rotate an image use an online tool, or download a tool such as FastStone Image Viewer