Home › Forums › Front-end Issues › Getting image url from image ID
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 } ?>
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’.
I think this is what you’re looking for: <?php echo $hero['sizes']['large']; ?>
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 } ?>
@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 } ?>
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
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>
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
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.
The topic ‘Getting image url from image ID’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.