[Resolved] Layout cell background image from custom field

[Author]

Posts

[massimoS527]

in the layout cell I call the various fields with this code to form a card

<p class="titolo-creatura">[wpv-post-title]</p>
<div class="prima-foto">[wpv-post-featured-image size="custom" width="500"]</div>
<p class="dedica">[types field='dedica'][/types]</p>
<p class="dedica-seconda">[types field='dedica-seconda'][/types]</p>
<p class="data-decesso">[types field='data-decesso'][/types]</p>

I want to use a background image that is chosen by a radio field (name field= layout-ricordo) , I added this code:

<p>background: url("[types field='layout-ricordo' size='full' url='true'][/types]")</p>

the final code is this:

<p>background: url("[types field='layout-ricordo' size='full' url='true'][/types]")</p>
<p class="titolo-creatura">[wpv-post-title]</p>
<div class="prima-foto">[wpv-post-featured-image size="custom" width="500"]</div>
<p class="dedica">[types field='dedica'][/types]</p>
<p class="dedica-seconda">[types field='dedica-seconda'][/types]</p>
<p class="data-decesso">[types field='data-decesso'][/types]</p>

you see the small background in the upper right corner - URL: hidden link

where am I wrong?

[massimoS527]

sorry, see the background on the top left

[massimoS527]

I am going crazy !!!

are hours that I try in many ways, because no one helps me ???

[massimoS527]

in this guide: https://toolset.com/documentation/getting-started-with-toolset/create-templates-to-display-custom-posts/

It is told: " If your theme comes with a page builder, you should use it instead of Layouts. Toolset is already compatible with some of the most popular page builders."

in my Ocean WP theme elementor is used, can you tell me HOW to create a layout for post typos?

thank you

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/split-how-to-create-content-templates-with-elementor/

[Christian Cox]

Hi, sorry we were short on staff at the end of the week and we are trying to catch up on the backlog now.

I want to use a background image that is chosen by a radio field (name field= layout-ricordo)
You should add the background URL style to a wrapping element like this:

<div style="background: url('[types field='layout-ricordo' size='full' url='true'][/types]')">
  <p class="titolo-creatura">[wpv-post-title]</p>
  <div class="prima-foto">[wpv-post-featured-image size="custom" width="500"]</div>
  <p class="dedica">[types field='dedica'][/types]</p>
  <p class="dedica-seconda">[types field='dedica-seconda'][/types]</p>
  <p class="data-decesso">[types field='data-decesso'][/types]</p>
</div>

I have split your question about Elementor into a separate ticket and I will follow up with you there.

[massimoS527]

think it's a writing error, see screenshot

[massimoS527]

my doubt is if I wrapped the shortcode correctly.

I did that. tell me if it's correct
(I'd like to do it myself and understand more about the toolset shortcode)

<div class="contenitore">
<div class="layout-creatura" style="background-image:url('[wpv-post-field name='wpcf-layout-ricordo']');">
<div class="titolo-creatura">[wpv-post-title]</div>
<div class="prima-foto">[wpv-post-featured-image size="custom" height="300"]</div>
<div class="dedica">[types field='dedica'][/types]</div>
<div class="dedica-seconda">[types field='dedica-seconda'][/types]</div>
<div class="data-decesso">[types field='data-decesso'][/types]</div>
</div>
</div>

is this a good solution too?

<div class="contenitore">
<div class="layout-creatura" style="background:url('[wpv-post-field name='wpcf-layout-ricordo']')">
<p class="titolo-creatura">[wpv-post-title]</p>
<div class="prima-foto"> [wpv-post-featured-image size="custom" height="300"]</div>
<p class="dedica">[types field='dedica'][/types]</p>
<p class="dedica-seconda">[types field='dedica-seconda'][/types]</p>
<p class="data-decesso">[types field='data-decesso'][/types]</p>
</div>
</div>

front-end result: see attached image

I wanted to know from you how you would write the layout

thanks

[Christian Cox]

It's probably better to use div tags because if your custom field content contains another p tag, that will cause invalid HTML. You cannot nest a p inside another p.

[massimoS527]

I wanted to ask you one last thing and then close the post.

1) as you can see I put a div = "container" but in practice it is only a CSS
     because it is the container or box of everything: writing, background image. then I declare values in the css. question: correct like this?

2) the shortcode that you have recommended to me is different from what I entered using layout, why this difference?

[wpv-post-field name='wpcf-layout-ricordo']
[types field='layout-ricordo' size='full' url='true']

[Christian Cox]

1) as you can see I put a div = "container" but in practice it is only a CSS
because it is the container or box of everything: writing, background image. then I declare values in the css. question: correct like this?
I'm sorry, I don't understand the question. If the styles show up as expected, then the code is probably correct.

why this difference?

[wpv-post-field name='wpcf-layout-ricordo']
[types field='layout-ricordo' size='full' url='true']

wpv-post-field shortcode is a shortcut to get the raw data from the field without any formatting.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-field
https://toolset.com/documentation/customizing-sites-using-php/functions/#image