TTWeb Media 2. Photo Galleries

Improve this page

Introduction

Photo galleries are another custom content type that you can access under the Content section of a draft. Users can create named galleries and easily select images from the library, add alt text and captions and sort them.

The gallery structures are stored in JSON files under /_data/_galleries/

<div class="row">
  
</div>

Multiple Galleries (Filtered)

<div class="row">
  
  
  
  
</div>

<select class="filter-select">
  <option value="all" class="filter active">All</option>
  <option value="GALLERY_NAME_1" class="filter">GALLERY NAME 1</option>
  <option value="GALLERY_NAME_2" class="filter">GALLERY NAME 2</option>
  <option value="GALLERY_NAME_3" class="filter">GALLERY NAME 3</option>
  <option value="GALLERY_NAME_4" class="filter">GALLERY NAME 4</option>
</select>

// Gallery Filter Function
$(".filter-select").on("change", function () {

  // Remove active class from everything
  $(".filter-select option").each( function() {
    $(this).removeClass('active');
  });

  // Add active class to selected option
  $(".filter-select option:selected").addClass('active');

  // Assign filter variable
  var $filter = $(".filter-select option:selected").attr("value");

  // If we select "All," show all
  if ($filter == 'all') {
    $(".fancybox").attr("data-fancybox-group", "gallery").not(":visible").fadeIn();
  } else {
    $(".fancybox").fadeOut(0).filter(function () {
      // set data-filter value as the data-rel value of selected
      return $(this).data("filter") == $filter;
    }).attr("data-fancybox-group", $filter).fadeIn(1000); // set data-fancybox-group and show filtered elements
  }

});

In bedrock there are a couple of region types specifically for managing galleries on a web page

  • On-Page Gallery: This actually doesn’t use galleries at all, but just lets a user select a collection of images and sort them. This ad-hoc gallery can’t be used elsewhere on the site
  • Galleries: This region type lets a user select from the exist galleries, apply a custom label and sort the gallery orders. To sort images within the gallery they need to go to the gallery interface itself. These galleries can be re-used throughout the site.