I have used ACF plugin to add custom post meta box image field. My custom image field name is homepage_full_width.
How can i display post thumbnail image using this custom field image.
thanks.
1
-
This one is my ACF field admin side settings -> nimb.ws/lKmhFeKetan– Ketan2018-02-15 09:40:25 +00:00Commented Feb 15, 2018 at 9:40
Add a comment
|
2 Answers
You can use image ID as the return type of the ACF custom image field then you can use the wp_get_attachment_image() function to generate the image HTML.
$image = get_field('homepage_full_width');
$size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
UPDATE
Use image Object as the return type then try
<?php
$imageBg = get_field('homepage_full_width');
$bg = $imageBg ? $imageBg['url'] : '';
?>
<div class="zl-homefullwidth-img parallax_bg skrollable skrollable-between" style="transform: translate3d(0px, 0.382158%, 0px);background-image: url(<?php echo $bg; ?>)"></div>
2 Comments
Ketan
I have added above code like this and also changed image Object to image ID. But in background url display blank:
<div class="zl-homefullwidth-img parallax_bg skrollable skrollable-between" style="transform: translate3d(0px, 0.382158%, 0px);background-image: url(<?php $image = get_field('homepage_full_width'); $size = 'full'; if( $image ) { echo wp_get_attachment_image( $image, $size ); } ?>)"></div> Ketan
Sorry, Last code also not working. In image url display blank.
You can do it two ways:
you can use the
get_field('homepage_full_width')in your themes php files where you want it, you can see the documention for it hereYou can use and shortcode to display it:
[acf field="homepage_full_width"]
You can read the documention for the shortcode here
5 Comments
zarex360
Which one of the code did you try? and I saw that the shortcode only works with text, so you will need to use the first on
Ketan
Please review my above attached screen shot and i want to display that custom post meta_box image in place of this -> nimb.ws/mFXJ1e post featured image. Thanks.
Ketan
Using bellow code i have displayed post original featured image before:
<div id="lead-article" class="post featured-style10 post-header"> <div data-interchange="[<?php echo $lead_article_img_horizontal_src ?>, landscape], [<?php echo $lead_article_img_vertical_src ?>, portrait]" class="zl-homefullwidth-img parallax_bg skrollable skrollable-between" data-bottom-top="transform: translate3d(0px, -20%, 0px);" data-top-bottom="transform: translate3d(0px, 20%, 0px);" style="transform: translate3d(0px, 0.382158%, 0px);background-image: url(<?php echo $lead_article_img_horizontal_src ?>)"></div>zarex360
Okej, before that code, you can use
<?php $image = get_field('homepage_full_width'); ?> to get the image, and where you have your source you can use <?php echo $image['sizes']['large']; ?> where the last is the size you want. or you can get the original file with <?php echo $image['url']; ?>zarex360
Do you get any errors, or did the did it not do anythings, also can you add the code you tried to run?