images

Add custom CSS class to product images

If it’s still relevant, you can add a class to the product thumbnail the following way. function loop_product_custom_thumbnail() { echo the_post_thumbnail(‘thumbnail’, array(‘class’ => ‘your-class-name’)); } remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_product_thumbnail’, 10); add_action( ‘woocommerce_before_shop_loop_item_title’, ‘loop_product_custom_thumbnail’, 10 );

How to get next image with this code from same post?

I’m afraid that your code doesn’t make much sense (especially the part with foreach loop…), but here’s how it can look like… $attachments = get_children( array( ‘numberposts’ => -1, ‘order’ => ‘ASC’, ‘post_mime_type’ => ‘image’, ‘post_parent’ => $posid, ‘post_type’ => ‘attachment’, ) ); // print image 0 if ( array_key_exists( 0, $attachments ) ) { … Read more

Add width & height attributes to Gutenberg’s image output?

If affordable i would rather switch to a lazyload technique without the need of width and height attributes on images over somehow hacking of the editors image output. This saves you maintenance problems that may occur in the future with Gutenberg Editor. i do made good experiences with this plugin https://appelsiini.net/projects/lazyload/ edit: i’m wrong with … Read more

Can’t get images to align with Gutenberg editor

CSS In Customize -> Additional CSS, add the following code: .clearflow { clear: both; } figure.alignleft { margin-right: 1rem; } Blocks Insert blocks in the following order: Image Paragraph … Paragraph Image Paragraph … Paragraph Select Image block, and on its toolbar, select Align left icon. In Advanced -> Additional CSS Class section, add clearflow … Read more

+ More