Как сделать галлерею изображений с помощью плагина ACF?

Question

[gretyl007]

Добрый день.
В html версии есть галлерея изображений. При наведении мышки на изображение появляются заголовок и две иконки-ссылки (одна ссылка ведет на другую страницу, вторая - открывает полноразмерную картинку). (галерея на скрине)



Как перенести эту галлерею в wordpress. пыталась делать с помощью репитера, один филд - для картинки, другой - для заголовка. Но появляется вопрос:
У каждой картинки иконки находятся в разных ссылках. Как их прописать?

Мой код с ипсользованием акф:

<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

[Орхан Гасанлы]

Здравствуйте!
Да, repeater отлично подойдет для этого.
Вам понадобится:
1 repeater с полями:
- изображение
- url (для иконки, которая ведет на другую страницу).

А далее ваш код:

<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>

По сути в иконку, которая ведет на полноразмерную картинку дублируете ссылку <?php echo $image['url']; ?>
А в иконку, которая ведет на страницу добавьте кастомное поле. Например,
<?php the_sub_field('page_link');?>

Только небольшая рекомендация. У вас сейчас вместо миниатюр тоже полноразмерная картинка загружается. Соответсвенно надо в

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

передать урл миниатюры.