Wordpress : ACF image not showing - php

i try to display image but with Basic display (Object) but no showing
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>

It depends on what you set as the return value
Image Array will output as you have done
Image URL will return a string of the URL
Image ID will return the ID, so you'd need additional lookups to get the URL
If you are using this outside a loop then you must pass the post ID get_field('image', $post_id);
If it is a taxonomy term and not a post/page then you must pass a prefix get_field('image', 'category_' . $cat_id );

From the ACF docs:
http://www.advancedcustomfields.com/resources/image/
<?php
$image = get_field('image');
if( !empty($image) ):
// vars
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
// thumbnail
$size = 'thumbnail';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];
if( $caption ): ?>
<div class="wp-caption">
<?php endif; ?>
<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
</a>
<?php if( $caption ): ?>
<p class="wp-caption-text"><?php echo $caption; ?></p>
</div>
<?php endif; ?>
<?php endif; ?>
Using Object with the image field is more powerful, as it provides access to additional data, but requires a bit more work.
You may want to change the ACF field type to Image URL, which will return just the URL of the image, and can be inserted directly into your code
Hope this helps
D

Related

pass page specific ACF image array values outside of the loop

I have some ACF(advanced Custom Fields) image values that I display in an include file outside of the main loop. The ACF image is stored as an array, so I would like to display the array values, for example URL, alt tag, size , ect..
This is my code
<?php
global $wp_query;
$postid = $wp_query->post->ID;
$callout_image = get_post_meta($postid, 'callout_image', true);
wp_reset_query();
?>
<?php if( !empty( $callout_image ) ): ?>
<img src="<?php echo esc_url($callout_image['url']); ?>" alt="<?php echo esc_attr($callout_image['alt']); ?>" />
<?php endif; ?>
the error is
Warning: Illegal string offset 'url' in
What am I doing wrong?
UPDATE: Fixed code
<?php
global $wp_query;
$postid = $wp_query->post->ID;
$callout_image = get_field('callout_image', $postid);
wp_reset_query();
?>
<?php if( !empty( $callout_image ) ): ?>
<img src="<?php echo esc_url($callout_image['url']); ?>" alt="<?php echo esc_attr($callout_image['alt']); ?>" />
<?php endif; ?>
https://www.advancedcustomfields.com/resources/image/
<?php
$image = get_field('image');
if( $image ):
// Image variables.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
// Thumbnail size attributes.
$size = 'thumbnail';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];
// Begin caption wrap.
if( $caption ): ?>
<div class="wp-caption">
<?php endif; ?>
<a href="<?php echo esc_url($url); ?>" title="<?php echo esc_attr($title); ?>">
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</a>
<?php
// End caption wrap.
if( $caption ): ?>
<p class="wp-caption-text"><?php echo esc_html($caption); ?></p>
</div>
<?php endif; ?>
<?php endif; ?>

Display a second WooCommerce image from product gallery on the loop

i'm using this code to display woocommerce thumb:
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'single-post-thumbnail' );?>
<img src="<?php echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">
But looking solution how to display second image from product gallery. How to modify this code?
Updated: The following will display a second image from product gallery (first image):
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">
<?php
// Get gallery images IDs
if( $gallery_image_ids = get_post_meta( $loop->post->ID, '_product_image_gallery', true ) ) :
// Convert a coma separated string of Ids to an array of Ids
$gallery_image_ids = explode(',', $gallery_image_ids);
// Display the first image (optional)
?><img src="<?php echo wp_get_attachment_image_url( reset($gallery_image_ids), 'single-post-thumbnail'); ?>" data-id="<?php echo $loop->post->ID; ?>">
<?php
// Display the 2nd image (if it exists)
if( isset( $gallery_image_ids[1] ) ) :
?><img src="<?php echo wp_get_attachment_image_url( $gallery_image_ids[1], 'single-post-thumbnail'); ?>" data-id="<?php echo $loop->post->ID; ?>">
<?php endif; ?>
<?php endif; ?>
Related : How to show all images in WooCommerce product description

ACF gallery images urls

