Skip Navigation

[Résolu] showing background image in a set of cells in layout

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem:

Display custom image field as background image of HTML div tag.

Solution:

It needs custom CSS codes, for example:

https://toolset.com/forums/topic/showing-background-image-in-a-set-of-cells-in-layout/#post-1306211

Relevant Documentation:

This support ticket is created Il y a 5 années et 3 mois. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Aucun de nos assistants n'est disponible aujourd'hui sur le forum Jeu d'outils. Veuillez créer un ticket, et nous nous le traiterons dès notre prochaine connexion. Merci de votre compréhension.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Ce sujet contient 8 réponses, a 2 voix.

Dernière mise à jour par indianplayschools Il y a 5 années et 3 mois.

Assisté par: Luo Yang.

Auteur
Publications
#1303235

Tell us what you are trying to do?
I would like to set an image from post forms (filled by users) as a background image.
Is there any documentation that you are following?
I am following the real estate layouts
Is there a similar example that we can see? Code from Real estate Example
<style>
.property-header {
background-image: url([types field='property-photo' size='full' url='true'][/types])
}
</style>
What is the link to your site?
designsangam.com

#1303247

Hello,

Yes, it is possible to display a custom image field as background image, but in order to make the Types shortcodes working:
[types field='property-photo' size='full' url='true'][/types]
you need to put those custom CSS codes into post content as inline CSS codes. For example, if you are using Toolset Layouts plugin, you can put those CSS codes you mentioned above into Visual editor or Content template cell.

More help:
https://toolset.com/documentation/user-guides/content-template-cell/
https://toolset.com/documentation/user-guides/rich-content-cell-text-images-html/

If you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL, I can setup a demo for you.

#1304529

Thanks for the details, I have done below modifications in your website:
Edit the layout "Try designer", edit the visual editor cell:
1) Enable the option "Disable automatic paragraphs"
2) Change the codes as below:

<style>
.designer-header{
background-image: url([types field='featured-image' size='full' url='true'][/types])
}
</style>
<div class="designer-header">
<h2 style="color: white;">[wpv-post-title]</h2>
</div>

it is only a demo, for your reference.

More help:
lien caché

#1304591

Thank you.
I see two images. May I know why?
lien caché
I have added a featured image field (different from the one WordPress post has) in custom fields group of designers.
When I try to edit designer forms, I see two featured image fields. Maybe I added them sometime back. But, I am unable to delete them as I see a locked symbol beside them. When I change the status of Featured Image(created by me ) to Not required, I am able to delete one. But, I want the Feature Image field to be in the Required mode and would like to have only one featured image in Designer post form

Les nouveaux fils créés par Luo Yang et associés à celui-ci sont repris ci-dessous :

https://toolset.com/fr/forums/topic/when-i-try-to-edit-designer-forms-i-see-two-featured-image-fields-maybe-i-added-them-sometime-back/

#1304643
ve1.JPG

The CSS codes are applied to CSS class name "designer-header":

.designer-header{
...
}

So all HTML div tags with CSS class name "designer-header" will be applied the same background image.

I have checked the URL you mentioned above, there are three HTML div tags with the CSS class name "designer-header".
You can find them here:
lien caché
1) Edit the first visual editor cell:
in the content :

<div class="designer-header">
...

2) in section "Tag classes (optional)", see screenshot: ve1.JPG

3) Edit the second visual editor cell, in section "Tag classes (optional)"

For the other new questions, please check the new thread here:
https://toolset.com/forums/topic/when-i-try-to-edit-designer-forms-i-see-two-featured-image-fields-maybe-i-added-them-sometime-back/

#1305473

My issue is resolved now. Thank you!

#1305489

I have seen in the example that the background image fills the entire space beautifully. But, in my case, I get some gap all around. Do I need to add any code? Is this a styling issue?
lien caché

#1306211

It should be a CSS problem, I assume you are going to add CSS padding for text "Sirisha Allamneni", for example, you can modify the CSS codes as below:

<style>
.designer-header{
  background-image: url([types field='featured-image-sho' size='full' url='true'][/types]);
  padding: 50px; 
}
</style>
#1306255

I think I should know bootstrap, css and html well for knowing the layouts. I will try to achieve the desired layout through DIVi