Mediaweeze

HI @phil I want to show many and unknown number of client logos in a grid of nine squares, they fade in and out so that all logos show eventually but not all at once, and never duplicated in the grid, currently there are 72 clients so 72 client logos. these may increase or decrease depending on if new clients or added or taken away. You can see a video of how it works and why it's not working correctly here Video of the problem. I hope that helps explain what I'm attempting to do.

Hi @kicken Thanks for your reply, the two image with a bit of css make the images fade out between one and another. I have worked on my code further but still stuck, I thought that by using array_chunk was a better solution as I could split all 72 clients into chunks and distribute theme between the list elements. ensuring that each <li> had it's own chunk of client logos to fade through. I'm nearly there but I think I'm just missing the mark or have something in the wrong place? <?php $clients = $_w->page->get_field('clients'); $chunks = array_chunk($clients, 8); shuffle($chunks); ?> <?php if ($clients): ?> <section class="image-grid-container"> <script id="hd_client_gallery" type="text/json"> [<?php $total = count($clients); $count = 0; foreach ($clients as $c): echo "{"; echo '"url": "' . $c->image->url . '",'; echo '"href": "' . $c->link. '"'; echo "}"; if(++$count !== $total) { echo ", "; } endforeach; ?>] </script> <ul class="object image-grid gallery"> <?php $imageCounter = 0; ?> <?php foreach ($chunks as $chunk): shuffle($chunk); ?> <?php foreach ($chunk as $c): if (!$c) continue; // skip empty elements if ($imageCounter > 8) break; $imageCounter++; ?> <li> <a <?= ($c->link ? 'href="'.$c->link.'"' : '' ); ?>> <img class="img-fluid" src="<?= $c->image->url; ?>" /> <img style="display:none;" class="img-fluid" src="" /> </a> </li> <?php endforeach; ?> <?php if ($imageCounter > 8) break; ?> <?php endforeach; ?> </ul> </section> <?php endif; ?>

Hi @requinix, Thanks for your response, I thought that would be the case! I have worked on it again this morning and got it down to this. <?php $clients = $_w->page->get_field('clients'); $clients_images = array(); $clients_count = count($clients); foreach ($clients as $c) { $image = wp_get_attachment_image_src($c->image->ID, 'full'); if ($image) { $clients_images[] = array( 'url' => $image[0], 'href' => $c->link ); } } $chunk_size = ceil($clients_count / 9); $chunks = array_chunk($clients_images, $chunk_size); ?> <?php if ($clients_images): ?> <section class="image-grid-container"> <script id="hd_client_gallery" type="text/json"> <?= json_encode($clients_images); ?> </script> <ul class="object image-grid gallery"> <?php foreach ($chunks as $chunk): ?> <li> <a <?= ($chunk[0]['href'] ? 'href="'.$chunk[0]['href'].'"' : '' ); ?>> <img class="img-fluid" src="<?= $chunk[0]['url']; ?>" /> <img style="display:none;" class="img-fluid" src="" /> </a> </li> <?php endforeach; ?> </ul> </section> <?php endif; ?> But still seeing duplicated image in the grid, what I think should happen is that each <li> should have it's own list of client logos that it loops through that never changes, that way there should never be any duplicates, I'm just not sure how to achieve this?

Hi, I have literally been working on this for days, I'm a complete novice so just kind of trying everything to get this to work so forgive me if there are lots of unnecessary bits in my code. I'm grabbing a client logo from a WordPress custom field group called clients, there are currently 72 in the list but this will change as some get added and others get deleted. I want the logos to display in a grid of 9 tiles <li>'s But not showing the same logo twice in the grid (ever). So what I have tried is to divide he logos into chunks to show in each <li> but I'm still seeing duplicates, in a var_dump I can see that all the logos displayed withing each <li> are unique so I can only guess when it shuffles it's changing the chunks? I'm not sure but if anyone could improve on what I have done it would help me a ton. <?php $clients = $_w->page->get_field('clients'); // Get the total number of clients $num_clients = count($clients); // Set the number of logos to display in the grid $num_logos = 9; // Get a list of unique random indices within the range of the clients array $indices = UniqueRandomNumbersWithinRange(0, $num_clients - 1, $num_logos); // Sort the indices in row-major order sort($indices); // Create an array to store the unique images $images = array(); foreach ($clients as $c) { $images[] = $c->image->url; } // Loop through the indices and get the corresponding image URLs foreach ($indices as $i) { $image_id = $clients[$i]->image->id; $image = wp_get_attachment_image_src($image_id, 'full'); $images[] = $image[0]; } ?> <?php // Get an array of all image URLs $images = array_map(function ($c) { return $c->image->url; }, $clients); // Remove duplicates from the images array $images = array_unique($images); ?> <?php // Loop through the indices and get the corresponding image URLs foreach ($indices as $i) { $image_id = $clients[$i]->image->id; $image = wp_get_attachment_image_src($image_id, 'full'); $images[] = $image[0]; } if ($images): // divide the array of logos into 9 smaller arrays $chunks = array_chunk($images, ceil(count($images) / 9)); // shuffle the chunks to get a random distribution of logos shuffle($chunks); ?> <section class="image-grid-container"> <script id="hd_client_gallery" type="text/json"> [<?php $total = count($clients); $count = 0; foreach ($clients as $c): echo "{"; echo '"url": "' . $c->image->url . '",'; echo '"href": "' . $c->link. '"'; echo "}"; if(++$count !== $total) { echo ", "; } endforeach; ?>] </script> <ul class="object image-grid gallery"> <?php for ($i = 0; $i < 9; $i++): ?> <?php if (isset($chunks[$i])): ?> <li> <?php foreach ($chunks[$i] as $image_url): ?> <?php // get the client with this image URL $client = null; foreach ($clients as $c) { if ($c->image->url == $image_url) { $client = $c; break; } } ?> <?php if ($client): ?> <a <?= ($client->link ? 'href="'.$client->link.'"' : '' ); ?>> <img class="img-fluid" src="<?= $image_url ?>" /> <img style="display:none;" class="img-fluid" src="" /> </a> <?php endif; ?> <?php endforeach; ?> </li> <?php endif; ?> <?php endfor; ?> </ul> </section> <?php endif; ?> <?php function UniqueRandomNumbersWithinRange($min, $max, $quantity) { $numbers = range($min, $max); shuffle($numbers); return array_slice($numbers, 0, $quantity); } ?> </div> </section>