How to make an image gallery using the ACF plugin?

Question

JavaScript

Good afternoon.
The html version has an image gallery. When you hover the mouse over the image, a title and two link icons appear (one link leads to another page, the second opens a full-sized image). (gallery on the screen)



How to transfer this gallery to wordpress. tried to do with the help of a repeater, one field - for the picture, the other - for the title. But the question arises:
Each picture has icons in different links. How to prescribe them?

My code using akf:

<div id="portfoliowrap">
        <div class="portfolio-centered">
            <div class="recentitems portfolio">
            	<?php 
    
          if( have_rows('gallery') ):

            while( have_rows('gallery') ) : the_row(); 
                        
               ?>
              <div class="portfolio-item graphic-design">
                <div class="he-wrap tpl6">
                  <?php 

                    $image = get_sub_field('image');

                    if( !empty($image) ): ?>

                      <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

                    <?php endif; ?>

                    <div class="he-view">
                      <div class="bg a0" data-animate="fadeIn">
                          <h3 class="a1" data-animate="fadeInDown"><?php the_sub_field('title'); ?> </h3>
                                     <a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_09.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
                                					<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-link"></i></a>
                      </div>
                    </div>

                </div>
              </div>
      <?php
                      
          endwhile;

  endif;

  ?>
</div>
</div>
</div>

Answer 1

Hello!
Yes, repeater is great for this.
You will need:
1 repeater with fields:
- image
- url (for an icon that leads to another page).
And then your code:

<div id="portfoliowrap">
  <div class="portfolio-centered">
    <div class="recentitems portfolio">
    	<?php if( have_rows('gallery') ):
            while( have_rows('gallery') ) : the_row();       
      ?>
      <div class="portfolio-item graphic-design">
        <div class="he-wrap tpl6">
          <?php $image = get_sub_field('image');
            if( !empty($image) ): ?>
              <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
            <?php endif; ?>
            <div class="he-view">
              <div class="bg a0" data-animate="fadeIn">
                  <h3 class="a1" data-animate="fadeInDown"><?php the_sub_field('title'); ?></h3>
                    <a data-rel="prettyPhoto" href="<?php echo $image['url']; ?>" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
                    <a href="<?php echo get_sub_field('page_link');?>" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-link"></i></a>
              </div>
            </div>
        </div>
      </div>
<?php endwhile; endif; ?>
    </div>
  </div>
</div>

In fact, in the icon that leads to the full-size image, duplicate the link <?php echo $image['url']; ?>
A in the icon that leads to the page, add a custom field. For example,
Just a small recommendation. Now instead of thumbnails, you also have a full-size picture loaded. Accordingly, it is necessary

<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

pass thumbnail url.