Support

Account

Home Forums Front-end Issues Getting image url from image ID

Solving

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 } ?>
  • style="background-image:url('<?php echo $hero['url']; ?>'); ?

  • 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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.