Album/Gallery Listings

PHP templates

Listings pages

This comes into play in album listings where there is an expand button for each of the albums which reveals the album's gallery.

Album details and edit pages

PHP include that inserts the gallery container element into the page. It allows for either default listing content, or custom gallery listings content:

<? include (COMMON_TEMPLATE_DIR."forms/images/gallery_listings_container.php"); ?>

The content is then loaded into the page on the page onload handler:

$(document).ready(function(){
	LITTLED.Gallery.retrieveGallery({pid: <?=$input->id->value?>});
});

• LITTLED.Gallery.retrieveGallery() in turn calls LITTLED.Gallery.bindGalleryHandlers() which in turn calls LITTLED.Gallery.configureSorting().
• LITTLED.Gallery.retrieveGallery() uses the AJAX handler script specified with Sections CMS > Content Type > Listings URI.
  • The default listings handler for galleries is /_ajax/images/gallery_listings.php.

JavaScript/JQuery handlers

Listings selectors

The default container for galleries is #gallery-listings.

• If the parent element is a <table> the sortable elements are specified with tr.page-row.
• If the parent element is a <div> the sortable elements are marked with .page-cell.

Album listings

$([LISTINGS_SELECTOR]).galleries('bindAlbumListingsHandlers');

bindAlbumListingsHandlers binds

• Content refresh events
• Persistent highlighting of line items within listings after being clicked
• Page navigation
• Toggling galleries
• Image details lightbox dialogs
• Image preview tooltips
• Inline editing of images
• Cache update buttons
• Inline deletion of albums
• Cache update buttons
• Inline edits of things like titles, status, dates, etc.

Gallery listings

$([GALLERY_SELECTOR]).galleries('bindGalleryHandlers');

bindGalleryHandlers binds

• Image details lightbox
• Image preview rollovers
• Line-item edit operation buttons (details,edit,delete)
• Page navigation within the gallery
• Gallery filters interactivity
• Inline data edits
• Inline keyword edits
• Record sorting
• Calendar popups

Refreshing listings content

Listings content refreshes for either Album listings or Gallery listings is achieved with

$([LISTINGS_SELECTOR]).trigger('contentRefresh');

Image rollovers

JavaScript

• Requires “poshytip” JavaScript library in addition to the JQuery libraries.
• JQuery handlers
• Handler assigned via $('#listings-container').galleries('bindAlbumListingsButtons') or $('#listings-container').galleries('bindGalleryButtons')
  

  $('.album-tn').poshytip(imagePreviewSettings);

Markup

PHP include file

<? include (COMMON_TEMPLATE_DIR."content/albums/rollover_thumbnail.php"); ?>

Thumbnail <img> element

• class="album-tn" for album listings or class="gal-ro" for gallery listings
  The album-tn and gal-ro classes are the hook for the jQuery/poshytip handlers.
• This <img> element must have a title attribute with some non-empty string value. If not, a JavaScript error is thrown within the PosyTip library.
• When no thumbnail is available for the record:
  

  <div class="error" style="text-align:center;">no thumbnail</div>

Preview <img> element

• Follow the thumbnail <img class="album-tn"> element with an <img> element containing the medium or full-sized image wrapped in <span> tags, depending on which size should appear on rollover.
  • <span> tag attributes:
  • <span class="tooltip-content">
    The tooltip-content class will hide the full-sized image until a rollover event is captured by the thumbnail.

Image lightbox

Markup

• Surround thumbnail <img> element in <a> tags with the following attributes:
  • href="javascript:void(0)" rel="nofollow"
  • class="img-details-link"
    This is the selector used to assign the onclick handler.
  • data-id="[IMAGE_LINK_ID]"
  • data-tid="[GALLERY_SECTION_ID]"
  • data-op="view" or data-op="details"
    This allows the jQuery handler to retrieve the correct AJAX script to call to retrieve the details dialog content.
• Note that it doesn't seem to work having this link around the preview image. I.e. it's not immediately apparent that it's possible to click on the tooltip preview of the image to open up a full-sized version of the image in a lightbox.

JavaScript

• $('img-details-link') onclick handler opens a dialog containing the full-resolution version of the image.
• onclick handler defined in $.galleries('bindAlbumListingsHandlers')
• The onclick handler invokes $.formDialog('open', {dialogClass, 'gallery-dialog'})

CMS

• Details URI: /_ajax/images/image_details.php
  This returns markup containing the full-resolution version of the image to be displayed in the lightbox dialog.

Inserting an "add image" button

Markup

<button class="add-img-btn" data-id="<?=$img->id->value?>" data-pid="<?=$input->id->value?>" data-tid="<?=$img->type_id->value ?>" title="add image">add image</button>

JavaScript

$('.add-img-btn', $p)
.iconButton('addchild')
.on('click', methods.editImage); /* "methods" in the context of $.galleries() */

The $('.add-img-btn') handler is rolled into $.galleries('bindGalleryHandlers').

AJAX handler script

The handler script is determined by section_properties.upload_uri. If no value is found in that column, the code falls back on section_properties.edit_uri.

That page will expect a combination of values to be passed in via the id, pid, and tid arguments. Only tid (type id) is strictly required. pid (parent id) can be null in cases when creating a new parent record and uploading images simultaneously. id (image link record id) can be null in cases when uploading a new image.

Pagination

PHP

Album listings:

include (COMMON_TEMPLATE_DIR."framework/navigation/listings_page_links.php");

JavaScript

Handlers rolled into Album listings:

$('#listings-container').galleries('bindListingsHandlers');

.alb-nav click > $.galleries('gotoAlbumPage')

Refreshing content

The default container for gallery listings has id="pages-[PARENT_ID]".

This is the selector used to locate the gallery listings in the DOM after an AJAX content edit has been performed.

The AJAX handler script will pass back the DOM selector of the gallery listings in the container_id field of the JSON data. The default image upload and edit scripts will pass back pages-[PARENT_ID] as the selector if it's determined that the control that invoked the AJAX handler script resided within gallery listings.

<div id="pages-34">
    <div><!--// GALLERY LISTINGS CONTENT GOES HERE //--></div>
</div>

The actual content used to refresh the content container is determined in the PHP routine cache_class::refresh_content_after_image_edit(). The content type id determines which content template is selected. By default the include file [COMMON_TEMPLATE_DIR]content/albums/gallery_listings.php is used. Other cases can be added to select other templates.

/* defaults to image listings */
$json->container_id->value = "pages-{$content->parent_id->value}";
$filters = new gallery_filters_class($content->site_section->id->value);
$filters->parse_filters();

ob_start();
include (COMMON_TEMPLATE_DIR."content/albums/gallery_listings.php");
$json->content->value = ob_get_contents();
ob_end_clean();

Sorting

JavaScript

LITTLED.Gallery.configureSorting(parent_dom_id) which is rolled into LITTLED.Gallery.bindGalleryHandlers(parent_dom_id).

Markup

Container and sortable elements selectors are table.gallery-listings and tr.page-row or any div selector passed to LITTLED.Gallery.configureSorting() and .page-cell for the sortable selector.

AJAX handler script

Specified through with "Sections" CMS > Content Type > Sorting URI. The generic shared script is /_ajax/utils/resort.php. See Sorting Listings for more details.

See also

• Albums CMS Configuration
• Sorting Listings