Hi there,

I’m using the Post Loop Builder module in Salient with the following settings:

• Post Type: Portfolio

• Display Type: Grid

• Display Style: Content Under Featured Image

• Card Design: Enabled

• Overlay Secondary Project Image: Enabled

• Secondary Project Image Alignment: Overflowing Right

→ But I want the secondary image to display centered below the main image, not as an overlay to the right.

🎯 What I’m trying to achieve:

I would like to replace the .item-main div (which contains the title and meta) with the secondary image (.nectar-post-grid-item__overlaid-img), and display it visibly below the main image, fully centered.

In short:

📍 Main image

📍 Secondary image centered below

(no title, no metadata, no overlay)

🔧 What I’ve tried:

• I attempted to override nectar_post_grid_item_markup() via a custom plugin and via my child theme.

• I also tried injecting JavaScript and CSS to reposition the secondary image, but since it’s dynamically injected and designed as an overlay, this didn’t yield a clean result.

• The main issue is that nectar_post_grid_item_markup() seems to be a pluggable function hardcoded into loop-markup.php inside the salient-core.zip plugin folder, with no filters or hooks available to override just a portion of the markup.

❓My questions:

1. Is there a clean, Salient-approved way to override this specific Post Grid layout via a child theme or custom plugin?

2. Is nectar_post_grid_item_markup() hooked in any way that would allow a remove_action() or add_filter()?

3. If not, can you suggest the best approach to safely override this logic without editing core theme/plugin files?

🔁 Environment:

• WordPress Multisite

• Salient theme with a child theme active

• Salient Core plugin

• Post Loop Builder (Portfolio) in use on a page

• I’ve cleared all caches, tested in Incognito mode

Thanks in advance for any guidance. I’d love to implement this tweak cleanly so I can keep using Salient without worrying about update conflicts.

Best regards,

Michael

Hello Tahir,

Thanks for your help.

Please check : https://bhm.meerapfel.com

I’ve managed to optimize the layout partially with custom CSS — for example, hiding the post heading and adjusting the .nectar-post-grid-item__overlaid-img like this:

.post-heading {  display: none !important;
}
.nectar-post-grid-item__overlaid-img {  
position: absolute;  
z-index: 100;  
top: 100% !important;  
right: unset !important;  
transition: none !important;  
height: 115px !important;  
width: 362px !important;  
transform: translate(-50%, 5px) !important;  
box-shadow: unset !important;
}

However, I’m still facing several issues on mobile:

1. Logos are not displaying correctly — often not resizing or positioning properly.

2. Scrolling between rows feels blocked — I need to swipe multiple times before the next row appears. All the rows use full_height="yes" and columns_placement="top".

3. I have enabled Fullscreen Rows in the theme settings, and even though I’ve checked the option to display the footer by default, the footer doesn’t appear.

Do you have any advice on how to:

• Fix the scrolling experience on mobile?

• Ensure proper display of logos?

• Make sure the footer shows up even with fullscreen rows?

Thanks in advance for your guidance!

Best,

Michael

Hi there,

I’ve noticed that when I disable the “Fullscreen Rows” option, I do indeed experience fewer bugs — but at the same time, I lose the main benefit of using fullscreen rows, which is something I’m really interested in keeping.

My main issue is that on mobile, it just doesn’t behave as expected:

• The footer doesn’t show up, even though I’ve double-checked all the settings.

• I’d also really like to make the logos display properly on mobile without them interfering with the ability to scroll down smoothly.

It would be awesome if someone could help me adjust things so everything works nicely together — keeping fullscreen rows, fixing the footer display, and making sure logos don’t mess up mobile scrolling.

Thanks a lot in advance