[Gelöst] Need a special view using a "Traffic light" system

[Author]

Artikel

[ThorstenS967]

Hi,
I've opened a thread some time ago (https://toolset.com/forums/topic/help-with-toolset-and-a-custom-view-on-a-website/). Now I created an Event Custom Post Type. I wanted to use checkboxes (as desribed by José in the other thread) but I think it's better to use radio buttons in order to give the team member in the backend only the choice for one color to select from per Event (red OR yellow OR green). Am I right? But how can i choose the "real" colors in the backend and in the frontend for this? For example if the team member in the backend chooses a checkbox (or radio button?) with the value "red", how can I realize it, that in the frontend the color red will be shown? In the screenshot you can see, what it should look like in frontend (thats the actual, old site). Also how can I realize this to be shown in the frontend?
Thanks
Thorsten

[Nigel]

Hi Thorsten

I made a quick demo to show what's involved.

I made a radio custom field "traffic lights" with 3 options, red, yellow, and green, that I assigned to my post type, and I created some sample posts with differing values set.

In then created a View to display the posts, along with the traffic lights.

In the template I used in the Loop Output section I added a span that would serve as the traffic light symbol, and I set its colour by dynamically generating a class name that included the colour itself, and then defined CSS styles based upon those classes. You can see that in the screenshot, but let me repeat how I generated the class names here for clarity:

<p><span class="traffic traffic-[types field='traffic-light' output='raw'][/types]"></span>[wpv-post-title]</p>

If you wanted to be clever, when you define the radio custom field, you could use HTML with inline styles in the display label so that in the backend when editing posts instead of just showing the text "Red", "Green" etc., you could colour the text or make a traffic-light span much like is shown in the View.

[ThorstenS967]

Hi Nigel,

thanks for the good explanation. I could follow this until the point of creating a view. When I created the view (create new view) in my backend and used the loop-assistent, it shows up like in the attached screenshot (Toolset_Ampelsystem_View.png). Did you use the loop assistent in your screenshot 07.00.46.png? I'am new to the whole Toolset framework, because I use it now for the very first time. I usedyour getting started and other documentation but I have some problems in understanding the difference between views, content-templates and layouts. Also I see in your screenshot 07.00.46.png the property "output=raw". Is there documentation for this? Also can I get an outoput like in the first screenshots where you can see on the right side the Events with the dates and on the left side the traffic-lights? I think, I have to use conditional options for events, which are booked out and the sentence "The event is booked out, please subscribe to a waiting list" appears (the red sentences in the screenshots). Is this possible with Toolset?

Thanks
Thorsten

[Nigel]

Hi Thorsten

In my View, yes, I used the Loop Wizard and gathered together the fields in a template.

Regarding confusion between Views, Content Templates and Layouts, see https://toolset.com/documentation/user-guides/when-to-use-content-templates-instead-of-layouts/ and https://toolset.com/faq/whats-the-difference-between-a-view-and-a-view-template/.

Briefly, WordPress themes provide PHP templates to use for displaying different kinds of content, so they typically have one template for pages, another for single posts, and sometimes special templates for single posts of a custom post type, as well as templates for displaying lists of posts (archives, such as the blog archive).

With Toolset you can create templates to use in such scenarios that you create in the WP admin without needing to write PHP, e.g. a template used for single "project" custom posts. You can do that with Layouts (our page builder), or just with Content Templates (which are part of the Views plugin, but are not "Views").

You can also make Content Templates that are not assigned to any kind of content and are just bits of HTML you may want to re-use in different places, inserting them wherever you want.

A View queries the database to retrieve lists of content. You can add content (HTML and fields inserted by shortcodes) directly in the output section, but if you use the Loop Wizard you have the option to gather these together into a template. These are just unassigned Content Templates (that you can see listed at Toolset > Content Templates) but they are "special" inasmuch as they are shown right there in the View where you can edit them directly.

So, that's what I did. I created a View to display my posts, used the wizard for the output and grouped the content together in a template, which is what you can see in my original screenshot.

You can either add your fields directly in between the wpv-loop tags in the Loop Output Editor, or run the Wizard and collect them in a linked template, where you should be able to reproduce what I have in my initial reply.

As for conditionally displaying "The event is booked out, please subscribe to a waiting list" then you would use the wpv-conditional shortcode as described here: https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

You will want to check if your ampel-lichter field is red (or whatever the equivalent option actually is) before displaying the message.

[ThorstenS967]

Hi Nigel,
thanks to your explanation and this video versteckter Link I now have a basic understanding how Toolset works.
My client asked, if it is possible to display the events like in this Template: versteckter Link
Just scroll a little bit to the "Upcoming Events". He asked if it is possiblr to do it like this? The traffic-light should than be shows when you hover the image. Would that be possible with Toolset? I think I need CSS3 and JavaScript, right? I found some code snippes like this for the hover effects, but it's not the same als like in the Template: versteckter Link
I also found this: https://stackoverflow.com/questions/13769655/dynamic-image-overlay-with-jquery
So, from my knowledge that I now have from Toolset, if I want it to display as it is in th Template example, I should use the view plugin for displaying the events (in combination with a template??) and a content template to display a single event, If I click on an Event, right?
Thanks
Thorsten