John Davidson

php - Wordpress ACF and slick slider link on image

0 comments
Message:


I have Slick Slider built in with ACF in wordpress, the images and slider work, trying to now wrap the image in a link so each image can link out to a set page.
at the moment it just links to the home url, Im not sure what im doing wrong in the code, any help is useful.


  <h3 class="pb-3"><?php the_field('slider-text', false, false) ?></h3>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<?php if (have_rows('slides')): ?>
<div class="slides"
data-slick='{"slidesToShow": 5, "slidesToScroll": 1, "autoplay": true, "autoplaySpeed": 2000, "dots": true}'>
<?php while (have_rows('slides')): the_row();
$image = get_sub_field('image');
$link = get_sub_field('link');
?>
<div class="col">
<a href="<?php ($link['id']); ?>">
<?php echo wp_get_attachment_image($image['id'], 'full'); ?>
</a>
</div>
<?php endwhile; ?>
</div>
<?php else: ?>

<?php endif; ?>
</div>


My Answer:
To add a link to each image in the Slick Slider, you can modify the ACF loop in your WordPress template file to include the link. Here's an example of how you can achieve this:

php

$images = get_field('slider_images');
if( $images ):
foreach( $images as $image ): ?>

<?php echo $image['alt']; ?>

endif; ?>



In this code snippet, we are wrapping each image in the Slick Slider with an anchor tag `` that links to a specific page. You can replace `123` with the ID of the page you want to link to. This will create a clickable link around each image in the slider.

Make sure to replace `slider_images` with the name of your ACF field that contains the images. Also, ensure that you have set up the ACF field correctly to display the images in the slider.

Once you have added this code to your template file, each image in the Slick Slider should now be clickable and link to the specified page.

Rate this post

3 of 5 based on 5217 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us