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>
Related
We are using your Advanced Custom Fields plug-in which by default provides a custom field group called Flexible Content Template. I'm trying to develop a new webpage with a new group of custom fields that is created only for this page named B2B landing page. A couple of sections in this page can be created by using an existing layouts called "Icon Columns" and "text and full image" from Flexible Content Template custom fields group. Question is how can I access the contents of these two layouts separately in the template file so that they are displayed when I need them to? Why I'm asking this is because in our project I see that we display flexible content field data with this line <?php get_template_part('template-parts/fields/field--flex-content'); ?> This brings contents from the Flexible Content field everywhere you call this function, not just the specific layout data meant for the section. I need to be able to display contents selectively. Below is the code for you to have a look and see if you can suggest some solution.
<!-- START HERO -->
<?php
$hero = get_field('hero');
$hero_h1 = $hero['hero_-_h1'];
$hero_h2 = $hero['hero_-_h2'];
$background = $hero['hero_-_background_options'];
$image = $background['background_-_image'];
$link = $hero['cta'];
?>
<?php get_header(); ?>
<div class="corp-hero relative mb-row">
<?php if($image): ?>
<div class="corp-hero-img relative no-touch select-none">
<picture>
<source media="(max-width: 480px)" srcset="<?php echo($image['sizes']['small']); ?>">
<source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
<source media="(max-width: 1280px)" srcset="<?php echo($image['sizes']['large']); ?>">
<source srcset="<?php echo($image['sizes']['xlarge']); ?>">
<img src="<?php echo($image['sizes']['xlarge']); ?>" alt="<?php echo $image['alt']; ?>" />
</picture>
</div>
<?php endif; ?>
<div class="wrap-x">
<div class="inside">
<?php if(stripos($hero_h1, "Do Not Display") === FALSE): ?>
<h1 class="mb0 color-tan-dark">
<?php if( $hero_h1 ): echo $hero_h1; else: echo get_the_title(); endif; ?>
</h1>
<?php endif; ?>
<?php if( $hero_h2 ): ?>
<h2 class="mb0 mt2 alt-heading h4">
<?php echo $hero_h2; ?>
</h2>
<?php endif; ?>
</div>
</div>
<?php if ( $link ) : ?>
<div class="inside mt2x">
<div class="center-xs">
<a href="<?php echo $link['url']; ?>" class="btn cta-btn-purple" role="button" target="<?php echo $link['target']; ?>" title="<?php echo $link['title']; ?>">
<?php echo $link['title']; ?>
</a>
</div>
</div>
<?php endif; ?>
</div>
<!-- END HERO -->
<!-- START FAST, EASY ORDERING SECTION -->
// I need to only display contents from 'icon-columns' layout
<?php get_template_part('template-parts/fields/field--flex-content'); ?>
<!-- END FAST, EASY ORDERING SECTION -->
<!-- START HOW OUR GIFTS MAKE A SIGNIFICANT IMPACT Section -->
// I need to only display contents from 'text and full image' layout
<?php get_template_part('template-parts/fields/field--flex-content'); ?>
<!-- END HOW OUR GIFTS MAKE A SIGNIFICANT IMPACT Section -->
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 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];
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.
Need to share a custom url which includes the image #ID, so that the url looks the following in addthis:
http://www.mywebsite.com/mygallery/#image-1
Take a look at the following gallery and click on an image:
http://www.starbasket.fr/photos-des-camps/camps-2011/la-baule-3/
Hoe do you include the #image-1 within the share link?
Which WP code echo's out the image ID?
I've tried the following code snippets, but it does not work:
<?php echo $post_thumbnail_id = get_post_thumbnail_id( $post_id ); ?>
<?php echo get_post_thumbnail_id() ?>
<?php echo wp_get_attachment_metadata( $attachment_id, $unfiltered ); ?>
Regards,
Charl
You have to edit gallery's files.
Look in /wp-content/plugins/nextgen-gallery/view/
You'll find several files, the one you want to edit is "gallery.php".
Replace the title which usually diplays the alternate text ($image->alttext).
As the gallery take the "title" of each thumbnail to diplay it bigger, you can put your html code here (you also have to encode it) :
Try mine (the one you want) :
<?php foreach ( $images as $image ) : ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<?php $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']."%23".$image->pid;
$url2 = $image->imageURL;
$url3 = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']."#".$image->pid; ?>
<a href="<?php echo $image->imageURL ?>" id="<?php echo $image->pid ?>" title="<?php //echo $image->alttext ?><?php
echo '<div class="nggfb" style="float:left;width:80px" class="share-custom" ><a class="share-custom sd-button" href="javascript:postToFeed(\''.$url3.'\',\''.$url2.'\');" style="float:left"><span style="background-image:url("http://www.starbasket.fr/wp-content/plugins/jetpack/modules/sharedaddy/images/facebook.png");">Partager</span></a></div>
<div class="tweets" style="width:100px;float:left">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url='.$url.'&counturl='.$url.'&hashtags=StarBasket&related=campstarbasket&via=campstarbasket&text=Une photo ! '.$url2.'" style="width:130px; height:20px;">Tweet</iframe>
</div>
<div style="float:left;width:80px;">
<iframe src="/wp-content/googleplus.php?url='.$url.'" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" style="border:0;width:100px;height:20px;"></iframe>
<meta itemprop="image" content="'.$url2.'">
</div>
<a class="small-button smallblack " style="height: 18px;padding-top: 0;" onClick=" return copy(\''.$url3.'\')" href="'.$url3.'">Copier</a>' ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</div>
</div>
<?php if ( $image->hidden ) continue; ?>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>
<?php endforeach; ?>
I made different url because of facebook and the copie/paste function ("#" or is html code "%23") et I also get the file url in order to display on some twitter client without access the web page. And for Facebook, you can use the share function, because it takes the meta og:url of you whole page (without "#imageID"), so I choose the dialog function to do so.
Google+ takes the good one but not the thumbnail.