Albums CMS Design Principles

AJAX

When adding a new album-based CMS section, the following files may need to be updated with the new content type:

/_classes/content/cache_class.php
/_classes/content/resort_class.php

Obviously if a file includes the cache_class then the new content type will be available to that file.

PHP Classes

Classes derived from album_class and album_xpost_class that don’t have the same columns as those tables should set the db_field property value for those fields to FALSE in their class constructors.

function __construct() {
	parent::__construct();
	/* any child class property initialization would go here */
	$this->layout->db_field = false;
}

JavaScript/JQuery

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

See Also

• Album/Gallery Listings
• albums cms specs & principles (Littledamien docs)