Display image from ACF gallery only if it has meta field - php

I have an ACF image gallery and have set up a True / False (1/0) custom field to image attachments named "featured_image". Inside the gallery, several images are selected as the featured image while others are not.
What I would like to achieve is to randomly select one of the images which has the "featured_image" custom field as true.
My code thus far is included below, however I cannot get it to work by selecting only images from the gallery marked as "featured_image", or know how to make the selection random. Help is appreciated!
<?php
$images = get_field('project_documentation', 'option');
if( $images ): ?>
<?php
$i = 0;
foreach( $images as $image ):
$featured = get_field('featured_image', $image['id']);
if ($featured == '1' ) { ?>
<div class="gallery-image">
<img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php } $i++; endforeach; ?>
<?php endif; ?>

Assuming your code snippet worked (but lacks the random element), you could do something like the following.
<?php
$images = get_field('project_documentation', 'option');
if( $images ) {
$featured_images = array();
foreach( $images as $image ) {
$featured = get_field('featured_image', $image['id']);
if ($featured == '1' ) {
$featured_images[] = $image;
}
}
if ( !empty( $featured_images ) ) {
$rand = rand(0, count( $featured_images ));
$image = $featured_images[$rand];
?>
<div class="gallery-image">
<img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php
}
}

Related

ACF Gallery Custom Shortcode

Hello I want to create custom shortcode for ACF gallery. I tried to add the below code in the functions.php in my child theme. But I am getting WordPress critical error.
https://gist.github.com/mwangepatrick/01cbf679c3c9e6256c8483c337c274d3
<?php
add_shortcode('display_acf_gallery', 'acf_gallery');
function acf_gallery ( $atts ) {
if ( empty ( $atts['name'] ) ) return "";
$images = get_field( $atts['name'] );
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<div class="thumbnail" style="float:left;" ><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
<?php endforeach; ?>
<?php endif;
}

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; ?>

ACF gallery show first image and open lightbox on click

I'm trying to create an archive page to show some realisations, which all have a gallery with multiple images. I use ACF to create a gallery and the Simple Lightbox plugin to create the lightbox. I found an example on how to combine both plugins and it's close to what I need, but I can't figure the rest out myself.
Now all images from the gallery are showing, I only need the first image to show and when you click the image I want to open the image in lightbox and have the possibility to go through the gallery this way.
What I have so far:
<?php if ( have_posts() ) {
while ( have_posts() ) { the_post(); ?>
<article id="realisatie-<?php the_ID(); ?>" <?php post_class(); ?> style="background-image: url(<?php echo $images[0] ?>);">
<?php
$images = get_field('realisatie_beelden');
$image_1 = $images[0];
if( $images ) { ?>
<div class="realisatie__gallery" >
<?php foreach( $images as $image ) {
$content = '<a class="gallery_image" href="'. $image .'">';
$content .= '<img src="'. $image .'" alt="'. $image .'" />';
$content .= '</a>';
if ( function_exists('slb_activate') ) {
$content = slb_activate($content);
}
?>
<?php } ?>
</div>
<?php } ?>
</article>
<?php }
} ?>
Thanks to a comment, I found a solution that works for me.
I only display an image for the first element, the other links are left empty.
<?php if ( have_posts() ) {
while ( have_posts() ) { the_post(); ?>
<article id="realisatie-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
$images = get_field('realisatie_beelden');
$image_1 = $images[0];
if( $images ) { ?>
<?php
$i = 0;
foreach( $images as $image ) {
if ($i >= 1) {
$content = '';
} else {
$content = '<a href="'. $image .'">';
$content .= '<img src="'. $image .'" />';
$content .= '</a>';
$i++;
}
if ( function_exists('slb_activate') ) {
$content = slb_activate($content);
}
echo $content;
?>
<?php } ?>
<?php } ?>
</article>
<?php }
} ?>

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; ?>

Categories