gallery.twig

{% extends '_layout' %}

{% block content %}

	{# Set up the work section in JSON for filtering #}
	{% set entries = craft.entries({
	'section': 'work',
	'with': [
		'featuredImage.image:image'
	]
}) %}
	{# Set JSON object outside the loop so it can be used anywhere on the page #}
	{% set jsonProjects = [] %}
	{% for entry in entries.all() %}
		{% set media = [] %}
		{% set workCategory = [] %}

		{# Iterate over media types and form new array of objects #}
		{% for image in entry.featuredImage %}
			{% set media = media|merge([{
			imageUrl: image.url,
			alt: image.title
		}]) %}
		{% endfor %}

		{# Set project category #}
		{% set projectCategory = entry.workEntryCategory.one() %}

		{# Set up main JSON document with all additions #}
		{% set jsonProjects = jsonProjects|merge([{
		"id": entry.id,
		"title": entry.title,
		"categoryTitle": projectCategory.title,
		"projectUrl": entry.url,
		"media": media,
		"hidden": entry.hidden
}]) %}
	{% endfor %}

	{# Page content #}
	<div class="px-4 bg-bottom bg-cover bg-opacity-20" style="background-image: url('{{siteUrl}}/img/bg-bottom.png');">
		<div class="py-12" x-data="{animate: true}">
			<div class="container" x-data="loadSearchItems()">
				<h1 class="mb-6 text-5xl font-bold text-transparent uppercase font-heading md:text-6xl lg:text-8xl text-stroke">{{ entry.title|typogrify}}</h1>

				{# Category Filters #}
				{% set workCategories = craft.categories().group('workCategory').asArray().all %}
				{% set filterCategories = ['all',] %}
				{% for category in workCategories %}
					{% set filterCategories = filterCategories|merge([category.title]) %}
				{% endfor %}

				<div class="category-filters" x-data="{filterCategory:''}">
					{% for item in filterCategories  %}
						<input class="hidden" x-model="category" @click="filterCategory = '{{ item|lower }}', animate = !animate" type="radio" value="{{ loop.first ? '': item|lower }}" id="{{ item|lower }}" name="{{ item|lower }}">
						<label class="inline-block pb-1 mb-3 mr-4 text-xl text-gray-400 uppercase transition duration-300 lg:mb-0 md:text-2xl font-heading hover:text-gray-100" for="{{ item|lower }}" :class="filterCategory == '{{ item|lower }}' ? 'active' : ''">{{ item|upper }}</label>
					{% endfor %}
				</div>
				{# Display work items #}
				<div class="container pt-5 md:pt-6 mx-auto">
					<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
						<template x-for="item in filteredItems" :key="`${item.id}`">
							<a x-show="animate" x-data"`${item.categorytitle}`" :href="`${item.projectUrl}`" class="relative transition duration-300 ease-in-out group work-card"  x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
								<div class="absolute z-20 bottom-4 left-5">
									<div class="text-base text-gray-200 font-heading" x-text="`${item.title}`"></div>
								</div>
								<div class="absolute z-10 w-full h-full overlay"></div>
								<img class="w-full" :src="`${item.media[0].imageUrl}`" :alt="`${item.media[0].title}`">
							</a>
						</template>
					</div>
				</div>
			</div>
		</div>
		<div class="pt-12 pb-24">
			<div class="container">
				<div class="flex flex-col justify-between md:flex-row">
					<div class="flex flex-col w-full md:w-1/2 lg:w-5/12 md:mr-8 lg:mr-32">
						<h3 class="mb-8 text-3xl leading-10 text-gray-100 md:text-4xl font-heading">{{ entry.blurb|typogrify }}</h3>
					</div>
					<div class="flex flex-col w-full prose md:w-1/2 lg:w-6/12">
						{{ entry.bodySimple |typogrify }}
					</div>
				</div>
			</div>
		</div>
	</div>

	{% js %}
	// Logs JSON output for testing purposes
		// console.log({{ jsonProjects|json_encode|raw }});
		function loadSearchItems() {
		    return {
		      search: '',
		      category: '',
		      //jsonProjects is the entry point here, may need to be altered
		      myFormData: {{ jsonProjects|json_encode|raw }},
		      get filteredItems() {

		        let hasSearch = this.search.length;
		        let hasCategory = this.category.length;

		        if (!hasSearch && !hasCategory) {
		          // No Filtering
		          return this.myFormData;
		        } else if (hasSearch && !hasCategory) {
		          // Only Search
		          return this.myFormData.filter((item) => {
		            return searchFilter(item.categoryTitle, this.search);
		          });
		        } else if (!hasSearch && hasCategory) {
		            // Only Alphabet Filters
		            return this.myFormData.filter((item) => {
		              return category(item, this.category);
		            });
		        } else if (hasSearch && hasCategory) {
		          // Search and Alphabet Filters
		          return this.myFormData.filter((item) => {
		            return category(item, this.category)
		              && searchFilter(item.categoryTitle, this.search);
		          });
		        }
		      },
		    };

		    function category(item, filter) {
		        return item.categoryTitle
		          .toLowerCase()
		          .includes(filter.toLowerCase())
		    }

		    function searchFilter(content, query) {
		      return content
		        .toLowerCase()
		        .includes(query.toLowerCase())
		    }

		  }
	{% endjs %}

{% endblock %}