Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador

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

Instalación:

  1. Instalar Custom Post Type UI
  • CPT UI →Add/Edit Post Types (Añadir Editar Post Types).
    1. Instalar Advanced Custom Fields

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

    1. Ir a Galleries → Add New y crear por ejemplo tres post: Eventos, Retratos y Bodas.
    1. Instalar Advanced Scripts o Code Snippets  (Recomendamos el primero)
    
    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();
    }
    
    Click para Copiar
    Copiado
    1. Crear la nueva página y en ella añadir un Code Block (Bloque de 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
    Copiado
    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
    Copiado
    /* 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
    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
    
    <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
    Copiado
    
    $output .= '<img style="min-height:500px;" class="lazy loading gallery-image" data-src="'. $src .'" data-srcset="' . $srcset . '" sizes="' . $sizes . '" />';
    
    
    Click para Copiar
    Copiado
    $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
    Copiado