I am using Advanced Custom Fields gallery in a custom post type;
I have managed to display images (thumbnails) added to the gallery using the following code
$images = get_field('gallery'); if( $images ): $images = explode(',', $images); $images = array_filter($images); if( count($images)):
?>
<ul>
<?php foreach( $images as $image ): $alt = get_the_title($image); $url = ```this is where I'm stuck``` ?>
<li>
<a href="<?php echo $url; ?>" title="<?php echo $alt; ?>">
<?php echo wp_get_attachment_image($image, "thumbnail", false, ['alt' => $alt]); ?>
</a>
</li>
<?php endforeach; endif; ?>
</ul>
<?php endif; ?>
How can I get urls of the images?
I have tried
<?php echo $image['url']; ?>
but it didn't work
Install this plugin: https://wordpress.org/plugins/lightbox-photoswipe/
Use Code below:
$images = get_field('gallery');
if( $images ):
$images = explode(',', $images);
$images = array_filter($images);
if( count($images)): ?>
<ul>
<?php foreach( $images as $image ):
$alt = get_the_title($image);
$imageUrlFull = wp_get_attachment_image_url( $image, 'full' ) ?>
<li>
<a href="<?php echo $imageUrlFull ?>" title="<?php echo $alt; ?>">
<?php echo wp_get_attachment_image($image, "thumbnail", false, ['alt' => $alt]); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php endif; ?>
Other guys also gave good tips hovewer if u like lightbox it depends from js what attributes or classes are used to create lightbox. Cheers.
First, you should make sure your custom field return value is set to "Image Array". This is a common mistake. If that is set correctly, you should be able to do the following. I assume if you're using a lightbox solution of some kind, you may need to add a class to your <a> tag. Either way, this should display the images successfully:
<?php
$images = get_field('gallery');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<a href="<?php echo $image['url']; ?>" title="<?php echo $image['alt']; ?>" >
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Should be pretty straight forward. You get it the same way you got the thumbnail image.
Resource:
https://www.advancedcustomfields.com/resources/gallery/
<?php
$images = get_field('gallery');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $images ): ?>
<ul>
<?php
foreach( $images as $image_id ):
echo '<li data-lightbox="' . wp_get_attachment_image_src($image_id, 'full'). '">';
echo '<img src="' . wp_get_attachment_image_src( $image_id, 'thumb' ) . '">';
echo '</li>';
endforeach;
?>
</ul>
<?php endif; ?>

How to display images of a post in random order - Wordpress

I have a page in my wordpress, in which I have added three images via the "add media" button.
Now, I am looking for a way to display these images one at a time and in a random order.
Just guessing that I would have to call the_content of the page and write some PHP to display the images one at a time in random order? But since I don't know how to write such a function, some help would be huge!
You can find many plugins for this.
https://wordpress.org/plugins/tags/random-image/
OR
if you use custom post type then this might be help full to you.
Use array_unique() before foreach:
<?php while ( have_posts() ) : the_post();
$images = get_field('gallery');
// thumbnail
if( $images ):
?>
<ul id="container" class="tiles-wrap animated">
<?php
$images = array_rand($images);
$images = array_unique($images);
foreach( $images as $image ):
// $rand_class = array('small', 'medium', 'large');
$size = 'medium';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ]; ?>
<li><img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" /></li>
<?php endforeach;
endif; ?>
</ul>
<?php endwhile; ?>

Wordpress : ACF image not showinhttp://stackexchange.com/g correctly

I have an issue trying to display an image. I use last ACF
but not showing image
when i take look in html i get this :
<img src="2119, , , , , image/jpeg, /wp-content/uploads/2016/02/ef51d8e8f5cf684e7654f0ea4ab7ce33.jpg, 1024, 681, Array" alt="">
my name slug is hotes
<span><img src="<?php the_field('hotes',256); ?>" alt="" /><span>
the post meta for image is an array of data containing url, height, width etc.
based on the docs,
http://www.advancedcustomfields.com/resources/code-examples/
http://www.advancedcustomfields.com/resources/image/
you should be doing it like this,
<?php $image = wp_get_attachment_image_src(get_field('image_test'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('image_test')) ?>" />
or this way,
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
or by using native get_post_meta function
$image = get_post_meta(get_the_ID(), 'hotes'); // Get Image Object
$image_url = $image['url']; // Retrieve image url

Categories