I have ACF set up in WP with a Gallery field. Currently I am displaying my images as follows:
<p><?php echo get_the_content(); ?></p>
<?php $images = get_field('gallery_images');
if( $images ): ?>
<div>
<ul>
<?php foreach( $images as $image ): ?>
<li class="portrait float">
<img src="<?php echo $image['url']; ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif;
?>
I have also installed the Simple Lightbox Plugin but have been unsuccessful so far. How do I add the URL link of my ACF Gallery images. I have tried wrapping my image tag in a link tag with rel="lightbox" and several other variations including:
<img rel="lightbox[gallery_images] src="<?php echo $image['url']; ?>" />
Is there any way I can enable Attachment Display Settings for my ACF Gallery images in my WP post. I think this might be handy to have?
Any help is much appreciated :)
I used the following which worked.
<img rel="lightbox[gallery_images]" src="<?php echo $image['url']; ?>" />
All my images are full size so didn't need the following at all:
echo $image_large[0];
Related
Can Somebody Help how to pull alt text from wordpress images in the following code??
<?php $logos = get_field('upload_logos');
$size = 'full';
if( $logos ): ?>
<div>
<div>
<?php foreach( $logos as $logo ): ?>
<div>
<div class="ccrc-logo-box-inner"><img src="<?php echo wp_get_attachment_url( $logo['ID'], $size ); ?>" alt=""></div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
You are using get_field() function, so I guess you have 'Advanced Custom Fields' plugin. You want to get the data of a field with type of image. So looking at the documentation:
https://www.advancedcustomfields.com/resources/image/
You can access the alt text from the field object, the same way you already did it with $logo['ID'] before.
<img src="<?php echo wp_get_attachment_url( $logo['ID'], $size ); ?>" alt="<?php echo $logo['alt']; ?>">
You are using the wp_get_attachment_image() function to output your url
Documentation of wordpress tells us you can pass the alt as a parameter to fetch and output it:
https://developer.wordpress.org/reference/functions/wp_get_attachment_image/#parameters
I created a pop-up lightbox gallery in WordPress using Advanced Custom Fields and while all of the base functionality works, for some reason the lightbox appears to be showing all photos attached to the gallery_photos field across multiple posts instead of just the photos attached to the single post.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery" id="post-gallery-<?php echo get_the_ID(); ?>">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
You can see a sample of how this is working at the following link to the dev site. There's a list of products, defined as a custom post type, and each product has an associated lightbox gallery of photos accessible via the camera icon at the end of each row.
However, if you click the icon you'll actually see photos for all products, not just the one you clicked. Any idea what I'm doing wrong?
I'm trying to create a fancybox slideshow that pops up when you click on one thumbnail. I'm using Advanced Custom Fields with Gallery Field.
This is what I have;
<?php
$images = get_field('gallery');
$image_1 = $images[0];
?>
<a href="<?php echo $images['url']; ?>" rel="fancybox">
<img src="<?php echo $image_1['url']; ?>" /></a>
Unfortunately, nothing happens when you click on the image…
Any leads?
Thanks!
As Pranita said you should be using a for loop for generating the gallery.
If this display more thumbnails than you want, you can simply build your HTML/CSS so that every thumbnail, except the first, is hidden.
Use this, from the official documentation, and customize it to your needs.
<?php $images = get_field('gallery');
if( $images ) : ?>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
The problem is you have used $images['url'] where images is a multidimensional array. It has to be $image_1['url'];
Simply use for loop if you want every image. Else if you want only one image then use
<a href="<?php echo $images[0]['url']; ?>" rel="fancybox">
<img src="<?php echo $images[0]['url']; ?>" /></a>
I want to fetch complete data of an image. Which and how should I use any function?
Title shows title of post but I want Title of image to be displayed.
What should I do?
It depends on how you would like to attach your image in post/page.
If you go through the Featured Image, below code will help you:
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
Thanks.
I am using the ACF purely so the user can upload images to a predefined location and have assigned the page rules accordingly. Everything seems to be fine on the WP back-end, with the three images uploaded to the fields. However, on the font end, nothing apart from blank box is appearing at all where the images should be. Looking at the source that WP is outputting, there is only blank code:
<img src="" class="middle" alt="image1"/>
This is the loop I am using:
<?php query_posts("posts_per_page=1&post_type=page&page_id=168"); if (have_posts()) :
while ( have_posts() ) :
the_post(); ?>
<!--If you want to refer to the child of parent page, use "post_parent=" -->
<li>
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
<img src="<?php the_field('image_1'); ?>" class="middle" alt="image1"/>
View More
</li>
<?php endwhile; ?>
<!-- post navigation -->
<?php else: ?>
<!-- no posts found -->
<?php endif; ?>
<?php wp_reset_query(); ?>
It is important to note that I am not pulling the images from another page. I just want the images to relate to the template & page I am working on.
Make sure the image field is outputting the id or url of the image link.
<?php if(get_field('YOUR FIELD NAME')): while(has_sub_field('YOUR FIELD NAME')): ?>
<img class="logo" src="<?php the_sub_field('image_1'); ?>" />
<?php endwhile; endif; ?>
I just needed to nominate the home page id the function:
<img src="<?php the_field('image_2', '245'); ?>" class="middle" alt="image2"/>
you can use get_the_field() to get the right value of the field,
<img src="<?php get_the_field('image_1'); ?>" class="middle" alt="image1"/>