Inicio › Toolset Professional Support › [Resuelto] Display a View or Template
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.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
- | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | - |
- | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | - |
Supporter timezone: Europe/London (GMT+00:00)
Etiquetado: Backend editing, Content Templates, Front-end display, Layouts plugin, Views, Views plugin
Documentación relacionada:
Este tema contiene 12 respuestas, tiene 2 mensajes.
Última actualización por Nigel hace 6 años, 6 meses.
Asistido por: Nigel.
Hi,
for reference of the "main problem", please visit this post first: https://toolset.com/forums/topic/need-a-special-view-using-a-traffic-light-system/
I created a Custom Post Type "Veranstaltungen" with the needed custom field. Now I have the problem that I tried to display the events "in german called "Veranstaltungen") with Toolset. First I read some articles about Views, Contetn Templates etc, but I'am still very confused about it.
The overview ov the evens should look like this:
enlace oculto
That is the OLD Website and it should look similar on the new Website.
It would be great, if you could help with one example post type to display it with toolset like in the link above. For that reason I would like to create an account for you in the backend. If that is ok, how can I provide you the login credentials?
Thanks
Thorsten
Idiomas: Inglés (English ) Español (Español )
Zona horaria: Europe/London (GMT+00:00)
Hi Thorsten
Let me mark your next reply as private so that you can share credentials with me.
Idiomas: Inglés (English ) Español (Español )
Zona horaria: Europe/London (GMT+00:00)
Hi Thorsten
There is probably too much in your last post for me to answer in a single thread, but I'll make a start and split the thread into separate tickets later as I need to.
The first question about your View.
The Loop Editor is what determines what will be output by the View, according to whether there are any results to display or not, and for each result it will iterate over them and output what is found between the wpv-loop tags.
You can add content (e.g. shortcodes for the fields you want to display) directly into the Loop Editor, but it is common practice to group together such content into its own Content Template, and insert that Content Template between the wpv-loop tags.
If you use the Loop Wizard this happens automatically, and it will show the linked template immediately below the Loop Editor (in "Templates for this View"). That is what you have done with the View you created.
(You could go to Toolset > Content Templates and create a template there and insert it between the wpv-loop tags, or you might want to re-use a template previously created and insert that directly between the wpv-loop tags, but in such cases it wouldn't be shown in a Templates for this View section beneath the Loop Editor, you would need to edit the Content Template directly.)
The Output Editor you rarely need concern yourself with. A View has two parts—the filter and pagination controls, and the output of the View—and this section inserts each of those two sections using the shortcodes you can see, and it is possible to add some additional markup here if you want to affect how the view is inserted.
Your next questions about displaying the description below the date and linking to the post, well that is a question of inserting the fields you require and then wrapping them with the appropriate markup.
So you need to edit the "Templates for this View", insert the markup for the kind of output you want and then use shortcodes to insert the dynamic content from the standard and custom fields available on the posts your View is querying.
If you have a look at this codepen for example: enlace oculto
It shows you very rudimentary markup based upon the Bootstrap grid (which Toolset uses unless you disable it): enlace oculto
Where I have written {{dynamic content}} this is where you would insert the shortcodes in your template for the required fields.
You could use whatever markup suits you. Instead of using the Bootstrap grid you could add your own custom styles for the layout, using flexbox, say. Your original site uses tables.
Note that if you are using one of the supported page builders (Divi, Avada Fusion Builder, Beaver Builder, Visual Composer/WP Bakery) then you can design this template using a page builder, which might make setting up the required layout easier. We are currently working on adding Elementor support, too, so before too long you will be able to use Elementor for this as well.
You can recommend Brizy contact our lead developer at juan.d@onthegosystems.com who can discuss how they might collaborate.
If the above makes sense we can move on to the other issues, which I will split off into their own threads.
Hi Nigel,
thanks for the good explanation. Now I tried a little bit and with some extra-code from Bootstrap, it it looks like I wanted it with the view.
Now I'am working on the Single Event. I tried a little bit with Toolset Layouts and it works, but I would like to know, if I could realize that with a content template too (to get a shortcode like I did for the view and integrated it in the Page "Übersicht Veranstaltungen" to design a little bit with Elementor)? I created a content template and wanted to use the shortcode in a page "Veranstaltungsdetails", but this doesn't work. I think the problem is, that every single event post has another URL (created from the post title) to I can not assign a single wordpress page to a content template, right? Or is there a way to do so?
Maybe you could take a look on the website.
You can split it into two other threads (one for the template topic along with the Toolset form "Anmeldeformular", which contains the custom fields "Anmeldeformular" and another thread fot he login/registration topic).
Thanks
Thorsten
Los hilos nuevos creados por Nigel y vinculados a este se encuentran a continuación:
https://toolset.com/es/forums/topic/split-custom-display-in-forms/
Idiomas: Inglés (English ) Español (Español )
Zona horaria: Europe/London (GMT+00:00)
The normal use of Content Templates is where you have a custom post type, e.g. events, and you want to design the output of a single event post (so that you can include custom fields from these posts, which would not be output by the single.php template file of your theme).
So you create a Content Template, and you assign it to the event post type, and then whenever a single event post is being displayed Toolset will swap out the content that would be output by the single.php theme file for the actual post content and replace it with what is generated by your Content Template.
You use Layouts similarly, in place of Content Templates, by assigning them to a post type.
Several page builders have Toolset support built-in, meaning that you can design the Content Template using the page builder interface (e.g. Beaver Builder, Visual Composer (or WP Bakery) etc.). We are expecting a beta release for Elementor integration possibly this week, but won't know the full details ourselves until we see it. But I expect you will be able to assign a Content Template to a post type and design the template with Elementor (or would be able to use Elementor 2.0's new template functionality and insert Toolset content, e.g. custom fields, Views etc., into it).
You can also create un-assigned Content Templates which are essentially just a collection of HTML (including shortcodes) and insert those wherever you want.
You could insert such a Content Template somewhere on a page, for example, and its contents would be output when you view the page. But, note the context. You couldn't have it output fields of the "current" event, for example, because there is no current event because you are on a page. You could use the id attribute when inserting the template to set the context to a specific post.
Hi Nigel,
ok. So for the content template, how can I use the id attribute to set the context from the template to a specific post?
Yes, I know, that Elementor 2.0 isn't really Toolset ready yet. But with the little work-around (which I described in the first post) for the Shortcode for the View, I could design some things in Elementor with it, using the generated shortcode from the created view. Is there the possibility to do this with a content template too or with Layouts?
Idiomas: Inglés (English ) Español (Español )
Zona horaria: Europe/London (GMT+00:00)
Hi Thorsten
Sorry, I didn't really understand what you did with the workaround, could you explain in more detail?
You can add the id attribute to a Content Template (which is inserted using the wpv-post-body shortcode) to specify the source post (or page) for the fields in the template.
So this would use the Content Template "single project" to output post id=47 wherever you insert it:
[wpv-post-body view_template="single-project" id="47"]
Is that the kind of thing you mean?
Hi Nigel,
ok. But if I understand it correct, this would mean, that I always would have a "static" page. For example if I use a page called "Veranstaltungsdetails" (event-details) and that page should always show the current event-details for the corresponding event, that is not possible with the id, right?
My intention here is:
1. The user is on this site with the overview of all events (the created Toolset-view): enlace oculto
2. The user clicks on one of the event-links (its the [wpv-post-link]). Than, ths event-details should appear. Right now, I use the content-template. But I thought, that I could use that content template in a single page ("Veranstaltungsdetails"). I thought I could do it like for the view with the method of this video, which I used for the view in step one: enlace oculto (The important part starts at minute 39:00). Paul (the guy, who made this Tutorial-Video) used a view and than inserted that view in the wordpress-editor (text-mode) and clicked on "Build with Elementor"-button.
My question is, if I could do this with a content template (or even a Layouts template) too for the single event? But i doubt, that this is not possible and I have to use custom css for the single event template, like your colleague Agnes is using in this video (important part starts at minute 20:00): enlace oculto
Idiomas: Inglés (English ) Español (Español )
Zona horaria: Europe/London (GMT+00:00)
If you have a View which lists event-detail posts that link to the posts, then when a user clicks the link they are taken to the URL of the single event-detail post (e.g. site.com/event-detail/my-big-event/).
If you created a Content Template and assigned it to the event-detail post type, my-big-event would be rendered using that template.
Now, if instead you want the links to go to a static page:
1. you would replace the wpv-post-link shortcodes with manual links that specify the event-detail post id as a URL parameter, something like:
<a href="site.com/static-page/?eventid=[wpv-post-id]">Event details</a>
Upon clicking the link, the user is directed to the static page
2. You can display the event-detail post using your Content Template somewhere on that static page using the wpv-post-body shortcode where the id is determined by the URL parameter, which we can retrieve with the wpv-search-term shortcode, like so:
[wpv-post-body view_template="single-event-detail" id="[wpv-search-term param='eventid']"]
You could insert that shortcode into a text module anywhere on the page which you have designed with Elementor (or another page builder).
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-search-term
Hi Nigel,
your solution works fine! Thanks for your very good explanation. ?
So the view-shortcodes can also be used for the content-templates as in your solution?
I have some problems for understanding the wpv-search-term-shortcode. After reading the documentation for this search code I would understand, that you only can use this shortcode for a search result page, where the user for example searches for a certain search-term in a search field or something similar.
As far as I can see, I can not use your Bootstrap-Editor for content-templates like it is for Layouts, right?
If I want to display an image from the custom post-type "Veranstaltungen" for which I used the custom field for uploading an image, how can I insert it with bootstraps Image-Class (enlace oculto) into the content-template? The shortcode for the image [types field='titelbild' title='%%TITLE%%' alt='%%ALT%%' align='center' size='large' resize='proportional'][/types] and past it into the src-attribute of the image tag, the picture doe not show. I know that I have to put in the source of the image, but I thought that this shortcode provided me the infomration.
Another thing: I know from the Oxygen Facebook-Group, that the new SITE-Builder "Oxygen 2" (enlace oculto) (which I purchased last week) you also noticed this new site-builder. They set their focus on dynamic content creation and support for Toolset, ACF etc. This builder is very promissing and I don't know, if some of your colleagues is already in contact with them regarding a Toolset-integration. It would be cool, if this would be the case.
Thanks
Thorsten
Idiomas: Inglés (English ) Español (Español )
Zona horaria: Europe/London (GMT+00:00)
Hi Thorsten
The wpv-search-term shortcode's original purpose was to output the value of a search parameter.
By default if you use the standard WordPress search it will update the URL with an 's' parameter for the search term, e.g. site.com/?s=antelope, and you could output the search term ("antelope") using wpv-search-term.
However, you can use it to output the value of any URL parameter, you just need to specify the parameter with the param attribute, e.g. from the URL site.com/?height=500&width=800&quantity=9 you can output '800' using wpv-search-term with param='width'.
The shortcode [types field='titelbild' title='%%TITLE%%' alt='%%ALT%%' align='center' size='large' resize='proportional'][/types] would output the actual img tag for the titelbild field. If you just want the image URL then you can add the output='raw' attribute.
I tried out Oxygen2 myself and was pleased to see that quite a few Toolset features work out-of-the-box without requiring any special integration, but we are in contact with them about improving support for Toolset with Oxygen.
Hi Nigel,
ok, I tried the <img src="[types field='titelbild' output='raw'][/types]" class="img-circle"> and the image will be shown, but the bootstrap-class "img-circle" does not have an effect. I also tried another classes (for example img-thumbnail) and this also doesn't work. Do you know why the bootstrap classes are not taking effect?
IS there also a way to display the ALT-Attribute? I've tried different solutions (for example <img src="[types field='titelbild' output='raw' alt='%%ALT%%' ][/types]" class="img-circle">) but this didn't work.
Idiomas: Inglés (English ) Español (Español )
Zona horaria: Europe/London (GMT+00:00)
I would say the most likely explanation is that Bootstrap is not being loaded.
Go to Toolset > Settings and check whether Toolset is loading Bootstrap, or whether your theme is.
You can check that it has actually been loaded on the front-end by user your browser tools to inspect the image.
If it has a class of img-round then you should see the Bootstrap style set for it (see screenshot).
The alt attribute is generated automatically when you use the types shortcode to output the complete image tag. Outputting the raw value only outputs the stored URL of the image, and the ALT attribute isn't separately available.
If you are manually creating the img tags just so that you can add the img-round class to them, you could instead include the types field inside a container div and give that a classname which would allow you to add a CSS rule that did the same thing, leaving your ALT attributes intact, e.g.
.round-wrapper > img { border-radius: 50%; }