Album/Gallery Listings

Application

See also: Albums CMS Configuration

PHP

Album listings pages

• Add shared album listings template on the page, enclosed in a `<div>
  • class listings album-listings
  • data-tid attribute
    • Value is the site_section representing the listings content.
    • Used for all shared AJAX scripts.
  • data-p` attribute
    • Value is the position of the first record on the page within the entire set of matching records.
    • Used for sorting.

Example:

<div class="listings album-listings" data-tid="<?=$filters->site_section->id->value ?>" data-p="<?=$filters->calc_rec_position()?>">
<? include (CMS_COMMON_TEMPLATE_DIR."content/albums/album_listings.php"); ?>
	</div>

Album details pages

~~TK~~

Javascript

Album listings pages

$(document).ready(function() {
	/* Binds AJAX functionality to album listings elements */
	$('.album-listings').galleries('bindAlbumListingsHandlers');
});

Album details pages

$(document).ready(function() {
	/* retrieves gallery content */
	$('.gallery-container').galleries('retrieveGallery');	
});

AJAX

Assign AJAX handlers through the Content Properties CMS.

• Listings /_ajax/utils/listings.php
• Delete record /_ajax/utils/delete_record.php
• Resort /_ajax/utils/resort.php
• Update Cache /_ajax/utils/update_cache.php

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 (CMS_COMMON_TEMPLATE_DIR."forms/images/gallery_listings_container.php"); ?>

JavaScript/JQuery handlers

Album listings

$('.album-listings').galleries('bindAlbumListingsHandlers');

$.galleries('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.

Album details

Typical handlers on album details pages:

• Load the gallery content.
• Bind overlay handlers for the album's thumbnail image.
• Bind handler to allow inline editing of album keywords.
• Bind "delete record" handler to links/buttons in the page header.
• Bind "update cache" handler to links/buttons in the page header.

<script type="text/javascript">
$(document).ready(function() {

	/* Load gallery content & bind handlers for the gallery listings content. */
	$('.gallery-container').galleries('retrieveGallery');	

	/* Album thumbnail handlers. */
	$('.image-upload-container').galleries('bindImageOverlayHandlers');

	/* Enable inline keyword editing. */
	$('.metadata').keywords('bindListingsHandlers');

	/* "delete record" link in the page header 
	   The default action is to refresh with listings content, 
	   which isn't appropriate on a details page. */
	$('.hdr-delete-link').formDialog({
		dialogClass: 'delete-confirmation',
		callbacks: {update_content: function(data) {
				data.settings = options;
				methods.updatePageContentAfterDelete(data)
		}}
	});

	/* "update cache" link in the page header */
	$('.update-cache-btn').on('click', $.littled.updateCache);
});
</script>

Gallery listings

$('.gallery-container').galleries('bindGalleryHandlers');

$.galleries('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');

Listings selectors

Albums

The default container for albums is .album-listings.

The default container can be overridden with the dom.album_container setting of the $.galleries library.

$(document).ready(function() {
	$('.alt-album-container').galleries('bindAlbumListingsHandlers', {dom: {gallery_container: '.alt-album-container'}});
});

Galleries

The default container for galleries is .gallery-container.

The default container can be overridden with the dom.gallery_container setting of the $.galleries library.

$(document).ready(function() {
	$('.alt-pages-container').galleries('bindGalleryHandlers', {dom: {gallery_container: '.alt-pages-container'}});
});

Sorting

• 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`.

Image rollovers

See Image Rollovers (Poshytip)

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