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?
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
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');
});
});
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');
}
});
});