2 replies to this topic

[mikef]

Snippet name: EtoGalThumb
Author: mikef
Version: 1.1 (Beta)

&#91

Prerequisites:[/u]]

• Minimum Etomite version: 0.6.1
  
• Etogal: A copy of Etogal version 1.0 or later is also required, as this snippet uses the etogal database and image store, and has no management capabilities of its own.

This snippet was created to make it easier to produce customised displays for the EtoGal gallery snippet. It offers greater flexibility in selection of which images to display, in how to order them, and makes it simpler to provide fully customised interfaces without requiring a large number of parameters to be passed in the snippet call. It also allows images to be displayed on a page other than the gallery page.

&#91

Features:[/u]]

• display EtoGal images or galleries on different page from the gallery id
  
• select specific images to display by id
  
• select specific galleries to display by gallery page id
  
• limit the number of images to display
  
• flexible image sorting (including random)
  
• (relatively) easy generation of your own display styles (needs HTML knowledge rather than PHP)
  
  
• (beta 2)add section breaks based on number of images or gallery an image belongs to

as examples, I've used this snippet to display

• a single random image (out of three relevant images) in a news article
  
• three random images to act as a separator half way down a page
  
• thumbnails of all the images in a gallery, with their descriptions, with a link to the gallery page
  
• a random choice of four images from a gallery with the gallery's long title and description, all linking to a custom gallery page

I'm sure you'll find other uses!

There is a demo for an earlier version of this snippet at http://www.lowermosswood.org.uk/72.html which shows the displays created by the in-built styles, and how some parameter changes affect the image selection.
Another example of its use can be found at Efikim Galleries, where a separate call of the snippet is made for each of the galleries. (These use a style similar to the second example near the bottom of this post, though the URL generation for the image links is a little more complex.)

&#91

Installation instructions:[/u]]

• Download the latest Etogalthumb.php file from the Etogal download area and add it to your installation as a snippet (copy the contents into new snippet).
  
• That's it!

&#91

Options you can pass to the EtoGalThumb Snippet:[/u]]

• only,not - page id where thumbnails should/should not be shown (default is show on any page - these are useful for pages that are shown elsewhere in condensed form (eg news items))
  
• link - page id parameter to be used in links (%%link%% parameter)
  
• gal - gallery from which images are to be shown (optional, can be a comma separated list)
  
• img - id of image to be shown (optional, can be a comma separated list)
  - note at least one of gal or img must be used; if gal is used, img is ignored
  change in beta 2 - if neither is specified, then all images are selected
  
• exclude - id list of images to exclude when selecting by gallery
  
• addback - increase total images count by this value
  
• count - number of images to use (defaults to 1, if you want all, specify 9999)
  
• order_by - maye be set to 'id','gal_id','title','filename','descr','date' and orders by that entry in the EtoGal table
  - if no order is specified, then the order in which results are returned is random (the list returned from the database is deliberately shuffled)
  - 'random' is NOT a valid value
  - ordering using two valid fields separated by a comma should work, but is untested
  
• order_direction - "ASC" (default) or "DESC"
  
• style - style to be used (required; behaviour if not provided is undefined)
  - valid values depend on the styles defined in the snippet, and may be either numeric or text
  
• fullsize - set this to 1 to use fullsize images instead of thumbnails (other values undefined)
  - default is not set (means use thumbnails)
  New in beta 2:
  
• resize - desired pixel count on longest side - adjusts the width and height returned in the %%size%% string to give the desired size
  
• breakat - insert a section break after each 'breakat' images
  
• gallerybreak - inserts a section break whenever the gallery that the next image belongs to changes
  

This snippet uses a number of replaceable parameters that are inserted into predefined blocks of HTML code. This has the advantage that the HTML code is is in readable clocks, rather than built up piecemeal throughout the snippet PHP code. As a result, it is both easier to change the presentation aspects and easier to maintain the code.
HTML presentation blocks are created at the head of the code in 'style' blocks, with each style having three blocks - header, image and tail.
The header and tail style blocks use only a limited number of parameters, related to the page id passed as the link parameter. As implied by the names, the header block is output before the block of images, and the tail block is output after the images.
The image style block has access to all the parameters used in the head and tail styles, plus additional parameters related to the current image and the gallery it is in. It is output once for each image selected.
All of these style blocks are optional.

&#91

Replaceable strings for use in styles:[/u]]
strings available for the 'head' and 'tail' style strings

• %%alias%% - the alias for the page passed as the link page
  
• %%link%% - the link page id
  
• %%ptitle%% - the longtitle for the link page
  
• %%pdesc%% - the description for the link page
  
• %%total%% - the total number of images selected
  
  
• %%baseurl%% - (beta 2) the url of the page specified in the link parameter (FURL if enabled)
  
• %%sep%% - (beta 2)the separator string for the first parameter to add to a page URL (varies depending on the baseurl format)

strings available for the 'image' style string
as above plus

• %%id%% - the image id
  
• %%size%% - the pixel dimensions for the image file (width and height) as a quoted string as required in an <img> element
  
• %%file%% - filename for the image (full path)
  
• %%title%% - title for the image (from the etogal database table)
  
• %%desc%% - description for the image (from the etogal database table)
  
• %%sdesc%% - truncated description (or title if no description present)
  
• %%gal%% - the gallery in which the image exists
  
• %%gtitle%% - the longtitle for the gallery page
  
• %%gdesc%% - the description for the gallery page
  
• %%galias%% - the alias for the gallery page
  
  
• %%gurl%% - (beta 2) the URL for the gallery page

These parameters contain everything I thought useful for building the thumbnail display and generating links (and a few later requests for things I hadn't thought of!)
To use, design the HTML you need for your display, and then put the above %%xxxx%% string in the HTML code where you want the associated data to appear, as in the examples below. Then put the resulting HTML into the styles at the head of the snippet.

&#91

Example styles[/u]]
First, a very simple display that just displays the selected image(s) with no links. In this example the header and tail blocks aren't used.

$styleStrings[0]['header']=0;
$styleStrings[0]['tail']=0;
$styleStrings[0]['image']=<<<IMG
<img src='%%file%%' title='%%title%%' alt='%%sdesc%%' class='EGTimage' %%size%%/>
IMG;

and a much more complex style that displays a selection of images from a gallery, and links to it (this assumes use of the link parameter to define the target web page)

$styleStrings[2]['header']="
<fieldset style='background-color: white'>
  <h2 style='top:-18px; left:12px; width:16em; '>
	<a href='[~%%link%%~]' style='color:white; background:silver;' > %%ptitle%% </a>
  </h2>
  %%pdesc%%<br />
  <div style='height:140px;'>
";

$styleStrings[2]['image']=<<<IMG
  <span style='float: left; margin: 10px;'>
	<a href='[~%%link%%~]'>
	  <img src='%%file%%' title='%%title%%' alt='%%sdesc%%' %%size%%/>
	</a><br />
	%%title%%
  </span>
IMG;

$styleStrings[2]['tail']="
  </div>
  <div style='clear: both;'>
	<div style='float: right;'>
	   <a href='[~%%link%%~]'>... visit the %%ptitle%% gallery (%%total%% images)</a>
	</div>
  </div>
</fieldset>
";

&#91

Known bugs[/u]]
In beta 2, the %%sep%% replacement string is only setup correctly if the link parameter is set in the snippet call. This will be fixed in the final release. As a temporary fix, specify the link parameter in the call as the current page.

Edited by mikef, 27 August 2006 - 02:17 PM.

[mikef]

Updated for the new features in EtoGalThumb 1.1 beta 2

[mikef]

Note version 1.2 with additional functionality has now been released.