Album/Gallery Listings: Difference between revisions

From Littledamien Wiki
Jump to navigation Jump to search
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 3: Line 3:
== Application ==
== Application ==


See also: [[Albums CMS Configuration]]
See also: [[Albums CMS Design Principles]]


=== PHP ===
=== PHP ===
Line 46: Line 46:
$(document).ready(function() {
$(document).ready(function() {
/* retrieves gallery content */
/* retrieves gallery content */
$('.gallery-container').galleries('retrieveGallery');
$('.gallery-listings').galleries('retrieveGallery');
});
});
</syntaxhighlight>
</syntaxhighlight>
Line 72: Line 72:
<? include (CMS_COMMON_TEMPLATE_DIR."forms/images/gallery_listings_container.php"); ?>
<? include (CMS_COMMON_TEMPLATE_DIR."forms/images/gallery_listings_container.php"); ?>
</syntaxhighlight>
</syntaxhighlight>
==JavaScript/JQuery handlers==
=== Album listings ===
<syntaxhighlight lang="javascript">
$('.album-listings').galleries('bindAlbumListingsHandlers');
</syntaxhighlight>
`$.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.
<syntaxhighlight lang="javascript">
<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>
</syntaxhighlight>
=== Gallery listings ===
<syntaxhighlight lang="javascript">
$('.gallery-container').galleries('bindGalleryHandlers');
</syntaxhighlight>
`$.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
<syntaxhighlight lang="javascript">
$([LISTINGS_SELECTOR]).trigger('contentRefresh');
</syntaxhighlight>
=== 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.
<syntaxhighlight lang="javascript">
$(document).ready(function() {
$('.alt-album-container').galleries('bindAlbumListingsHandlers', {dom: {gallery_container: '.alt-album-container'}});
});
</syntaxhighlight>
==== 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.
<syntaxhighlight lang="javascript">
$(document).ready(function() {
$('.alt-pages-container').galleries('bindGalleryHandlers', {dom: {gallery_container: '.alt-pages-container'}});
});
</syntaxhighlight>
==== Sorting ====
* If the parent element is a `<nowiki><table></nowiki>` the sortable elements are specified with `tr.page-row`.
* If the parent element is a `<nowiki><div></nowiki>` the sortable elements are marked with `.page-cell`.


== Image rollovers ==
== Image rollovers ==
Line 248: Line 130:
</syntaxhighlight>
</syntaxhighlight>
<code>.alb-nav</code> click > <code>$.galleries('gotoAlbumPage')</code>
<code>.alb-nav</code> click > <code>$.galleries('gotoAlbumPage')</code>
==Refreshing content==
The default container for gallery listings has <code>id="pages-[PARENT_ID]"</code>.
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 <code>container_id</code> field of the JSON data. The default image upload and edit scripts will pass back <code>pages-[PARENT_ID]</code> as the selector if it's determined that the control that invoked the AJAX handler script resided within gallery listings.
<syntaxhighlight lang="html4strict">
<div id="pages-34">
    <div><!--// GALLERY LISTINGS CONTENT GOES HERE //--></div>
</div>
</syntaxhighlight>
The actual content used to refresh the content container is determined in the PHP routine <code>cache_class::refresh_content_after_image_edit()</code>. The content type id determines which content template is selected. By default the include file <code>[COMMON_TEMPLATE_DIR]content/albums/gallery_listings.php</code> is used. Other cases can be added to select other templates.
<syntaxhighlight lang="php">
/* 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();
</syntaxhighlight>


==Sorting==
==Sorting==

Latest revision as of 20:37, 11 September 2014


Application[edit]

See also: Albums CMS Design Principles

PHP[edit]

Album listings pages[edit]

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

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

Album details pages[edit]

~~TK~~

Javascript[edit]

Album listings pages[edit]

$(document).ready(function() {
	/* Binds AJAX functionality to album listings elements */
	$('.album-listings').galleries('bindAlbumListingsHandlers');
});

Album details pages[edit]

$(document).ready(function() {
	/* retrieves gallery content */
	$('.gallery-listings').galleries('retrieveGallery');	
});

AJAX[edit]

Assign AJAX handlers through the 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[edit]

Listings pages[edit]

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[edit]

PHP include that inserts the gallery container element into the page. It allows for either default listing content, or custom gallery listings content: 

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

Image rollovers[edit]

See Image Rollovers (Poshytip)

Image lightbox[edit]

Markup[edit]

  • Surround thumbnail <img> element in <a> tags with the following attributes:
    • href="javascript:void(0)" rel="nofollow"
    • class="img-details-link"
      This is the selector used to assign the onclick handler.
    • data-id="[IMAGE_LINK_ID]"
    • data-tid="[GALLERY_SECTION_ID]"
    • data-op="view" or data-op="details"
      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[edit]

  • $('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'})

CMS[edit]

  • 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[edit]

Markup[edit]

<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[edit]

$('.add-img-btn', $p)
.iconButton('addchild')
.on('click', methods.editImage); /* "methods" in the context of $.galleries() */

The $('.add-img-btn') handler is rolled into $.galleries('bindGalleryHandlers').

AJAX handler script[edit]

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.

Pagination[edit]

PHP[edit]

Album listings: 

include (COMMON_TEMPLATE_DIR."framework/navigation/listings_page_links.php");

JavaScript[edit]

Handlers rolled into Album listings: 

$('#listings-container').galleries('bindListingsHandlers');

.alb-nav click > $.galleries('gotoAlbumPage')

Sorting[edit]

JavaScript[edit]

LITTLED.Gallery.configureSorting(parent_dom_id) which is rolled into LITTLED.Gallery.bindGalleryHandlers(parent_dom_id).

Markup[edit]

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[edit]

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[edit]

Retrieved from "https://wiki.dbarchowsky.com/index.php?title=Album/Gallery_Listings&oldid=957"