Adding Featured Gallery to Pinbin theme

To make sure I understand what you want to do, from reading the above, you want to change the main index.php template (which shows the list of blog posts) so that instead of showing one image, it shows a gallery, correct?

Are you shooting for something where there is the one image, and it changes on a timer? Or with arrows floating? If you can provide more details I can see about working something up.

Please note, for anything other than a static gallery (grid of thumbnails), you’ll need JS, and a bunch of CSS.

You got it!

I was thinking one image at a time, with floating arrows.

To be more specific I really want the slide gallery to show up on single.php, so if you could sort that out that would be fantastic.

Pinbin displays posts in floating blocks, like ‘cards’, with a featured image at the top and an except. The layout is dynamic.

When you click on a ‘card’ it takes you to the single page. The problem is that the featured image is at the top of the post and is massive (takes up a lot of space). I thought it would be cool to have multiple images at the top instead of one. Basically acting as a gallery for that post.

Thanks for getting back to me on this.

Okay, the first thing you have to do it create the HTML/CSS/JS gallery structure, using filler images. For what you describe, I would typically go with a wrapper parent, then a bunch of img elements, or a bunch of divs with inline style setting background-image.

Once your gallery is up and running, you can start getting real images from Featured Galleries.

I’ll show you an example structure (that I created to use on this page: https://www.rmasurveying.com/services/featured-projects/walnut-commons/?d=198 ), and then walk you through the Featured Galleries PHP code that went into the PHP template.

div class="galleryframe">
    <img style="background-image:url();>
    <img style="background-image:url();>
    <img style="background-image:url();>
    <img style="background-image:url();>
    <button class="arrow left"></button>
    <button class="arrow right"></button>
    <button class="nav selected"></button>
    <button class="nav"></button>
    <button class="nav"></button>
    <button class="nav"></button>
  </div>

The PHP:

$galleryArray = get_post_gallery_ids(get_the_ID());
$y = count($galleryArray);

    $returnedContent .= '<div class="galleryframe" data-selected="1" data-total="'.$y.'">';

        foreach ($galleryArray as $imageID) { $imageArray = wp_get_attachment_image_src( $imageID, 'large', 0 );

            $returnedContent .= '<img style="background-image:url('.$imageArray[0].'); z-index:'.$y.'" data-order="'.$z.'">';

        $z++; $y--;}

        if ($z > 2) {

            $returnedContent .= '<button class="arrow left">?</button>';

            $returnedContent .= '<button class="arrow right">?</button>';

            foreach ($galleryArray as $imageID) { $y++;

                $returnedContent .= '<button class="nav'.($y==1 ? ' selected' : '').'" data-image="'.$y.'"></button>';

            }

        }

    $returnedContent .= '</div>';

The reason it is adding to a PPH variable is because it’s in a function which is called from the theme.

Thank you so much for doing this!

Philip