[Gelöst] how can I create a background image for a cell (bootstrap) in views
This support ticket is created vor 7 Jahre. 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.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
I am simply trying to create a classic grid view with images from a custom field of the specific post used as a background. However I can´t manage to create a background image from a custom field for a cell (bootstrap) of a grid view ? Please let me know how this can be managed.
If you want to set background images, you do so using CSS (and the background-image property).
But you can't output Types fields in the custom CSS section, or in your theme's CSS files.
But. You can add style tags in your loop output section and output the Types field there.
You can see a simple example of how I did that in the screenshot (where I am just outputting the items in a list, but you can adapt this readily enough for your grid).
If you need any further help implementing it, let me know.
I tried your code, the problem is you are using in your example the post id and post title fields but I need other types fields data to appear on top of the image - what would the code look like (please no screenshot 🙂 . Thanks a lot in advance
The problem in your example where you have added the inline style (on line 8 of your code sample) is that you are creating a rule for .col-sm-4-[types field='location-name'] but there is no element with such a class name.
The div you want the background added to starts on line 5 and only has the class "col-sm-4".
In my example I added a class of "grid-item-[wpv-post-id]" to the containing DIV, so that I could then target the same DIV with my inline style using the same CSS rule for .grid-item-[wpv-post-id].
I use wpv-post-id here simply because it will be unique for each post and so can be used to generate a unique class name for each post in the loop output. It doesn't matter what you use because it is not output to the screen, it is just used to create a class name for the container DIV, so it just needs to be unique to each post.
If the field location-name will be unique to every post then you could use that. But in case it's not, this should work:
Say the first post in the loop has an id of 37, then that will create a div with a class of item-37 which we then target with an inline style rule of .item-37 { ... }.
ok, thank you I managed to create a grid view using Visual Composer columns and rows since I don´t want to bloat the code using addtionaly Bootstrap. It works fine unless I use ajax automatic reload to filter things. What happens is it does the automatic reload filtering but does not show the background images, instead it shows the Visual Composer column code (wich works fine when filtering manually). Any idea how I could resolve this problem ?
Heres the code I used:
The Filter Editor
[wpv-filter-start hide="false"]
[wpv-filter-controls][wpml-string context="wpv-views"]Locationskategorien:[/wpml-string] [wpv-control taxonomy="location-kategorie" url_param="wpv-location-kategorie" type="select" default_label="alle Locations"][wpml-string context="wpv-views"][/wpml-string]
[/wpv-filter-controls]
[wpv-filter-end]
The Loop Output Editor
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="Loop item in griddyview"]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
THE CSS
/* class to style a single 1/3 visual composer colummn and loop it then*/
.ohgrid {width:370px; height:220px; margin:6px; font-size:20px; color:white;padding:0px 10px 0px 10px;background-size: cover;border-radius:4px;
}
THE Loop item in griddyview
[vc_column width="1/3" el_class="ohgrid ohgrid-[wpv-post-id]"]
[types field='location-name'][/types]
<style>.ohgrid-[wpv-post-id] { background-image: url("[types field='locationfoto-1' size='full' url='true'][/types]"); } </style>
[/vc_column]
There is a problem with how Visual Composer registers its shortcodes: it doesn't register them on the back end, and in WordPress all ajax requests go through admin-ajax.php which is equivalent to a back-end request, so the VC shortcodes are not available.
That is not specific to Toolset, it simply reflects how VC registers its shortcodes, which means you cannot use them where an ajax request is made (such as ajax pagination and filter updates).
The good news is that a colleague of mine identified some VC code that you can trigger to re-register the shortcodes after an ajax request, but note that it has worked before but there are no guarantees that it will continue to work.
Assuming it still does, you can add the following to your theme's functions.php file (or using a plugin such as Code Snippets).
add_action('init', 'add_mapped_shortcodes_on_init');
function add_mapped_shortcodes_on_init() {
if ( is_admin() ) {
WPBMap::addAllMappedShortcodes();
}
}
Hi Nigel, thank you that piece of code does the job perfectly but of course it´s a risk to use it for a client if you are saying that it might not work in the future anymore.
I have now been experimenting with WP Types for a couple of months and I learned a lot although I have to admit that the start with the WP Types is rather frustrating (importing reference sites e.g. doesn´t work on any of the servers I am using). The big plus is really that you can create sites for clients and make administration for them easy.
Frustrating is still that for a so super common thing like a grid view with background images from custom fields you have to hard code things instead of using a predefined functionality.
Above code will work or not in future it completely depends upon the third party plugin ACF as if they do change it with new release if might not work and we do not have control on it as its ACF plugin related.
yes, yes, of course I understand that this depends on the third party plugin, but since you are promoting Visual Composer compatibility, I was expecting a bit more integration or at least a promise for future updates and most of all grid views with background images coming from custom fields....
We are indeed compatible with the basics but there are some areas still being worked on.
One of which is the AJAX reload and that is because of Visual Composer so each time we reload the page the plugin needs to know there is a page reloaded.
This is not a problem limited to VC and toolset as any plugin I would imagine that does some form of AJAX reload and changing the data of a VC page will result in the VC elements not rendering.
Thanks,
Shane
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.
