Getting image url from image ID

• egr103

• October 28, 2014 at 3:13 am

All I’m trying to do is get the source URL from an Image ID but literally have no clue how to do this. Could someone help? This is my code and it outputs the entire <img src="etc" /> tag yet all I want is the URL at the size of large:

<?php 

$hero = get_field('hero_bg');
$size = 'large'; 
if( $hero ) { ?>
	
<div class="c-1 hero bg-image" style="background-image: url('<?php echo wp_get_attachment_image( $hero, $size ); ?>');">
	
	<div class="center-wrapper">
		<div class="center">
			<h1 class="cheddar"><?php the_title(); ?></h1>
		</div>
	</div>
	
</div>
	
<?php } ?>

• Ben

• October 28, 2014 at 11:16 am

style="background-image:url('<?php echo $hero['url']; ?>'); ?

• egr103

• October 28, 2014 at 7:56 pm

Thanks @Ben but this only works if I I change the image field to an array from an ID. Plus, the main reason for me using this approach is to customise the size of the image so that it adheres to dimensions defined in Settings > Media.

I want the image to display using the dimensions I have set for ‘large’.

• corygibbons

• November 2, 2014 at 4:53 pm

I think this is what you’re looking for: <?php echo $hero['sizes']['large']; ?>

• jjma

• August 30, 2016 at 7:31 pm

I tried the above change but the url is not been shown at all – the title works?

<?php

$back = get_field('bg_image');
$size = 'full';
if( $back ) { ?>

<div class="bg-image" style="background-image: url('<?php echo $back['sizes']['full'];?>');">

  <div class="center-wrapper">
     <h1><?php the_title(); ?></h1>
  </div>
</div>

<?php } ?>

• John Huebner

• September 1, 2016 at 3:38 am

@egr103 If you are returning an image ID then what you’re doing should work, try echoing the value to see what’s there. There is one case where it would fail, and that’s if there is no image for ‘large’ and this can happen if the uploaded image is smaller than the dimensions set for ‘large’. In other words, of large is set an 1000×1000 and you upload an image that is 800×800, there will be no large image and WP could be returning nothing.

<?php 

$hero = get_field('hero_bg');
$size = 'large'; 
echo 'IMAGE ID ="',$hero,'" URL = "',wp_get_attachment_image( $hero, $size ),'"';
if( $hero ) { ?>
	
<div class="c-1 hero bg-image" style="background-image: url('<?php echo wp_get_attachment_image( $hero, $size ); ?>');">
	
	<div class="center-wrapper">
		<div class="center">
			<h1 class="cheddar"><?php the_title(); ?></h1>
		</div>
	</div>
	
</div>
	
<?php } ?>

• jjma

• September 27, 2016 at 11:53 pm

This works for echoing out the image field but the css is not working as the width and height are being added to the inline style:

<div class="c-1 hero bg-image" style="background-image: url('<img width=" 1024"="" height="256" src="https://devel.launchsite.co.uk/wp-content/uploads/2016/08/drama-holding-1-1024x256.jpg" alt="drama-holding" srcset="https://devel.launchsite.co.uk/wp-content/uploads/2016/08/drama-holding-1-1024x256.jpg 1024w, https://devel.launchsite.co.uk/wp-content/uploads/2016/08/drama-holding-1-300x75.jpg 300w, https://devel.launchsite.co.uk/wp-content/uploads/2016/08/drama-holding-1-768x192.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px">');">
  
  <div class="center-wrapper">
    <div class="center">
      <h1 class="cheddar">Drama</h1>
    </div>
  </div>
  
</div>

Using your example above. Do I need to set this line to something else:

<div class="c-1 hero bg-image style="background-image: url('<?php echo wp_get_attachment_image( $hero, $size ); ?>');">

regards,

Jon

• John Huebner

• September 28, 2016 at 7:01 am

This code is echoing out an entire image tag

<?php echo wp_get_attachment_image( $hero, $size ); ?>

What you want to do would be more like

<?php
  $image = wp_get_attachment_image_src($hero, $size);
?>
<div class="c-1 hero bg-image" style="background-image: url('<?php 
     echo image[0]; ?>');">

...

</div>

• jjma

• September 28, 2016 at 8:27 pm

Thank-you. That worked if I set the return value for the image field to a url.

Is their a way to use the responsive elements in wordpress core to create smaller versions of the image.

Again thanks for your help.

Jon

• John Huebner

• September 28, 2016 at 10:10 pm

To do the same thing with ACF that WP does with images in the content area is possible, but will be some work. Basically you need to build an srcset for the image. It was done in WP by incorporating this plugin into core https://wordpress.org/plugins/ricg-responsive-images/. You should probably start there and look at the code. You may even be able to use the same filter and get WP to build the srcset for you. I haven’t done this. While I know it’s possible it will take some work to get it done.

• jjma

• September 28, 2016 at 10:12 pm

Thanks.