How can i add to my code
<img src="<?php the_sub_field('img'); ?>" alt="????" />
Te "alt" value of the image in my media, form my wordpress.
Advanced Custom Fields gives you a choice of return values. Given your current code I'd guess you've gone with URL.
In order to display the ALT tag you'll need to choose object instead. ID could work too but it's adding an extra step.
After choosing the new return value replace your code with:
<?php if ( $image = get_sub_field( 'img' ) ) {
printf( '<img src="%s" alt="%s" />', $image['url'], $image['title'] );
} ?>
Related
Is it possible to change that behavior on the first time the visitor visit the product page to show the real featured image and only on select variant it will show the image without removing pre-selected variant?
When clicking the product in the listing (with a featured image) the product displays just an image, with the description and stuff, but a different image, not the featured.
I found this but the code is outdated: Same question and answer
My single/product-image.php template:
<div class="product-images relative mb-half has-hover <?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>">
<?php do_action('flatsome_sale_flash'); ?>
<div class="image-tools absolute top show-on-hover right z-3">
<?php do_action('flatsome_product_image_tools_top'); ?>
</div>
<figure class="woocommerce-product-gallery__wrapper <?php echo implode(' ', $slider_classes); ?>"
data-flickity-options='{
"cellAlign": "center",
"wrapAround": true,
"autoPlay": false,
"prevNextButtons":true,
"adaptiveHeight": true,
"imagesLoaded": true,
"lazyLoad": 1,
"dragThreshold" : 15,
"pageDots": false,
"rightToLeft": <?php echo $rtl; ?>
}'>
<?php
if ( $product->get_image_id() ) {
$html = flatsome_wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
<div class="image-tools absolute bottom left z-3">
<?php do_action('flatsome_product_image_tools_bottom'); ?>
</div>
</div>
Well, I 'v figured out how to stop this behavior. after 6 hours of search in the code in theme + WooCommerece plugin code, I found the solution.
1.First copy the file wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js
To your child theme /woocommerce/js/ folder if not have that folder create one.
2.Paste this at your theme child to call the new file and deregister the default file by woo:
add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
function override_woo_frontend_scripts() {
wp_deregister_script('wc-add-to-cart-variation');
wp_enqueue_script('wc-add-to-cart-variation', get_stylesheet_directory_uri() . '/woocommerce/js/add-to-cart-variation.min.js', array('jquery', 'wp-util', 'jquery-blockui'), null, true);
}
3.Open the new copied file from your child theme and seatch for line 45 and Comment the following line:
setTimeout( function() {
//$form.trigger( 'check_variations' ); Comment this line to disable auto slide on first page load to the selected variation image
$form.trigger( 'wc_variation_form' );
self.loading = false;
}, 100 );
Copy the entire file you have just edited into some online js minify.
Paste the minified code inside the new file you have just created and rename the file to add-to-cart-variation.min.js.
Done, fixed the problem, the only issue with this can be on the next woocommerce updates if would they do to that file you may miss important updates.
Thanks, good luck
I had the same problem and solved it a slight different way, without needing to edit core WooCommerce js files.
The entire flex slider nav system of selecting the variation image depends on the class 'flex-control-nav' in file add-to-cart-variation.min.js line 650, "$gallery_nav = $product.find( '.flex-control-nav' )".
If the class flex-control-nav is not preset on page load, then the WooCommerce js cannot automatically select the default variation image.
So, when your page loads, make sure that the class flex-control-nav is not present in your thumbnail slider div - use a different class for styling the flexslider. I used a custom product_image.php template for this.
Set a js timer for 300 ms to run once the page loads, and once the timer fires, use js to add the class flex-control-nav into the slider div. You now have image sync between your variation images and main image gallery.
Orignal Code
<h5 class="entry-title">'.get_the_title().'</h5>
I want to add this code that ACF image field to show and it replaced on title
<?php $shortlinestory = get_field( 'shortlinestory' ); ?>
<?php if ( $shortlinestory ) { ?>
<img src="<?php echo $shortlinestory['url']; ?>" alt="<?php echo $shortlinestory['alt']; ?>" />
<?php } ?>
My Custom image field name is shortlinestory in a widget i want to show the recent image please help me thanks
To get the custom field of a widget you have to add an additional parameter in the get_field() function. Advanced Custom Fields has pretty decent documentation and it is explained here how to do that.
First you have to figure out the ID of the widget. This is passed to the function that creates the widget for example $widget_id = $args['widget_id']. Then you can use the_field('field_name', 'widget_' . $widget_id) to get the custom field value.
Hope that helps you out, good luck!
I am using the Plugin Auto Featured Image to set thumbnails automatically. And in the database it shows updated meta thumbnail key.
But for some reason it is not showing the featured image. It doesn't show a "placeholder" neither. It just shows nothing at all.
Also, when I try to view the attachment on a single page, it does not show it.
How can I proceed to find the problem? If you need more screenshots of different tables on my database, please ask. I really appreciate your time.
EDIT
$meta_values = get_post_meta( $POST_ID, '_thumbnail_id');
error_log(var_dump($meta_values)) //Prints nothing on error log
//Note: $POST_ID is fine, it contains the right id. Problem not there.
EDIT 2:
if ( has_post_thumbnail($post_parent_id) ){
error_log("THUMB EXISTS". get_post_thumbnail_id($post_parent_id));
}
Really weird result:
THUMB EXISTS: "Blank space, No id or string at all"....
1) get post thumbnail with post id full description
<?php echo get_the_post_thumbnail( $page->ID, 'thumbnail' ); ?>
2) In a loop full description
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
3 want to get the thumb url ?? . Use this
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
<img src="<?php echo $url; ?>" longdesc="URL_2" alt="Text_2" />
i am using dynamic featured image and adding multiple product images to a single custom post type name as products for a single product but and i am trying to get those images in my template but the array only return me only two sizes [thumb] [full] but i need medium as well below is my code
<?php
if( class_exists('Dynamic_Featured_Image') ) {
global $dynamic_featured_image;
$featured_images = $dynamic_featured_image->get_featured_images();
foreach($featured_images as $featured_image) {
?>
<img width="60" src="<?php echo $featured_image['full'];?>"/>
<?php }
}
?>
As you guys can see in the anchor tag $featured_image['medium'] this is how i want to echo this anchor tag but unfortunately it don't return me the medium size and i need help in getting the medium size as well. below is the array that i get where you can clearly see only [thumb] and [full]. please help
Array
(
[thumb] => http://www.example.com/wp-content/uploads/2014/07/product-1-120x90.jpg
[full] => http://www.example.com/wp-content/uploads/2014/07/product-1.jpg
[attachment_id] => 254
)
You need to get medium sized image by calling get_image_url function. Try this:
<?php
if( class_exists('Dynamic_Featured_Image') ) {
global $dynamic_featured_image;
$featured_images = $dynamic_featured_image->get_featured_images();
foreach($featured_images as $featured_image) {
$mediumSizedImage = $dynamic_featured_image->get_image_url($featured_image['attachment_id'], 'medium');
echo "<img src = '" . $mediumSizedImage . "' />";
?>
<img width="60" src="<?php echo $featured_image['full'];?>"/>
<?php }
}
?>
All available functions are documented here.
PS: I am author of the plugin.
I am working on a portfolio website. Whenever a portfolio piece is clicked, the user is taken to a page that shows details about that piece (i.e. more photos and information). There will also be previous and next navigation links to get to additional pieces. However, I want the previous and next navigation links to be a thumbnail photo of the next piece (custom field for that is thumbnail_photo). This is what I have so far:
<?php
$previous_post = get_previous_post();
$next_post = get_next_post();
$prev_value = get_post_meta( $previous_post->ID, 'materials', $single = true);
$next_value = get_post_meta( $next_post->ID, 'thumbnail_photo', $single = true);
?>
<p><?php echo $prev_value; ?></p>
<p><?php echo $next_value; ?></p>
I used 'materials' in the call for $prev_value since 'materials' is another custom field. I just wanted to see if it was actually working. It outputs the materials just fine, but it only outputs the ID number of the thumbnail_photo. I can't get it to reference the file name so that I can output the actual image.
I am using the Advanced Custom Fields plugin, so each image is stored as an image object. So this is how I would typically output a thumbnail image:
<?php
$image = get_field('thumbnail_photo);
echo $image[sizes]["thumbnail"]; // thumbnail is a reference to wordpress' thumbnail media size
?>
When you configure the ACF input field, be sure you set the return value to be an image object instead of the image ID after change this, or if you already changed, you have to update the post or posts you're trying to get. Because, if you set the field return value as image ID, created the posts and now you wanna change their values you have to modify all the posts because every post_meta is containing the ID of the image.
In the ACF website has a tutorial how you could get the values an turn into images:
With the ID
<?php
wp_get_attachment_image( $next_value, 'thumbnail' );
?>
Another Example With the ID, but this time you have to create the image HTML, the function returns an array with the url, width and height
<?php
$image = wp_get_attachment_image_src( $next_value, 'thumbnail' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" />
You could do a check for the returned value and then write the image, example:
<?php
if( is_int( $next_value ) ) {
wp_get_attachment_image( $next_value, 'thumbnail');
} elseif ( is_object( $next_value ) ) {
echo $next_value['sizes']['thumbnail'];
} else { ?>
<img src="<?php the_field('field_name'); ?>" alt="" />
<?php } ?>
I didn't test it, but I think it works fine.
I hope this help and sorry for the bad english