Skip Navigation

[Resolved] [Container block] Help targeting items without a featured image

This support ticket is created 3 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 3 replies, has 2 voices.

Last updated by Alexander Rothschild 3 years, 8 months ago.

Assisted by: Waqar.

Author
Posts
#2028197
desired-result.jpg
Screenshot 2021-04-21 120913.jpg

Hi,

Please see the attached image. I have a view that outputs a grid of custom post types (Container block with a dynamic background featured image). Some of them have a featured image. Some don't. I would like to customize that gray square for the items that don't.

Right now the gray square color is hardcoded with an inline css (see screenshot), and the is no way to target those squares with css to add custom styling. If only the gray squares has a custom class attached to them (say, .no-featured-image), I could then target and style them in any way I need to.

Do you think you could add that?

#2028357

Hi,

Thank you for contacting us and I'd be happy to assist.

There is no built-in feature available for this, but you can include some custom script in the View's "Custom JS" section, that can look for the assigned background image style and if none is set, appends a custom class "no-featured-image".

Example:


jQuery(document).ready(function(){
	jQuery('.tb-grid .tb-grid-column .wpv-block-loop-item .wp-block-toolset-blocks-container').each(function() {
		var url	= window.location.href;

		var image = jQuery(this).css("background-image");

		var partFirst = image.split('url("');
		var partSecond = partFirst[1].split('")');
		
		if (url == partSecond[0]) {
			jQuery(this).addClass("no-featured-image");
		}
	});
});

I hope this helps.

regards,
Waqar

#2028437

Thank you, Waqar! With a couple of tweaks, it works perfectly!

jQuery(document).ready(function(){
    jQuery('.tb-grid .tb-grid-column .wpv-block-loop-item .wp-block-toolset-blocks-container').each(function() {
 
      if (jQuery(this).css('background').toString().indexOf(window.location.href) > -1)
        jQuery(this).addClass('no-featured-image');
    });
});
#2051639

The above snippet wasn't accounting for pagination. Here's a fix. No additional help is needed 👌

jQuery( document ).on( 'ready js_event_wpv_pagination_completed', function( event, data ) {
  
    jQuery('.tb-grid .tb-grid-column .wpv-block-loop-item .wp-block-toolset-blocks-container').each(function() {
 
      if (jQuery(this).css('background').indexOf(window.location.href) > -1){
        jQuery(this).addClass('no-featured-image');
      }
    });
});