Image not showing up on frontend in acf wordpress plugin

I’m using the acf plugin for adding custom fields in my posts.i have to upload 3 images into post as custom fields.when i have taken them as a text field and paste their URL to custom text fields these are working fine and showing up on my frontend.

Here is the code for that:

Read More
<?php $image1=get_post_meta($post->ID, 'image1', true); ?>
<?php $image2=get_post_meta($post->ID, 'image2', true); ?>
<?php $image3=get_post_meta($post->ID, 'image3', true); ?>
<ul class="slides">
  <li style="list-style:outside none;"><img src="<?php echo $image1; ?>" /></li>
  <li style="list-style:outside none;"><img src="<?php echo $image2; ?>" /></li>
  <li style="list-style:outside none;"><img src="<?php echo $image3; ?>" /></li>
</ul>

But when i take the image field as image type its showing nothing in frontend and in the img src its showing only the image id as src=”12″.

How can i call the image to show that on my frontend.

Related posts

Leave a Reply

1 comment

  1. When you use the image field in ACF it returns an image-object as default. If you just want it to return the src, change it in the field setting.
    Or you could keep using the object and get necessary data like this:

    $image1 = get_field('image1'); // get field is acf-function for getting field-meta, takes two arguments, field slug and id of post (optional).
    if($image1) {
        $image_url = $image1['url']; // Full path to original file
        $custom_image_size = $image1['sizes']['your_custom_size'] // Grabs custom size (or default ones such as 'thumbnail' or 'medium'
        $image_alt = $image1['alt']; // Grabs alt text
    
        // And you could output it like this.
        ?>
        <img src="<?= $image_url; ?>" alt="<?= $image_alt; ?>" />
        <?php
    }
    

    You should really look into the plugin “Repeater-field” for acf for building slides, lets you dynamically add remove slides in the backend, so you dont need to have a static amount of fields for different slides.