I'm trying to integrate the Simple Lightbox plugin into Advanced Custom Fields image fields.
Basically I want any images on a page (populated via acf image fields) to open in the lightbox when clicked, and also be grouped together with all other images within the lightbox so they can be navigated through like a slideshow. This is built-in functionality for the Simple Lightbox plugin, but I don't know how to integrate it with my template code for image fields.
For acf WYSIWYG fields I'm using this...
<?php
$content = get_field('wysiwyg');
if ( function_exists('slb_activate') )
$content = slb_activate($content);
echo $content;
?>
...which works great, but adapting that to image fields is eluding me.
Here's my template code for image fields (without any attempts at integrating Simple Lightbox):
<?php
$image = get_field( 'img' );
if( ! empty( $image ) ) {
$url = $image['url'];
$alt = $image['alt'];
$caption = $image['caption'];
$size = 'large';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
?>
<?php if( $caption ): ?>
<div class="wp-caption" style="width: <?php echo $width; ?>px">
<?php endif; ?>
<a href="<?php echo $url; ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
</a>
<?php if( $caption ): ?>
<p class="wp-caption-text"><?php echo $caption; ?></p>
</div>
<?php endif; ?>
<?php } ?>
Any suggestions for how to integrate Simple Lightbox into this? Thanks in advance!
Use php output buffering to store your template in a variable. Put ob_start() at the top, then at the bottom ob_get_clean() will stop the output buffering, and you can save the return value to a variable. Then pass that to slb_activate.
<?php
ob_start();
$image = get_field( 'img' );
if( ! empty( $image ) ) {
$url = $image['url'];
$alt = $image['alt'];
$caption = $image['caption'];
$size = 'large';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
?>
<?php if( $caption ): ?>
<div class="wp-caption" style="width: <?php echo $width; ?>px">
<?php endif; ?>
<a href="<?php echo $url; ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
</a>
<?php if( $caption ): ?>
<p class="wp-caption-text"><?php echo $caption; ?></p>
</div>
<?php endif; ?>
<?php } ?>
<?php $content = ob_get_clean(); ?>
<?php echo slb_activate($content); ?>
Related
I try to implant this
- Page A0 (images + texts)
-- Page A1
-- Page A1
---Page A2
In page A1 & A2, I need to retrieves galerie and texts from a group of field.
If I use a normal field, not in a goup, I achieve this... But I need to stay in a group field.
<?php
$post_ID = get_the_ID();
$parentpost_id = wp_get_post_parent_id( $post_ID );
$images_images = get_sub_field( "images", $parentpost_id ); //use parents-post field: "broschuren-download"
?>
<div class="hero__image-wrapper <?php if (count ($images_images) > 1) { echo "heroslide" ;} ?> ">
<?php if ( $images_images ) : ?>
<?php foreach ( $images_images as $images_image ): ?>
<img class="hero__image fit-cover" src="<?php echo $images_image['sizes']['large']; ?>" alt="<?php echo $images_image['alt']; ?>" />
<?php endforeach; ?>
<?php endif; ?>
</div>
The get_sub_field() function only works within a have_rows() loop that you run on the parent field. If you still want to use get_sub_field(), you would have to do something like this:
<?php
$post_ID = get_the_ID();
$parentpost_id = wp_get_post_parent_id( $post_ID );
if( have_rows('broschuren-download', $parentpost_id) ): while( have_rows('broschuren-download', $parentpost_id) ): the_row();
$images_images = get_sub_field('images');
if ( $images_images ):
?>
<div class="hero__image-wrapper <?php if (count ($images_images) > 1) { echo 'heroslide'; } ?>">
<?php foreach( $images_images as $images_image ): ?>
<img class="hero__image fit-cover" src="<?php echo $images_image['sizes']['large']; ?>" alt="<?php echo $images_image['alt']; ?>" />
<?php endforeach; ?>
</div>
<?php
endif;
endwhile; endif;
?>
I'm trying to use a gallery field add-on to Wordpress' ACF plugin. The add-on is Navz Photo Gallery. All it does is to give you a way to get the gallery photos' IDs. Now I want to actually display the images.
By calling the following code
<?php if ( get_field( 'field_name') ) { ?>
<img src="<?php the_field( 'field_name' ); ?>" />
<?php } ?>
all I get are the actual IDs, like this:
<img src="21,22,23">
Does anybody know how to loop thru this group of images and display them individually, not just the ID, but the actual image?
For reference, ACF has an official (paid) gallery add-on, and it displays the attached images like this:
<?php $images = get_field('gallery'); if( $images ): ?>
<?php foreach( $images as $image ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endforeach; ?>
<?php endif; ?>
Navz has helped me with this:
<?php
$images = get_field('fotos_do_projeto'); if( $images ): $images = explode(',', $images); $images = array_filter($images); if( count($images)):
?>
<ul>
<?php foreach( $images as $image ): $alt = get_the_title($image); $url = get_post_meta($image, 'field_5802bd6e39e9b_url', true); ?>
<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; ?>
You can try this,
$attachment_id = get_field( 'field_name');
$image_attributes = wp_get_attachment_image_src( $attachment_id );
if ( $image_attributes ) : ?>
<img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
<?php endif; ?>
How to show x number image random in acf
i have add code number number image random in acf don't show image
<?php
$images = get_field('khach_hang', 'option');
$rand = array_rand($images, 1);
if( $images ): ?>
<?php
$i = 0;
foreach( $images as $image ):
if ($i <= 19 ) { ?>
<img class="khac_hang_item" src="<?php echo $image[$rand]['url']; ?>" alt="<?php echo $image[$rand]['alt']; ?>" />
<?php $i++; } endforeach; ?>
<?php endif; ?>
I have 20 url image : <img class="khac_hang_item" src="" alt="" />
Any help greatly, Thanks
$rand will be an array of keys from $images..
I guess you should rewrite your code to something like this:
<?php
$images = get_field('khach_hang', 'option');
if( $images ):
$rand_keys = array_rand($images, 10);
foreach( $rand_keys as $key ): ?>
<img class="khac_hang_item" src="<?php echo $images[$key]['url']; ?>" alt="<?php echo $images[$key]['alt']; ?>" />
<?php endforeach; ?>
<?php endif; ?>
you should loop $rand_keys instead of $images...
I'm implementing the portfolio page template, however I'd like to delete the URL's behind all portfolio images. (see page temp below)
Example website: http://demo.fabthemes.com/adament/my-portfolio/
Could anyone help me delete the URL? Once I delete the $img_url part, my portfolio doesn't get displayed.
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
Template name:Portfolio
*
* #package fabframe
*/
get_header(); ?>
<div class="full-wrap">
<ul class="folio-grid stylefx">
<?php
if ( get_query_var('paged') )
$paged = get_query_var('paged');
elseif ( get_query_var('page') )
$paged = get_query_var('page');
else
$paged = 1;
$wp_query = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' =>-1));
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<li>
<figure>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url,720, 480, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive" src="<?php echo $image ?>"/>
<?php endif; ?>
<figcaption>
<h3><?php the_title(); ?></h3>
<span><?php the_terms( $post->ID, 'genre', '', ', ' ); ?></span>
</figcaption>
</figure>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php get_footer(); ?>
You just need to change this:
<?php if($image) : ?>
<img class="img-responsive" src="<?php echo $image ?>"/>
<?php endif; ?>
To:
<?php if ( $image ) : ?>
<img class="img-responsive" src="<?php echo $image; ?>"/>
<?php endif; ?>
Here's the situation:
In wordpress I'm trying to reset a post WP_Query so that I can rewrite the post link based on whether or not a custom field exists in the post. I'm trying to give the post a NEW link in the custom field.
All I've managed to do here is kill the link entirely. Any and all help is greatly appreciated, I'm pretty green to php.
Here's my WP_Query:
<?php
$recentPosts = new WP_Query();
$recentPosts->query('showposts=3');
?>
<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<?php
$attribute = the_title_attribute();
$title = the_title();
$key = 'NewPostLink';
$newLink = get_post_meta( $post->ID, $key, TRUE );
if ($newLink != '') {
$theLink = get_permalink ($post->ID );
if (has_post_thumbnail()) {
$image = get_the_post_thumbnail( $post->ID );
echo '<div class="thumbnailbox"><div class="thumbnail">'.$image.'</div></div>';
echo '<h2>'.$title.'</h2>';
} else {
echo '<h2>'.$title.'</h2>';
}
} else {
$theLink = $newLink;
if (has_post_thumbnail()) {
$image = get_the_post_thumbnail( $post->ID );
echo '<div class="thumbnailbox"><div class="thumbnail">'.$image.'</div></div>';
echo '<h2>'.$title.'</h2>';
} else {
echo '<h2>'.$title.'</h2>';
}
}
?>
<small><?php the_time('F jS, Y') ?></small>
<div class="entry">
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
I think this is what you need. It's hard to tell. I suppose that the first part of the if statement is what runs if there is no custom post meta? I couldn't tell. Here's what the problem was. The if statement ran the first part if there IS a value returned for the custom post meta, otherwise it ran the second part, using the empty string as the href. (The first part runs if the custom value either doesn't exist or is anything but an empty string). Changing the if statement to check if it's empty is better because it will catch it if it doesn't exist (returns false), or if it does exist but is an empty string (declared but not defined).
I've marked what I edited with comments (just one line).
<?php
$recentPosts = new WP_Query();
$recentPosts->query('showposts=3');
?>
<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<?php
$attribute = the_title_attribute();
$title = the_title();
$key = 'NewPostLink';
$newLink = get_post_meta( $post->ID, $key, TRUE );
/* EDITED */ if (empty($newLink)) {
$theLink = get_permalink ($post->ID );
if (has_post_thumbnail()) {
$image = get_the_post_thumbnail( $post->ID );
echo '<div class="thumbnailbox"><div class="thumbnail">'.$image.'</div></div>';
echo '<h2>'.$title.'</h2>';
} else {
echo '<h2>'.$title.'</h2>';
}
} else {
$theLink = $newLink;
if (has_post_thumbnail()) {
$image = get_the_post_thumbnail( $post->ID );
echo '<div class="thumbnailbox"><div class="thumbnail">'.$image.'</div></div>';
echo '<h2>'.$title.'</h2>';
} else {
echo '<h2>'.$title.'</h2>';
}
}
?>
<small><?php the_time('F jS, Y') ?></small>
<div class="entry">
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>