Shortcode for Reddit User

shortcode-for-reddit.php

function render_acf_gallery_shortcode() {
  if ( ! have_rows( 'gallery' ) ) {
    return '<p>No gallery items found.</p>';
  }

  $thumbnails = '';
  $images = [];
  $infos = [];

  while ( have_rows( 'gallery' ) ) {
  the_row();
    $image = get_sub_field( 'image' );
    $info  = get_sub_field( 'image_info' );

    if ( $image ) {
      $thumb_url = esc_url( $image['sizes']['thumbnail'] );
      $full_url  = esc_url( $image['url'] );
      $alt       = esc_attr( $image['alt'] );

      $images[] = $full_url;
      $infos[]  = wp_kses_post( $info );

      $index = count( $images ) - 1;

      $thumbnails .= '<div class="acf-thumb" data-index="' . $index . '"><img src="' . $thumb_url . '" alt="' . $alt . '" /></div>';
    }
  }

  if ( empty( $images ) ) {
    return '<p>No valid images found.</p>';
  }

  $initial_img = $images[0];
  $initial_info = $infos[0];

  ob_start();
?>

<div class="acf-gallery-wrapper">
  <div class="acf-thumbs">
    <?php echo $thumbnails; ?>
  </div>
  <div class="acf-main">
    <div class="acf-photo">
      <img id="acf-main-img" src="<?php echo esc_url( $initial_img ); ?>" alt="Selected image" />
    </div>
    <div class="acf-info" id="acf-main-info">
    <?php echo $initial_info; ?>
    </div>
  </div>
</div>

<style>
.acf-gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.acf-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.acf-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}
.acf-thumb.active img {
  border-color: #007cba;
}
.acf-main img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .acf-gallery-wrapper {
    flex-direction: row;
  align-items: flex-start;
  }
  .acf-thumbs {
    display: flex;
    flex-direction: column;
    width: 20%;
  }
  .acf-thumb img {
    margin-bottom: 0.5rem;
  }
  .acf-main {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 80%;
  }
  .acf-photo {
    width: 50%;
  }
  .acf-info {
    width: 50%;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const thumbs = document.querySelectorAll(".acf-thumb");
  const mainImg = document.getElementById("acf-main-img");
  const mainInfo = document.getElementById("acf-main-info");
  const images = <?php echo json_encode( $images ); ?>;
  const infos = <?php echo json_encode( $infos ); ?>;

  thumbs.forEach(thumb => {
    thumb.addEventListener("click", function () {
      const index = parseInt(this.getAttribute("data-index"));

      mainImg.src = images[index];
      mainInfo.innerHTML = infos[index];

      thumbs.forEach(t => t.classList.remove("active"));
      this.classList.add("active");
    });
  });

  if (thumbs.length > 0) {
    thumbs[0].classList.add("active");
  }
});
</script>

<?php
return ob_get_clean();
}
add_shortcode( 'acf_gallery', 'render_acf_gallery_shortcode' );