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.

$this->layout->db_field = false;

Listings

JavaScript/JQuery handlers

LITTLED.Gallery.bindAlbumListingsHandlers()

The routine above doesn’t handle content refreshes. The code below adds that, along with some filtering utilities. This can be rolled up into a routine available through the LITTLED.CMS library.

LITTLED.init({ setSortables: LITTLED.Gallery.bindAlbumListingsHandlers });
LITTLED.Gallery.keywordAutocomplete();
LITTLED.setSortables();
$('.datepicker').datepicker();
$('.update-cache').click(LITTLED.updateCache);

image rollovers

• Requires “poshytip” JavaScript library in addition to the JQuery libraries.
• JQuery handlers
  • LITTLED.Gallery.bindAlbumListingsHandlers():

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

• • Surround IMG element in ANCHOR tags.
  • IMG class="album-tn". This is the hook for JQuery handler.
  • href="javascript:void(0)"
  • 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 class="tooltip-content"
  • The tooltip-content class will hide the full-sized image until a rollover event is captured by the thumbnail.
  • The IMG element doesn’t require any class attributes.

image lightbox

• Surround IMG element in <A> tags.
  • <A> class="img-details-link". This is the hook for JQuery handlers.
  • href="javascript:void(0)"
  • <A> attribute data-id stores the image_link record id
  • <A> attribute data-tid Content type id. Make sure this is for the image and not its parent’s (the album record) content type.
• Requires a handler to be set in the Content Sections CMS:
  • Details URI: /_ajax/images/image_details.php
  • $('.img-details-link') handler

$('.img-details-link', $p).click(LITTLED.Gallery.detailsDialog('gallery-dialog'));

• • The $('.img-details-link') handler is rolled into LITTLED.Gallery.bindAlbumListingsHandlers()

inserting an "add image" button

HTML

<a class="add-img-btn" href="javascript:void(0)" rel="nofollow" data-id="<?=$img->id->value?>" data-pid="<?=$input->id->value?>" data-tid="<?=$img->type_id->value ?>" title="add image">add image</a>

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();

See Also

• albums cms specs & principles