Filtro AJAX de Galería - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

Filtro AJAX de Galería

¿Cómo puedes hacerlo?

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:

  • CPT UI →Add/Edit Post Types (Añadir Editar Post Types).
    • Post Type Slug: gallery
    • Plural Label: Galleries
    • Singular Label: Gallery

    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

    1. 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.
    1. Instalar WpCodebox , Advanced Scripts o Code Snippets&nbsp (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 .= 'img-6';
    		}
    		echo $output;
    
    		wp_reset_postdata();
    	} 
    	else {
    		echo 'No se han encontrado resultados';
    	}
    
    	die();
    }
    
    Click para Copiar
    img-7
    Copiado
    • Guardar los cambios y Activar.
    1. 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" />
    
    Click para Copiar
    img-8
    Copiado
    • 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);
    }
    
    Click para Copiar
    img-9
    Copiado
    • 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
    
    Click para Copiar
    img-10
    Copiado
    1. 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>>
    
    
    Click para Copiar
    img-11
    Copiado
    • 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 . '" />';
    
    
    Click para Copiar
    img-12
    Copiado
    • 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 . '" />';
    
    
    Click para Copiar
    img-13
    Copiado
    0 0 votos
    Puntuación
    Suscribir
    Notificar de
    guest
    0 Comentarios
    Viejos
    Nuevos Más votados
    Comentarios en línea
    Ver todos los comentarios
    img-16
    Añadir lightbox "Facilmente"

    El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como hacerlo.

    Leer más
    img-17
    Imagen de Fondo Archivo de Categorías

    Vamos a tratar de como añadir un encabezado con la imagen predeterminada para el archivo de categorías, cada categoría tendrá su imagen predeterminada.
    Para esto solo se necesita de un plugin gratuito, aunque también se puede hacer con otros como por ejemplo el HappyFiles.

    Leer más
    img-18
    Botón de Todos los Templates

    Se echa de menos un botón que estando en la sección "Edit Template" nos lleve directamente a la página de Templates que es donde se muestra todo el listado de plantillas de Oxygen, parece que alguien se ha olvidado de este detalle que debería estar implementado nativamente y a veces hasta fastidia un poco tener que cargar dos páginas para llegar ahí estando en la sección de edición de template.

    Leer más