Editing Album/Gallery Listings

[[Category:CMS Documentation]] [[Category:Littled Libraries]] [[Category:Albums CMS]] [[Category:jQuery/AJAX]] [[Category:Web Development]]

== Application ==

See also: [[Albums CMS Design Principles]]

=== PHP ===

==== Album listings pages ====

* Add shared album listings template on the page, enclosed in a `<nowiki><div></nowiki>`
** 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:

<syntaxhighlight lang="php">
	<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>
</syntaxhighlight>

==== Album details pages ====

~~TK~~

=== Javascript ===

==== Album listings pages ====

<syntaxhighlight lang="javascript">
$(document).ready(function() {
	/* Binds AJAX functionality to album listings elements */
	$('.album-listings').galleries('bindAlbumListingsHandlers');
});
</syntaxhighlight>

==== Album details pages ====

<syntaxhighlight lang="javascript">
$(document).ready(function() {
	/* retrieves gallery content */
	$('.gallery-listings').galleries('retrieveGallery');	
});
</syntaxhighlight>

=== AJAX ===

Assign AJAX handlers through the [[Littled Content Properties CMS|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:

<syntaxhighlight lang="php">
<? include (CMS_COMMON_TEMPLATE_DIR."forms/images/gallery_listings_container.php"); ?>
</syntaxhighlight>

== Image rollovers ==

See [[Image Rollovers (Poshytip)]]

==Image lightbox==

=== Markup ===
* Surround thumbnail <code><nowiki><img></nowiki></code> element in <code><nowiki><a></nowiki></code> tags with the following attributes:
** <code>href="javascript:void(0)" rel="nofollow"</code>
** <code>class="img-details-link"</code><br />This is the selector used to assign the <code>onclick</code> handler.
** <code>data-id="[IMAGE_LINK_ID]"</code>
** <code>data-tid="[GALLERY_SECTION_ID]"</code>
** <code>data-op="view"</code> or <code>data-op="details"</code><br />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 ===
* <code>$('img-details-link')</code> <code>onclick</code> handler opens a dialog containing the full-resolution version of the image. 
* <code>onclick</code> handler defined in <code>$.galleries('bindAlbumListingsHandlers')</code>
* The <code>onclick</code> handler invokes <code>$.formDialog('open', {dialogClass, 'gallery-dialog'})</code>

=== CMS ===
* '''Details URI''': <code>/_ajax/images/image_details.php</code><br />This returns markup containing the full-resolution version of the image to be displayed in the lightbox dialog.

==Inserting an "add image" button==
===Markup===
<syntaxhighlight lang="php" enclose="div">
<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>
</syntaxhighlight>

===JavaScript===
<syntaxhighlight lang="javascript">
$('.add-img-btn', $p)
.iconButton('addchild')
.on('click', methods.editImage); /* "methods" in the context of $.galleries() */
</syntaxhighlight>
The <code>$('.add-img-btn')</code> handler is rolled into <code>$.galleries('bindGalleryHandlers')</code>.

===AJAX handler script===
The handler script is determined by <code>section_properties.upload_uri</code>. If no value is found in that column, the code falls back on <code>section_properties.edit_uri</code>. 

That page will expect a combination of values to be passed in via the <code>id</code>, <code>pid</code>, and <code>tid</code> arguments. Only <code>tid</code> (type id) is strictly required. <code>pid</code> (parent id) can be null in cases when creating a new parent record and uploading images simultaneously. <code>id</code> (image link record id) can be null in cases when uploading a new image.

==Pagination==

===PHP===
Album listings:
<syntaxhighlight lang="php">
include (COMMON_TEMPLATE_DIR."framework/navigation/listings_page_links.php");
</syntaxhighlight>

===JavaScript===
Handlers rolled into
Album listings:
<syntaxhighlight lang="javascript">
$('#listings-container').galleries('bindListingsHandlers');
</syntaxhighlight>
<code>.alb-nav</code> click > <code>$.galleries('gotoAlbumPage')</code>

==Sorting==

===JavaScript===

<code>LITTLED.Gallery.configureSorting(parent_dom_id)</code> which is rolled into <code>LITTLED.Gallery.bindGalleryHandlers(parent_dom_id)</code>.

===Markup===

Container and sortable elements selectors are <code>table.gallery-listings</code> and <code>tr.page-row</code> or any <code>div</code> selector passed to <code>LITTLED.Gallery.configureSorting()</code> and <code>.page-cell</code> for the sortable selector.

===AJAX handler script===

Specified through with "Sections" CMS > Content Type > Sorting URI. The generic shared script is <code>/_ajax/utils/resort.php</code>. See [[Sorting Listings]] for more details.

==See also==
*[[Albums CMS Configuration]]
*[[Sorting Listings]]