Filtro AJAX de Galería

Descripción:

En este tutorial, mostramos cómo hacer una galería de imágenes con Oxygen Builder para ello vamos a necesitar tener instalados estos plugins

Custom Post Type UI
WpCodebox o Advanced Scripts

Advanced Custom Fields PRO
1. Usando la versión PRO porque tiene el campo de galería de imágenes y la versión gratuita no.

Instalación:

Instalar Custom Post Type UI

CPT UI →Add/Edit Post Types (Añadir Editar Post Types).

Post Type Slug: gallery
Plural Label: Galleries
Singular Label: Gallery

Instalar Advanced Custom Fields

Seguir estas indicaciones para la configuración de los campos personalizados:

Custom Fields → Add New (Añadir Nuevo)
- Title: Gallery
- Rules: Post Type is equal to Post
- + Add Fields (Añadir Campos)
  - Field Label: Gallery
  - Field Name: gallery
  - Field Type: Gallery

Ir a Galleries → Add New y crear por ejemplo tres post: Eventos, Retratos y Bodas.

- - Asegurarse de poner algunas imágenes en cada tipo de galería.

Instalar WpCodebox , Advanced Scripts o Code Snippets (Recomendamos el primero)

Snippets → Add New
Title: Filtro AJAX Personalizado (o cualquier otro nombre descriptivo)
Código:(Ver siguiente)


add_action('wp_ajax_customfilter', 'custom_filter_function'); 
add_action('wp_ajax_nopriv_customfilter', 'custom_filter_function');

function custom_filter_function(){

	$args = array(
		'post_type' => 'gallery',
		'posts_per_page' => -1
	);

	// Filter on gallery-category
	if ( isset( $_POST['gallery_category'] ) ) {
		$args['p'] = $_POST['gallery_category'];    
	}

	$query = new WP_Query( $args );

	// Si se encuentra algún post
	if( $query->have_posts() ) {

		$images = array();

		while( $query->have_posts() ) {
			$query->the_post();

			$gallery = $query->post->gallery;

			if ($gallery) {
				foreach($gallery as $image) {
					array_push($images, $image);
				}
			}
		}

		// Orden aleatorio de las imágenes
		shuffle($images);

		$output = '';
		foreach($images as $id) {
			$src 	= wp_get_attachment_image_url( $id, 'full' );
			$srcset = wp_get_attachment_image_srcset( $id, 'full' );
			$sizes 	= wp_get_attachment_image_sizes( $id, 'full' );
			
			$output .= '';
		}
		echo $output;

		wp_reset_postdata();
	} 
	else {
		echo 'No se han encontrado resultados';
	}

	die();
}

Guardar los cambios y Activar.

Crear la nueva página y en ella añadir un Code Block (Bloque de Código)

En el código PHP/HTML del bloque metemos el siguiente código

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
	<?php
		$posts = get_posts( array( 'post_type' => 'gallery' ) );
				
		if ($posts) {
			
			echo '<div class="radio-toolbar">';
			  
			$output = '';
			$gallery_total_size = 0;
		
			foreach($posts as $post) {    
				$gallery_size = sizeof($post->gallery);
				$gallery_total_size += $gallery_size;
				
				$input = '<input id="' . $post->post_title . '" type="radio" class="gallery-filter" name="gallery_category" value="' . $post->ID . '" />';
				$label =  '<label for="' . $post->post_title . '" class="radio-filter">' . $post->post_title . " (" . $gallery_size . ') </label>';
				$output .= $input . $label;
			}
			
			echo '<input id="all" type="radio" class="gallery-filter" name="gallery_category" value="-1" checked />';
			echo '<label for="all">All (' . $gallery_total_size . ')</label>';
		
			echo $output;
			
			echo '</div>';
		}
	?>
	<input type="hidden" name="action" value="customfilter">
</form>

<div id="response" class="gallery" />

En el código JavaScript del bloque metemos el siguiente código

var lazyImageObserver;

