Additional class in the image

This is a PRIVATE forum for verified users only, to view all replies/answers, you must be logged in!

Status: resolved

Tagged: 

  • This topic has 7 replies, 2 voices, and was last updated 3 mo, 2 w by  Jacob.
Viewing 7 reply threads
  • Author
    Posts
    • #18519

      marcorroma
      Member

      Hi,
      how do I add a class to Wp Block Pro images?

      I have this WP Block code:

      // Open column left - position 2
      				if( $misc['ppp_flag'] == 2 ){
      					$this->start_col( 'pbs-col-sm col__md-1_3' );	}
      				
      				global $excerpt_length;
      				$bk_length = $excerpt_length;
      				
      				$excerpt_length = 15;
      				$settings['thumb_style'] = 'wide';
      				$settings['thumb_size'] = empty( $settings['thumb_size'] ) ? 'medium <strong>ANOTHERCLASSCSS</strong>' : $settings['thumb_size'];
      				$settings['title_class'] = 'xs__h4 sm__h3 md__h5';
      				Plugin::get_template('template_base', $settings, $misc );
      				$excerpt_length = $bk_length;

      Which becomes like this:
      <img width="1140" height="617" src="URLIMAGE" class="attachment-medium <strong>ANOTHERCLASSCSS</strong> size-medium <strong>ANOTHERCLASSCSS</strong> wp-post-image" srcset="URLIMAGE 1140w, URLIMAGE 400w, URLIMAGE 750w, URLIMAGE 768w, URLIMAGE 582w, URLIMAGE 980w" sizes="(max-width: 1140px) 100vw, 1140px" data-wp-pid="154621" >

      But in this way I do not have the “medium” image because it is not recognized in the class. The “full” image is displayed.

      I would like it to become like this, to display the “medium” thumbnail and integrate the new css class:
      <img width="400" height="617" src="URLIMAGE" <strong>class="attachment-medium size-medium wp-post-image ANOTHERCLASSCSS"</strong> srcset="URLIMAGE 1140w, URLIMAGE 400w, URLIMAGE 750w, URLIMAGE 768w, URLIMAGE 582w, URLIMAGE 980w" sizes="(max-width: 400px) 100vw, 400px" data-wp-pid="154621" >

      Can you help me please?
      Thank you.

    • #18524

      Jacob
      Staff

      Hey there, You must be logged in to view this reply!

      Login | Register | Forgot Password?

    • #18526

      marcorroma
      Member

      Hi Jacob, I hope you are well.
      Unfortunately it is not the solution for me.
      I would need to enter the class “ANOTHERCLASSCSS” only for a specific WP POSTS BLOCK, not for everyone.
      This way I can exclude this class CSS from the lazy load of the images. In this way all the images are loaded lazy, instead this WP posts block images is loaded immediately.
      PS. WP posts block images are dynamic, not static.

    • #18676

      marcorroma
      Member

      Can you help me please?
      How can I modify the CSS classes only of the first 3 images of post blocks on the homepage? Thank you Jacob!

    • #18684

      Jacob
      Staff

      Hey there, You must be logged in to view this reply!

      Login | Register | Forgot Password?

    • #18691

      marcorroma
      Member

      It works!
      Is it possible to print $img_class only for the first 3 images? Maybe with “array_slice”.
      This way I can use lazy load for images that are not displayed immediately.

    • #18692

      marcorroma
      Member

      I solved it like this:
      I changed the code like this:

      $supported_post_blocks = array(
      		'nolazyload'
      	);
      	if( !empty( $settings['lazyload'] ) && in_array( $settings['lazyload'], $supported_post_blocks ) ){
      		$img_class = 'nolazyload';
      	}
      	echo wp_sprintf( '<div class="thumb-w">%s</div>', get_the_post_thumbnail( null, $thumb_size, array( 'class' => $img_class ) ) );
      }

      And I added this to the post block which I want to disable from lazyload.
      $settings['lazyload'] = 'nolazyload';

      Thanks for the support

    • #18705

      Jacob
      Staff

      Hey there, You must be logged in to view this reply!

      Login | Register | Forgot Password?

Viewing 7 reply threads
  • You must be logged in to reply to this topic.

This is a PRIVATE forum for verified users only, to view all replies/answers, you must be logged in!

© Copyright 2020 by wpthms.com. All Rights Reserved.