How to display sub field (image) with shortcode in Wordpress? - php

Question

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(300x300)
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 1

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>