How to link an image field to an external URL

• shaundvine

• December 12, 2015 at 9:05 am

Does anyone know how to add and external link to an image that has been uploaded to a post/page? This would not be a gallery.

I have created an image field that allows the user to upload an image; I also want to give them the option to enter an external URL so that when the image is clicked it will take them to that url.

Thanks,
Shaun.

• John Huebner

• December 14, 2015 at 2:51 am

You need to provide two fields, an image field and some other field that lets them enter a URL. Then on the front end you need to build the html for the link yourself.

• shaundvine

• December 15, 2015 at 4:20 am

Hi John,
Thanks for your reply. So, that is what I am struggling with is the code on the front end. Not sure how to wrap the image field in the external URL field????

<? How to link this image field to an External URL
<?php
$image = get_field(‘image’);
if( !empty($image) ): ?>
” alt=”<?php echo $image[‘alt’]; ?>” />

<?php endif; ?>

?>

• John Huebner

• December 15, 2015 at 11:01 am

I can’t read you code, it appears that the editor has removed parts of it. Can you please re-post it and surround it in code tags (click “code” in the toolbar)

• shaundvine

• December 16, 2015 at 10:37 am

Hi John,

That is the complete code I have so far, I am not sure what the code would look like in the “<? How to link this image field to an External URL”
section.

`<? Not sure what code needs to go here to link the image field to an External URL

<?php
$image = get_field(‘image’);
if( !empty($image) ): ?>
” alt=”<?php echo $image[‘alt’]; ?>” />
<?php endif; ?>

?>

Thanks,
Shaun.

• John Huebner

• December 16, 2015 at 10:50 am

Using the value returned from an image object is covered on this documentation page http://www.advancedcustomfields.com/resources/image/

Create a URL and an image field, I’ll call them image and url

<?php 
 $image = get_field('image');
  if (!empty($image)) {
    $url = get_field('url');
    ?>
      <a href="<?php echo $url; ?>" target="_blank"><img src="<?php 
          echo $image['url']; ?>" alt="<?php 
          echo $image['alt']; ?>" /></a>
    <?php 
  }
?>

• shaundvine

• December 16, 2015 at 12:09 pm

Thanks so much for your help John. I have been struggling to figure this out. Works like a charm! Thanks for the link to the post too.

Shaun.

• vld06

• November 16, 2020 at 9:24 pm

Hello, guys! I’m new with wordpress. Can you please tell me where should I paste this code to get a clickable link? Thanks a lot.

• John Huebner

• November 16, 2020 at 11:37 pm

It goes in the template file where you want the image/link shown

• vld06

• November 16, 2020 at 11:47 pm

You mean exactly in template.php?