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