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;
}
Related
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
}
}
I am displaying product images on product page using ACF. Only permalink and title is displaying and product pictures are not displaying instead of that broken thumbnails are displaying. My field type and return format is post object and here is my code:
<div class="col-md-12">
<?php
$featured_posts = get_field('products_images');
if( $featured_posts ): ?>
<ul>
<?php foreach( $featured_posts as $featured_post ):
$permalink = get_permalink( $featured_post);
$title = get_the_title( $featured_post);
$image = get_field('products_images');
?>
<li>
<?php
if ( !empty($image) ); ?>
<img src="<?php echo $image['url']; ?>" />
<?php echo esc_html( $title ); ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
I have a custom post type called projects and a custom taxonomy attached to that called sectors. I have also added the ability to add an image to each taxonomy using Advanced Custom Fields.
I'm displaying a list of the sectors on the homepage of my site which consists of the title of the taxonomy along with its image here:
So far, so good...
I'm struggling with surrounding either the image or title with the permalink for the taxonomy. I'd like to be able to click on it and it takes me to a page showing all of the projects inside that sector.
My loop is as follows:
<div class="container">
<div class="row no-gutters">
<?php
// loop through terms of the Sectors Taxonomy
$getArgs = array(
'parent' => 0,
'order' => 'DESC',
'orderby' => 'count',
'hide_empty' => false,
);
// get the taxonomy we are going to loop through.
$taxonomy = get_terms('sectors', $getArgs);
$terms = get_terms($taxonomy);
// Start the loop through the terms
foreach ($taxonomy as $term) {
// Get acf field Name
$image = get_field('sector_image', $term );
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
// which size?
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<div class="col-md-6">
<div class="sector-item-container" style="position: relative;">
<div class="box-overlay"><?php echo $term->name; ?></div><!-- box overlay -->
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
</a>
</div>
</div>
<?php } // end foreach ?>
</div>
</div>
I've tried adding tags like this around the elements I want to be clickable:
<a href="<?php the_permalink(); ?>">
</a>
or
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
</a>
But they don't seem to pull the links through...
Can anyone see what I'm doing wrong? I appreciate any insight at all :)
***** EDIT ***************
This seems to show a list of the taxonomies and also apply the link to them... so it's somehow a mix of both I need I think, this following code works but without the images!...
<?php
$taxonomy = 'sectors';
$terms = get_terms($taxonomy); // Get all terms of a taxonomy
if ( $terms && !is_wp_error( $terms ) ) :
?>
<div class="container-flex">
<div class="row no-gutters">
<?php foreach ( $terms as $term ) { ?>
<div class="col-md-6">
<div class="sector-item-container" style="position: relative;">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
<div>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('page-thumb-mine');
}
?>
<?php
$image = get_field('sector_image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</a>
<div class="sector-item-title">
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
<h4><?php echo $term->name; ?></h4>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php endif;?>
<?php wp_reset_postdata(); ?>
This is from the codex on https://developer.wordpress.org/reference/functions/get_term_link/.
$terms = get_terms( 'species' );
echo '<ul>';
foreach ( $terms as $term ) {
// The $term is an object, so we don't need to specify the $taxonomy.
$term_link = get_term_link( $term );
// If there was an error, continue to the next term.
if ( is_wp_error( $term_link ) ) {
continue;
}
// We successfully got a link. Print it out.
echo '<li>' . $term->name . '</li>';
}
echo '</ul>';
For your specific case, try swapping the above with this: $terms = get_terms( 'sectors' );
Edit:
As for your images, retrieve them with get_field('sector_image', $id_of_term_or_post_or_whatever); Be sure to echo it.
$image = get_field('sector_image', id_of_term_or_post_or_whatever);
echo $image; //this might be $image['url'] or whatever, depending on how you set up ACF
Ok, I think I actually managed to combine the two bits of code like this and it seems to work!
<?php
$taxonomy = 'sectors';
$terms = get_terms($taxonomy); // Get all terms of a taxonomy
if ( $terms && !is_wp_error( $terms ) ) :
?>
<div class="container-flex">
<div class="row no-gutters">
<?php foreach ( $terms as $term ) {
$image = get_field('sector_image', $term );
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<div class="col-md-6">
<div class="sector-item-container" style="position: relative;">
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
<div>
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
</div>
</a>
<div class="sector-item-title">
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
<h4><?php echo $term->name; ?></h4>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php endif;?>
<?php wp_reset_postdata(); ?>
My theme uses custom code to display the Woocommerce single product image but the variable product images will not display. The feature image shows and the gallery images show. When using the woocommerce standard template from product-image.php the variable image works but I do not want to use standard template because it does not work well with my theme (gallery image slider not working properly). here is the custom code below. Any idea what's missing or what can be done to get the variable images to show up?
Thanks in advance.
$image_size = array(500,600);
$url_image_default = ST_MaxShop_Assets::url('images/img-default.png');
$attachment_ids = $product->get_gallery_image_ids();
$post_thumbnail_id = $product->get_image_id();
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $product->get_id(), apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ) );
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 1; transition: opacity .25s ease-in-out;width:100%">
<div class="clearfix">
<figure class="woocommerce-product-gallery__wrapper">
<?php
if ( has_post_thumbnail() ) {
?>
<a class="jqzoom" href="<?php echo get_the_post_thumbnail_url($product->get_id() , array(1500,1800)); ?>" id="jqzoom" data-rel="gal-1">
<?php
$props = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
?>
<img src="<?php echo $image_url[0]; ?>" title="<?php echo esc_attr($props['title']); ?>" alt ="<?php echo esc_attr($props['alt'])?>">
<?php
?>
</a>
<?php
} else { ?>
<a class="jqzoom" href="<?php echo esc_url($url_image_default); ?>" id="jqzoom" data-rel="gal-1">
<?php
$dimensions = wc_get_image_size( $image_size ); ?>
<img src="<?php echo esc_url($url_image_default); ?>" width="<?php echo esc_attr( $dimensions['width'] ) ?> " height="<?php echo esc_attr( $dimensions['height'] ) ?> " alt="<?php esc_html_e('Image Default','maxshop')?>" title="<?php esc_html_e('product','maxshop')?>" />
<?php
?></a><?php
}
?>
</figure>
</div>
</div>
<?php
if($attachment_ids){
?>
<ul class="jqzoom-list">
<?php
if ( has_post_thumbnail() ) { ?>
<li>
<a class="zoomThumbActive" href="javascript:void(0)" data-rel="{gallery:'gal-1', smallimage: '<?php echo get_the_post_thumbnail_url($post -> ID,$image_size); ?>', largeimage: '<?php echo get_the_post_thumbnail_url($post->ID , array(1500,1800)); ?>'}">
<?php echo get_the_post_thumbnail( $post->ID, array(100,100)); ?>
</a>
</li>
<?php } ?>
<?php
foreach ($attachment_ids as $attachment_id){ ?>
<li>
<a href="javascript:void(0)" data-rel="{gallery:'gal-1', smallimage: '<?php echo esc_url(wp_get_attachment_image_url($attachment_id,$image_size)); ?>', largeimage: '<?php echo esc_url(wp_get_attachment_image_url($attachment_id, array(1500,1800))); ?>'}">
<?php
echo wp_get_attachment_image($attachment_id,array(100,100)); ?>
</a>
</li>
<?php
}
?>
</ul>
<?php
}
}
as i can see you are getting only the main product image at this line
$attachment_ids = $product->get_gallery_image_ids();
and you are looping through all of them withing your code and in order to get the variation images you need to add the following code as follow:
$image_size = array(500,600);
$variation_image_id = array();
$attachment_ids = $product->get_gallery_image_ids();
$variations = $product->get_available_variations();
foreach ( $variations as $variation ) {
$variation_image_id[]= $variation["image_id"];
}
$attachment_ids = array_merge( $variation_image_id , $attachment_ids);
$post_thumbnail_id = $product->get_image_id();
Here is the code from my template archive-gallery.php
<?php
/*
Template Name: Gallery
*/
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'bm_custom_loop' );
function bm_custom_loop() {
$gallery = new WP_Query( array( 'post_type' => 'gallery','posts_per_page' => 7) );
if ( $gallery -> have_posts() ){
?>
<h1> Behind the scene photo gallery </h1>
<br>
<?php
while ( $gallery -> have_posts() ){
$gallery -> the_post();
?>
<?php $images = get_field('image');
if( $images ): ?>
<?php foreach( $images as $image ):?>
<div id="box"> <img class="galimg" src="<?php echo $image['url']; ?>">
<a href="<?php echo $image['url']; ?>"><div id="over">
<span id="plus"><i class="fa fa-2x fa-camera"></i></span>
</div></a>
</div>
<?php endforeach; ?>
<?php endif; ?><?php
} // End IF
} // End While
} //End Loop
add_shortcode( 'behind', 'bm_custom_loop' );
genesis();
and I use this shortcode [behind] to call the shortcode
The page template works fine when selected using page attributes, but when using the shortcode, the outcome is the shortcode [behind]
write the following code in your theme's function.php file.
function bm_custom_loop() {
$gallery = new WP_Query( array( 'post_type' => 'gallery','posts_per_page' => 7) );
if ( $gallery -> have_posts() ){
?>
<h1> Behind the scene photo gallery </h1>
<br>
<?php
while ( $gallery -> have_posts() ){
$gallery -> the_post();
?>
<?php $images = get_field('image');
if( $images ): ?>
<?php foreach( $images as $image ):?>
<div id="box"> <img class="galimg" src="<?php echo $image['url']; ?>">
<a href="<?php echo $image['url']; ?>"><div id="over">
<span id="plus"><i class="fa fa-2x fa-camera"></i></span>
</div></a>
</div>
<?php endforeach; ?>
<?php endif; ?>
<?php
} // End IF
} // End While
} //End Loop
add_shortcode( 'behind', 'bm_custom_loop' );
and call the shortcode in your archive-gallery.php like bellow.
echo do_shortcode( '[behind]' );