[Resolved] Elementor Background Image not showing correctly on View

[Author]

Posts

[Jaime]

Tell us what you are trying to do?
Hi!
I want to return to a previous ticket I opened and marked as solved.
Here you have the url
https://toolset.com/forums/topic/image-field-not-showing-correctly-elementor/

-> I understand that probably the issue here is not concerned to Toolset, so if this is right, please tell me and I will marked this ticket as solved. Don't want to waste your time with other plugins problems.
-> I wrote to Elementor support/community in order to find a solution there. Still waiting.
-> I found a temporary solution with Image fields, so this is not an urgent ticket.

· I want to return to the ticket to add some information.
I found the problem only appears with Background Images (If I insert an Image Field, the behavior is correct) and only when I insert the Template shortcode on Views.
I created a Template with Elementor, and it displays correctly on the web, but when I insert it in Views, it's seems that is Views who displays the wrong background image. I'm not sure of that, but it seems to me that the problem is here.

What is the link to your site?
You have access on the previous ticket, but if you need a new one, I'll be glad of give you access.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

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

I can have this investigated in light of this new information that issue only appears when using the Elementor template inside a Toolset view.

Can you please share temporary admin login details again along with the example link where the template can be seen with and without the view?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[Jaime]

Hi there Waqar!
Did you red my last message?
Thanks!
🙂

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing these details.

I noticed that the way the "Elementor Custom Skin" background image feature works, it re-uses the first post in the view's loop as a background source.

To overcome this limitation, you can use a workaround, where you can wrap the "Cursos Waqar" view's loop item output, within a special div with class "elementor-custom-template-wrapper-[wpv-post-id]", so that it is unique for each loop result:

<div class="elementor-custom-template-wrapper-[wpv-post-id]">
[elementor-template id="1333"]
</div>

Next, you can include some custom CSS code in the view's loop item content, to set the current result's featured image, as a background:

<style>
.elementor-custom-template-wrapper-[wpv-post-id] .elementor-section-wrap .elementor-section .elementor-background-overlay {
background-image: url([wpv-post-featured-image size="full" output="url"]);
}
</style>

You can see this working on the page "Cursos Waqar".

[Jaime]

My issue is resolved now. Thank you!
Incredible support always!
🙂