Adding Links To Images

• mumford

• February 28, 2015 at 1:07 am

Hi

I have created a repeater field with an image and a text title.

How do I add a link to the image that goes to any WordPress page that I want to select.

The same for the title link.

Below is my code

<?php while ( have_posts() ) : the_post(); ?>
<?php the_field('locations' ); ?>
<section class="section-light-grey text-center">
	<div class="container">
		<div class="row">
			<?php if( have_rows('locations_repeater') ): ?>
			<?php while ( have_rows('locations_repeater') ) : the_row(); ?>
			<div class="col-xs-4">
				<div class="img-home-location">
					<img src="<?php the_sub_field('location_image'); ?>" alt="" />
					<h3><?php the_sub_field('location_title'); ?></h3>
				</div>
			</div>
			<?php endwhile; ?>
			<?php endif; ?>
		</div>
	</div>	
</section>

Many Thanks for you help

• mumford

• March 1, 2015 at 1:58 am

Hi

Or Do I just create a wysiwyg field, add image and link it to wordpress page?

I hope not, their must be a simpler way?

Thanks

• mediawerk

• March 2, 2015 at 6:54 pm

insert a relationship field, or a page-link field inside your repeater.
and get the value of that field and wrap your image with that link.

easier is if you use page-link. because value will return the post’s url (permalink).

with relationship you have more options, because you are able to get any value from linked post (permalink, acf-fields, …) but it is not necessary to use it when you anyway only need the permalink.

• mumford

• March 2, 2015 at 7:12 pm

Hi

Many thanks for your response, I think I have it working now lease see below code is this correct?

<?php while ( have_posts() ) : the_post(); ?>
<?php the_field('locations' ); ?>
<section class="section-light-grey text-center">
	<div class="container">
		<div class="row">
			<?php if( have_rows('locations_repeater') ): ?>
			<?php while ( have_rows('locations_repeater') ) : the_row(); ?>
			<div class="col-xs-4">
				<div class="img-home-location">
					<a href="<?php the_sub_field('image_link'); ?>">
						<img src="<?php the_sub_field('location_image'); ?>" alt="" class="img-responsive" />
					</a>
					<h3><?php the_sub_field('location_title'); ?></h3>
				</div>
			</div>
			<?php endwhile; ?>
			<?php endif; ?>
		</div>
	</div>	
</section>

<?php endwhile; ?>