Thumbnail image is inside Media-Grid plugin -> Grid Builder -> select any grid from grid list ->small thumbnail image in front of 'select an item' drop down list
Thumbnail image not appear online but work fine locally.
Can you please tell me where to start ?
here is image
enter link description here
For cropping thumbnail image, you it would not a proper way to use plugins:
Try with this code, it will helps you for all the rest of thumbnails in your whole site...
Put this code in your function.php file
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'custom-post-thumb', 140, 140,true );
}
Now use this in your code:
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('custom-post-thumb', array('class' => 'attachment')); // here array('class' => 'attachment') apply if you want to apply class to that anchor tag ?>
<?php endif; ?>
Thanks
Related
I like to use the page's featured images in a background image in the header. When I add a new page and set the featured image, it appears as background image works exactly what I wanted. But on a Blog main page (the Home, page of displaying posts) I set the featured image and in the header display the first post's featured image insetad the one I set at the page's featured image. Tried to find solution, but nothing works, don't know how to magae it. Here is my code that handle background image:
<div class="sub-header"
<?php
if (has_post_thumbnail( $post->ID ) ):
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
echo 'style="background-image: url(\'';
echo $image[0];
echo '\');"';
endif;
?>
>
</div>
Make the custom image source, whether it's assigned in the customizer or hard coded.
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.
I would like to add jetpack infinity scroll to my webpage.
Unfortunately the div which contain all post, not have ID only class have him, so I added ID with php:
if ( is_home() ) {
$homepagepostsid="posts-content";
}else{
$homepagepostsid="";
}
HTML:
<div id="<?php $homepagepostsid ?>" class="loop-container loop-container--wp <?php echo esc_attr($loop_classes); ?>">
</div>
As you can see, I tried to reach something like this in some world:
If you're on home page, php add a id to loop-container loop-container-- div, else the id value is empty.
Unfortunately in somehow this doesn't work, because the infinity scroll trying to load posts to wp-admin area, which loos like this:.:
On the top this text can be found:
"The comments closed"
And the chrome inspector also it confirm that hypothesis , which I mention before..:
.:.:
The page trying to load the posts to wp admin area.
How can I fix this?
My jetpack infinity scroll code in functions.php:
function zilla_infinite_scroll_render() {
}
get_template_part( 'loop_item', 'standard' );
add_theme_support( 'infinite-scroll', array(
'container' => 'posts-content',
'render' => 'zilla_infinite_scroll_render',
'type' => 'scroll',
));
Try adding !is_admin to your condition,
$homepagepostsid = is_home() && !is_admin() ? 'posts-content' : '' ;
I have a text widget in the left sidebar and I want it to be displayed somewhere else on the page and not in a sidebar. The widget's text is some HTML:
<a href...><img ...></a>
I can't figure out the code how to get the widget's content - the HTML. I found out, that the name of the widget seems to be "text-5" using this code:
print(wp_get_sidebars_widgets()['travelify_left_sidebar'][0]);
Why I use a widget for this is because I want it to be easy to alter the HTML code for my client.
thx in advance,
Koem
This template tag displays an arbitrary widget outside of a sidebar. It can be used anywhere in
<?php the_widget( $widget, $instance, $args ); ?>
Text widget
<?php the_widget( 'WP_Widget_Text', $instance, $args ); ?>
widget's classname: widget_text
instance:
title
text
filter
Example
Default usage:
<?php the_widget( 'WP_Widget_Text' ); ?>
You can also find whole solution about wordpress codex site
http://codex.wordpress.org/Function_Reference/the_widget
I need to make a homepage of a wordpress blog show just 1 paragraf of text followed by more, and below a big nice image.
However, excerpt does not take images.
Also, if i put the more page divider, no image appears. and even if it does, the 'more' link should be after the text, not after the image.
How can i get this to work?
UPDATE:
I noticed that in the source code, there is a link to an image, but it is not the right link.
currently my blog is at www.domain.com/wordpress and will be moved to www.domain.com.
currently the image has the code:
<img width="800" height="990" alt="" src="../wp-content/uploads/2011/05/2010_06_01_archive.jpg" title="2010_06_01_archive">
Somehow the build-in linkage is broken
Use wordpress's in-built "featured image" (can be set on post's editing page in wordpress admin).
On the page displaying the excerpts:
<div id="excerpts">
<?php
$args = array( 'numberposts' => 3, 'category'=> '1,3,5' ); }
// set number of excepts to show
// and optionally restrict to certain categories
$posts = get_posts($args);
foreach($posts as $post) : setup_postdata($post);
?>
<div class="single-excerpt">
<h3><?php the_title(); ?></h3>
<?php if ( has_post_thumbnail()) the_post_thumbnail('excerpt-thumb'); ?>
<!-- displays thumbnail if it exists -->
<p><?php the_excerpt();?></p>
</div><!-- single-excerpt -->
<?php endforeach; ?>
</div><!-- excerpts -->
In your theme's functions.php:
if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'excerpt-thumb', 0, 100, false );
// define excerpt-thumb size here
// in the example: 100px wide, height adjusts automatically, no cropping
}
function new_excerpt_length($length) {
return 42;
// define length of excerpt in number of words
}
add_filter('excerpt_length', 'new_excerpt_length');
You could also use the Wordpress plugin Easy Custom Auto Excerpt which allows you to configure the excerpt to include shortcode, images, and all HTML.
Make sure the image is properly sized, and the physical size is minimized as much as possible. (Gif is usually the best format for this.)
http://codex.wordpress.org/Image_Size_and_Quality