jQuery( document ).ready(function($) {
	
	// Intersection Observer
	lazyImageObserver = new IntersectionObserver(function(entries, observer) {
		entries.forEach(function(entry) {
			if (entry.isIntersecting) {
				let lazyImage = entry.target;
				
				lazyImage.src = lazyImage.dataset.src;
				lazyImage.srcset = lazyImage.dataset.srcset;
				lazyImage.style.minHeight = null;
				
				lazyImage.removeAttribute('data-src');
				lazyImage.removeAttribute('data-srcset');
				
				lazyImage.classList.remove("lazy");
				lazyImageObserver.unobserve(lazyImage);
				
				lazyImage.classList.add('fadeIn');
				lazyImage.classList.remove("loading");
			}
		});
	});
	
	// On button change
	$('.gallery-filter').change(function(){
		sendAJAX();
		return false;
	});
	
	// On load
    sendAJAX();
    return false;
});

function sendAJAX() {
    var filter = jQuery('#filter');

    jQuery.ajax({
        url:filter.attr('action'),
        data:filter.serialize(),
        type:filter.attr('method'),
		startTime:new Date().getTime(),
		
        beforeSend:function(xhr){
			disableButtons();
            jQuery('.gallery-image').addClass('fadeOut');
        },
		
        success:function(data){
			var endTime = new Date().getTime();
			var totalTime = endTime - this.startTime;
			var timeToWait = 0;
			
			if (totalTime >= 400) { 
				timeToWait = 0; 
			} else {
				timeToWait = 400 - totalTime; 
			}

			setTimeout(function(){
				jQuery('#response').html(data);
				
				updateObserver();
				
				setTimeout(function(){
					enableButtons();
				}, 800);
				
			}, timeToWait);
			
        }
    });
}

function updateObserver() {
	let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
	lazyImages.forEach(function(lazyImage) {
		lazyImageObserver.observe(lazyImage);
	});
} 

function disableButtons() {
	jQuery('.radio-toolbar label').css('opacity', '0.5');
	jQuery('.radio-toolbar label').css('cursor', 'default');
	
	jQuery('.gallery-filter').attr('disabled', true);
}

function enableButtons() {
	jQuery('.radio-toolbar label').css('opacity', '1.0');
	jQuery('.radio-toolbar label').css('cursor', 'pointer');
	
	jQuery('.gallery-filter').attr('disabled', false);
}

En el código CSS del bloque metemos

/* Gallery */
.gallery {
	width: 100%;
    display: grid;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Animations */
.fadeIn {
	animation-name: fadeIn;
	animation-duration: 0.8s;
	animation-timing-function: ease;
}

.fadeOut {
	animation-name: fadeOut;
	animation-duration: 0.4s;
	animation-timing-function: ease;

	opacity: 0;
}

.loading {
	opacity: 0;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
		-webkit-transform: scale(1)
	}

	1% {
		opacity: 0.5;
		transform: scale(0.9)
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(0.8)
	}
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1)
    }

    1% {
        opacity: 0.2;
        transform: scale(0.2)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
}

/* Radio buttons */
.radio-toolbar {
	width: 100%;

	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.radio-toolbar input[type="radio"] {
	display: none;
}

.radio-toolbar label {
	border-color: #ccc;
	border-radius: 4px;
	border-style: solid;
	border-width: 2px;

	margin: 8px 8px 0px 0;
	padding: 4px 11px;

	font-size: 16px;
	font-family: 'Poppins';

	cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
	background-color: #0069ff;
	border-color: #0069ff;
	color: white;
}
o

En el caso de querer añadir el efecto LightBox hacemos los siguientes pasos:

También se puede añadir con un snippet con Advanced Scripts

Al principio del código PHP/HTML del Code Block insertamos:


<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>>

Y en código del snippet que(el primer código que hemos insertado con un snippet), cambiamos:


$output .= '<img style="min-height:500px;" class="lazy loading gallery-image" data-src="'. $src .'" data-srcset="' . $srcset . '" sizes="' . $sizes . '" />';

por:

$output .= '<img class="lazy loading gallery-image" style="min-height: 500px;" sizes="' . $sizes . '" data-featherlight="image" data-featherlight-target-attr="src" data-src="'. $src .'" data-srcset="' . $srcset . '" />';

¿Cómo puedes hacerlo?

Descripción:

Instalación:

OTROS TIPS