[Resolved] Add a tab/ribbon to Toolset grid

[Author]

Posts

[Pete]

Hi there,

Just a quick question please. See image attached, is there a way of adding a tab/ribbon (in red for example) to specific grids, the word in this being a category?

In this case these are new properties.

Can't find anything and unsure what wording to use to see if there are an examples and instructions.

Many thanks, Pete

[Waqar]

Hi Pete,

Thank you for contacting us and I'd be happy to assist.

To show a specific HTML element like a div container for this ribbon, conditionally based on a category/taxonomy, you can use the conditional output block.
https://toolset.com/documentation/user-guides/views/conditional-html-output-in-views/displaying-taxonomies-conditionally/

Once the necessary HTML for the ribbon is included in the correct grid items, you can use custom CSS code to make it show as a ribbon. Here is a useful video tutorial with code sample:
hidden link

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[Pete]

Hi there Waqar,

Thank you for that, worked a treat and didn't need the ribbon CSS, used my own once I saw what this was doing 🙂

I'm using this in the view:

<span class='ribbon'>[wpv-conditional if="( CONTAINS(#(guests),'New Property') )" evaluate="false"]
<p>New Property</p>
[/wpv-conditional]

Is there a way for 'other' views I have to pull the content from a custom field I create in each post.

By that I mean...say I create a custom field. If left blank nothing appears however if I add a words like 'Luxury Property' this appears in the ribbon. If on another post I add 'Lake View' that appears.

The important thing is, if I leave this blank 'nothing' appears.

Worth an ask. Thanks again.

[Waqar]

Thanks for the update and glad that it works.

For showing the ribbon conditionally, it would make sense to wrap the entire HTML for the ribbon inside the conditional block and not just the inner text.

Instead of:

<span class='ribbon'>
[wpv-conditional if="( CONTAINS(#(guests),'New Property') )" evaluate="false"]
<p>New Property</p>
[/wpv-conditional]
</span>

You can use:

[wpv-conditional if="( CONTAINS(#(guests),'New Property') )" evaluate="false"]
<span class='ribbon'>
<p>New Property</p>
</span>
[/wpv-conditional]

This way, the ribbon container, and the text are both dependant on the conditional display block.

For checking for empty or non-empty values in a custom field, we have a detailed guide at:
https://toolset.com/documentation/user-guides/views/conditional-html-output-in-views/checking-fields-and-other-elements-for-emptynon-empty-values/

Here is an example to show a ribbon with text, only when a custom field with slug "field-slug", has some non-empty value:

[wpv-conditional if="( $(wpcf-field-slug) ne '' )"]
<span class='ribbon'>
<p>New Property</p>
</span>
[/wpv-conditional]

[Pete]

Morning Waqar,

Thank you for the suggestion of wrapping the entire HTML for the ribbon inside the conditional block, great.

You've lost me a little with the other info. Unsure if you understood what I was asking about.

See image attached...

Ideally on each portfolio we have custom fields, ideally if we create a new one called 'ribbon'...if we fill this in it will then appear.
It would need to be a variable word, not one taken automatically from a slug etc.

Is this possible?

Thank you.

[Waqar]

Making the text inside the conditional block won't be difficult since shortcodes from Toolset Views ( ref: https://toolset.com/documentation/user-guides/views/views-shortcodes/ ) and Types Fields API ( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/ ) can be used inside them to show the required information dynamically.

For example to replace the "New Property" text from the last example with the value of a custom field with slug "ribbon-text", you can use:

[wpv-conditional if="( $(wpcf-ribbon-text) ne '' )"]
<span class='ribbon'>
<p>[types field="ribbon-text"][/types]</p>
</span>
[/wpv-conditional]

[Pete]

Hi again,

Thank you for your help so far...almost perfect...works better than I could have hoped.

However see pic. The ones that have no value are showing the small ribbon box.

hidden link

You sent me some info about this I think however it was hard to understand what I should do in my situation.
Is there a way of hiding this if no info is added to the custom field?

Thanks again.

[Waqar]

Thank you for sharing the screenshot.

It is strange, that the empty ribbon HTML is still showing when it is wrapped inside the conditional block.

Can you please share temporary admin login details, so that I can troubleshoot this?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

[Waqar]

Thank you for sharing the admin access.

I noticed that the conditional block is still using the old condition of checking for a taxonomy term:

[wpv-conditional if="( CONTAINS(#(guests),'New Property') )" evaluate="false"]
<span class='ribbon'>
<p>[types field="ribbon"][/types]</p>
</span>
[/wpv-conditional]

You can update it to check for the "ribbon" custom field value, as suggested in my earlier message:

[wpv-conditional if="( $(wpcf-ribbon) ne '' )"]
<span class='ribbon'>
<p>[types field="ribbon"][/types]</p>
</span>
[/wpv-conditional]

This should do the trick.

[Pete]

Hi Waqar,

Thank you very much for your help ref this, worked better than I hoped.

Appreciate your time. Many thanks again, Pete