I created a filterable gallery with ACF. My problem is that when I add a project to which I add several taxonomies, in my gallery I have the project as many times as I have added taxonomies. Apart from that, I would like the project to appear only once in the gallery but to appear in all the filters where the taxonomy is selected.
<div id="filters" class="col-3">
<ul class="nav">
<li data-filter="all" class="filter active">Tous les projets</li>
<?php
// 1. On définit les argument pour définir ce que l'on souhaite récupérer
$args = array (
'post_type' => 'projet'
);
$terms_id = [];
// 2. On execute la WP query
$my_query = new WP_Query( $args );
// 3. On lance la boucle
if ($my_query->have_posts()) : while($my_query->have_posts()) : $my_query->the_post();
$categories_du_projet = get_field( 'categories_du_projet' );
if ( $categories_du_projet ) : ?>
<?php foreach ( $categories_du_projet as $term ) :
if (!in_array($term->term_id, $terms_id)) :
array_push($terms_id, $term->term_id);
?>
<li data-filter="<?= esc_html( $term->slug ); ?>" class="filter"><?= esc_html( $term->name ); ?></li>
<?php endif; endforeach; endif; endwhile; endif;
// 4. On réinitialise la requete principale
wp_reset_postdata();
?>
</ul>
</div>
<div id="elements" class="col-9">
<?php
// 1. On définit les argument pour définir ce que l'on souhaite récupérer
$args = array (
'post_type' => 'projet'
);
// 2. On execute la WP query
$my_query = new WP_Query( $args );
// 3. On lance la boucle
if ($my_query->have_posts()) : while($my_query->have_posts()) : $my_query->the_post();
$categories_du_projet = get_field( 'categories_du_projet' );
$image_du_projet = get_field( 'image_du_projet' );
$titre_du_projet = get_field( 'titre_du_projet' );
$titre_du_projet = preg_replace('/\s+/', '_', strtolower($titre_du_projet));
$trigger_ID = 'trigger_' . $arr_posts->current_post . '_' . get_the_ID();
$modal_ID = 'modal_' . $arr_posts->current_post . '_' . get_the_ID();
$close_ID = 'close_' . $arr_posts->current_post . '_' . get_the_ID();
$image_ID = 'grandeImage_' . $arr_posts->current_post . '_' . get_the_ID();
$images = acf_photo_gallery('galerie_du_projet', $post->ID);
if ( $categories_du_projet ) :
foreach ( $categories_du_projet as $term ) :
if ( $image_du_projet ) :
?>
<div class="<?= esc_html( $term->slug ); ?>">
<figure class="trigger" id="<?php echo $trigger_ID ?>">
<img src="<?php echo esc_url( $image_du_projet['url'] ); ?>" alt="<?php echo esc_attr( $image_du_projet['alt'] ); ?>" />
<figcaption><?php the_field( 'titre_du_projet' ); ?></figcaption>
</figure>
</div>
<?php endif; ?>
<div class="modal" id="<?= $modal_ID ?>">
<div class="modal-content">
<span class="close-button" id="<?= $close_ID ?>">×</span>
<h2><?= get_field( 'titre_du_projet' ); ?></h2>
<hr>
<div class="row">
<div class="image">
<?php $image_du_projet = get_field( 'image_du_projet' ); ?>
<?php if ( $image_du_projet ) : ?>
<img class="<?= $image_ID; ?>" src="<?= esc_url( $image_du_projet['url'] ); ?>" alt="<?= esc_attr( $image_du_projet['alt'] ); ?>" />
<?php endif; ?>
<img class="grandeImage" />
<div class="row" id="gallery-full">
<?php
//Check if return array has anything in it
if( count($images) ):
//Cool, we got some data so now let's loop over it
foreach($images as $image):
$id = $image['id']; // The attachment id of the media
$title = $image['title']; //The title
$caption= $image['caption']; //The caption
$full_image_url = $image['full_image_url']; //Full size image url
//Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<div class="thumbnail">
<img id="image_<?= $id; ?>" src="<?= $full_image_url; ?>" alt="<?= $title; ?>">
</div>
<?php endforeach; endif; ?>
</div>
</div>
<div class="description">
<h3>Description</h3>
<p><?php the_field('description_du_projet'); ?></p>
</div>
</div>
</div>
</div>
All I want is just no duplicate pictures on "all project" just one picture, not one per taxonomies. If anyone can help me please... Too much time on it and I found nothing to help me.
This is my var_dump($term) and on this 3 pictures only one can display the modal. I want on All project display just one picture and when I choose one of the 3 filters, can click on it and display the modal
I created a filterable gallery with ACF. My problem is that when I add a project to which I add several taxonomies, in my gallery I have the project as many times as I have added taxonomies. Apart from that, I would like the project to appear only once in the gallery but to appear in all the filters where the taxonomy is selected.
<div id="filters" class="col-3">
<ul class="nav">
<li data-filter="all" class="filter active">Tous les projets</li>
<?php
// 1. On définit les argument pour définir ce que l'on souhaite récupérer
$args = array (
'post_type' => 'projet'
);
$terms_id = [];
// 2. On execute la WP query
$my_query = new WP_Query( $args );
// 3. On lance la boucle
if ($my_query->have_posts()) : while($my_query->have_posts()) : $my_query->the_post();
$categories_du_projet = get_field( 'categories_du_projet' );
if ( $categories_du_projet ) : ?>
<?php foreach ( $categories_du_projet as $term ) :
if (!in_array($term->term_id, $terms_id)) :
array_push($terms_id, $term->term_id);
?>
<li data-filter="<?= esc_html( $term->slug ); ?>" class="filter"><?= esc_html( $term->name ); ?></li>
<?php endif; endforeach; endif; endwhile; endif;
// 4. On réinitialise la requete principale
wp_reset_postdata();
?>
</ul>
</div>
<div id="elements" class="col-9">
<?php
// 1. On définit les argument pour définir ce que l'on souhaite récupérer
$args = array (
'post_type' => 'projet'
);
// 2. On execute la WP query
$my_query = new WP_Query( $args );
// 3. On lance la boucle
if ($my_query->have_posts()) : while($my_query->have_posts()) : $my_query->the_post();
$categories_du_projet = get_field( 'categories_du_projet' );
$image_du_projet = get_field( 'image_du_projet' );
$titre_du_projet = get_field( 'titre_du_projet' );
$titre_du_projet = preg_replace('/\s+/', '_', strtolower($titre_du_projet));
$trigger_ID = 'trigger_' . $arr_posts->current_post . '_' . get_the_ID();
$modal_ID = 'modal_' . $arr_posts->current_post . '_' . get_the_ID();
$close_ID = 'close_' . $arr_posts->current_post . '_' . get_the_ID();
$image_ID = 'grandeImage_' . $arr_posts->current_post . '_' . get_the_ID();
$images = acf_photo_gallery('galerie_du_projet', $post->ID);
if ( $categories_du_projet ) :
foreach ( $categories_du_projet as $term ) :
if ( $image_du_projet ) :
?>
<div class="<?= esc_html( $term->slug ); ?>">
<figure class="trigger" id="<?php echo $trigger_ID ?>">
<img src="<?php echo esc_url( $image_du_projet['url'] ); ?>" alt="<?php echo esc_attr( $image_du_projet['alt'] ); ?>" />
<figcaption><?php the_field( 'titre_du_projet' ); ?></figcaption>
</figure>
</div>
<?php endif; ?>
<div class="modal" id="<?= $modal_ID ?>">
<div class="modal-content">
<span class="close-button" id="<?= $close_ID ?>">×</span>
<h2><?= get_field( 'titre_du_projet' ); ?></h2>
<hr>
<div class="row">
<div class="image">
<?php $image_du_projet = get_field( 'image_du_projet' ); ?>
<?php if ( $image_du_projet ) : ?>
<img class="<?= $image_ID; ?>" src="<?= esc_url( $image_du_projet['url'] ); ?>" alt="<?= esc_attr( $image_du_projet['alt'] ); ?>" />
<?php endif; ?>
<img class="grandeImage" />
<div class="row" id="gallery-full">
<?php
//Check if return array has anything in it
if( count($images) ):
//Cool, we got some data so now let's loop over it
foreach($images as $image):
$id = $image['id']; // The attachment id of the media
$title = $image['title']; //The title
$caption= $image['caption']; //The caption
$full_image_url = $image['full_image_url']; //Full size image url
//Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<div class="thumbnail">
<img id="image_<?= $id; ?>" src="<?= $full_image_url; ?>" alt="<?= $title; ?>">
</div>
<?php endforeach; endif; ?>
</div>
</div>
<div class="description">
<h3>Description</h3>
<p><?php the_field('description_du_projet'); ?></p>
</div>
</div>
</div>
</div>
All I want is just no duplicate pictures on "all project" just one picture, not one per taxonomies. If anyone can help me please... Too much time on it and I found nothing to help me.
This is my var_dump($term) and on this 3 pictures only one can display the modal. I want on All project display just one picture and when I choose one of the 3 filters, can click on it and display the modal
Share Improve this question edited Feb 4, 2021 at 14:01 Tristissya asked Feb 3, 2021 at 14:57 TristissyaTristissya 11 bronze badge 7 | Show 2 more comments1 Answer
Reset to default 0Instead of getting all of the image IDs and then cycling through them and outputting each one, you would first collect them into a single array and then use array_unique() to remove the duplicates.
if( $categories_du_projet ) :
$image_array();
foreach( $categories_du_projet as $term ) :
if( $image_du_projet ) :
$image_array[] = $image_du_projet;
endif;
endforeach;
$image_array = array_unique( $image_array );
foreach( $image_array as $image_article ) :
//now run your output method using $image_article rather than $image_du_projet
//you'll probably have to change how you're obtaining things like the URL, ALT, etc.
endforeach;
endif;
What I'm not sure of is $image_du_projet = get_field( 'image_du_projet' ); and what that actually gets. I'm assuming it's the ID of the image. If that's wrong you'll probably need to modify things a bit.
Perhaps then you'd need to add this:
$image_du_projet_id = $image_du_projet['ID'];
$image_array[] = $image_du_projet_id;
Sorry I can't give a definitive answer in that regard but there's no way for me to really test it as I don't have ACF or those fields configured anywhere.
array_unique()over your array to strip out duplicate IDs, then start your output process. – Tony Djukic Commented Feb 3, 2021 at 15:42array_unique()andforeachloop on the result. We know you're getting all of the images and some of them are duplicates, so instead of cycling through everything that's returned and outputting each one, first just add them all to an array. – Tony Djukic Commented Feb 3, 2021 at 16:39$my_query = new WP_Query( $args );. So in yourwhile()instead of running the entire output process, just gather up all the IDs. Then run a separateforeach()to run your output after you've removed duplicates. I can try to write it out for you after I finish a couple of calls. – Tony Djukic Commented Feb 3, 2021 at 16:42