How to display sub field (image) with shortcode in WordPress?

These are the custom fields composition:

1 Group Footer

1.1 Group Col2

1.1.1 bbcimg (this is the image ID)

1.1.2 bbc-rss (this is the RSS feed ID)

I have the following code displaying the bbc-rss:

<div class="col-md-3">
               <?php
                $footer = get_field('footer'); // 'footer' is your parent group
                $col2 = $footer['col2']; // 'col2' is your child group
                ?>
                <div class="widget_item widget_latest sm-m-top-50">
                    <h4 id="white" class="text-white">Latest News</h4>
                    <div class="widget_latst_item m-top-30">
                        
                        <div class="item_icon"><img src="<?php bloginfo('template_directory');?>/img/rss/bbc_rss.png" alt="" /></div>
                        <div id="gris" class="widget_latst_item_text">
                            <p><?php echo $col2['bbc-rss'];?></p>

                        </div>
                    </div>
                    <div class="widget_latst_item m-top-30">
                        <div class="item_icon"><img src="<?php bloginfo('template_directory');?>/img/rss/reuters_rss.png" alt="" /></div>
                        <div id="gris" class="widget_latst_item_text">
                            <p><?php echo $col2['reuters-rss'];?></p>

                        </div>
                    </div>
                    <div class="widget_latst_item m-top-30">
                        <div class="item_icon"><img src="<?php bloginfo('template_directory');?>/img/rss/cnbc.jpg" alt="" /></div>
                        <div id="gris" class="widget_latst_item_text">
                            <p><?php echo $col2['cnbc-rss'];?></p>

                        </div>
                    </div>
                </div><!-- End off widget item -->
            </div><!-- End off col-md-3 -->

I have created the image field bbcimg with the following properties:

Field label: bbcimg
Field Name: bbcimg
Field Type: image
Instructions: –
Required: No
Return Format: Image Array
Preview Size: Medium(300×300)
Library: All
Minimum: Width 40px, Height px 40 File size – MB
Minimum: Width – px, Height px – File size – MB
Allowed file types: –
Conditional Logic: –
Wrapper Attributes: –

And the image is already uploaded in the custom field. See picture:

Question:

How to write the logic to display the picture on the website?

Thank you very much in advance!

been trying to use

Answer

First you need to find out what is getting returned inside the custom field. Add a good old print_r to your code somewhere:

<?php print_r($col2['bbcimg']) ?>

That will print out an array of values like Array( ‘url’ => ‘http….something.jpg’, ‘size’=>’full’, ..etc)

Then you can identify which array value gives you the full URL to the image. Say in this case it would be a field called url, then you can use that value as follows:

<div id="gris" class="widget_latst_item_text">
     <img src="<?php echo $col2['bbcimg']['url']; ?>" alt=""/>
     <p><?php echo $col2['bbc-rss'];?></p>
</div>

Advertisement

Answer