Placeholder image of event page in a post grid

• 

  ahliuone · Member · Mar 1, 2026 at 9:22 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I wonder if anyone could give me some advice on how to change the placeholder image of an event page without a featured image which appears in a post grid?

  The current placeholder image is a default image: https://royalasiaticsociety.org/wp-content/plugins/js_composer/assets/vc/vc_gitem_image.png

  This is where the placeholder image appears:

  

  I have tried with css coding but without success.

  Thank you very much.

  The blog I need help with is: (visible only to logged in users)

• 

  james3265166 · Member · Mar 2, 2026 at 12:38 am

  • Copy link

  To replace the default WPBakery placeholder image on royalasiaticsociety.org, you must use a CSS override to “layer” a new custom image over the hard-coded VC_gitem-image.png file. Because this placeholder is part of the plugin’s core assets, it cannot be swapped via a simple setting; instead, you should target the .vc_gitem-placeholder class in your Additional CSS menu to set a new background-image and use display: none on the original image tag to hide the grey default graphic. This method ensures that your event grid maintains a professional, branded appearance by automatically displaying your society’s logo or a custom placeholder whenever a featured image is missing, without requiring you to manually edit every event post.

  You can implement this change globally by adding the following code to Appearance → Customize → Additional CSS:

  /* Replace WPBakery Post Grid Placeholder */.vc_gitem-placeholder { background-image: url(‘YOUR_IMAGE_URL_HERE’) !important; background-size: cover !important; background-position: center !important; min-height: 200px; /* Adjust height to match your grid */}.vc_gitem-placeholder img { display: none !important; /* Hides the default grey placeholder */}

• 

  ahliuone · Member · Mar 2, 2026 at 6:40 pm

  • Copy link

  Many thanks for the response. Unfortunately the css code doesn’t work. The HTML code where the default image appears is as follows:

  <div class=”vc_gitem-zone vc_gitem-zone-a vc-gitem-zone-height-mode-auto vc-gitem-zone-height-mode-auto-1-1 vc_gitem-is-link” style=”background-image: url(‘https://royalasiaticsociety.org/wp-content/plugins/js_composer/assets/vc/vc_gitem_image.png’) !important;”><a href=”https://royalasiaticsociety.org/event/dr-yashashwini-chandra-title-tba/” title=”Dr Yashashwini Chandra – Title TBA” class=”vc_gitem-link vc-zone-link”></a><img decoding=”async” class=”vc_gitem-zone-img” src=”https://royalasiaticsociety.org/wp-content/plugins/js_composer/assets/vc/vc_gitem_image.png” alt=”” loading=”lazy”><div class=”vc_gitem-zone-mini”></div></div>

  Does that mean I should target the entire class instead in the CSS?

  Thank you.

• 

  james3265166 · Member · Mar 4, 2026 at 12:11 am

  • Copy link

  Since WPBakery is generating an inline style with !important directly on the div (the “final boss” of CSS specificity), standard CSS selectors are ignored because they have lower priority. To force your custom placeholder to appear on royalasiaticsociety.org, you must use an Attribute Selector that specifically targets any element whose style contains the string “vc_gitem-image.png,” allowing you to override that specific inline rule without affecting posts that have real featured images. By adding the following code to Appearance → Customize → Additional CSS, you can successfully “mask” the default grey icon with your own branded image and hide the redundant <img> tag that sits inside the container.

  /* 1. Target the DIV and override the inline !important background */div.vc_gitem-zone[style*=”vc_gitem-image.png”] { background-image: url(‘YOUR_IMAGE_URL_HERE’) !important; background-size: cover !important; background-position: center !important;}/* 2. Hide the actual <img> tag sitting inside that same div */div.vc_gitem-zone[style*=”vc_gitem-image.png”] img.vc_gitem-zone-img { display: none !important;}