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

LITTLED.Gallery.bindGalleryHandlers(parent_dom_id);

Within the gallery listings the routine above 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

The routine doesn't set up re-binding the listings after content refreshes. That would be achieved with

$(document).ready(function() {
	LITTLED.init({setSortables: function() {
		LITTLED.Gallery.bindGalleryHandlers('#pages-<?=$input->id->value?>');
	}});
	LITTLED.setSortables();
});

The default parent_dom_id is #gallery-listings. If the parent element is a table, then the sortable elements are specified with tr.page-row. If the parent element is a div, then the sortable elements are marked with .page-cell.

Image rollovers

JavaScript

• Requires “poshytip” JavaScript library in addition to the JQuery libraries.
• JQuery handlers
  • $('#listings-container').galleries('bindAlbumListingsHandlers'):
    

    $('.album-tn', $p).poshytip(LITTLED.Gallery.preview_tt_properties);

Markup

• <img> tag attributes:
• class="album-tn"
  The album-tn class is the hook for the jQuery/poshytip handlers.
• When no thumbnail is available for the record:
  

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

• Follow the thumbnail <img> 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.
  • The <span> element doesn’t require any class attributes.

Image 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'})

Markup

• <img> tag attributes
  • class="img-details-link"
    This is the selector used to assign the onclick handler.
• Surround <img> element in <a> tags.
  • <a> tag attributes:
  • data-op="view"
    This allows the jQuery handler to retrieve the correct AJAX script to call to retrieve the details dialog content.
  • data-id="[IMAGE_LINK_ID]"
  • data-tid="[GALLERY_SECTION_ID]"
  • href="javascript:void(0)" rel="nofollow"

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)
.button({
    icons: {primary: 'ui-icon-addchild'},
    text: false
})
.click(LITTLED.Gallery.dialogEdit);

The $('.add-img-btn') handler is rolled into LITTLED.Gallery.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.

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_cache::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).

HTML

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