Dsiplay icons (or images) with field information on frontend

This topic has 4 replies, 2 voices, and was last updated 3 years ago by guerre64.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
December 3, 2021 at 2:05 PM #32389

guerre64
Participant

Not quite sure how to go about doing this on a Client website:

https://woocommerce-538177-2177082.cloudwaysapps.com/category/bamboo-specifications/

For each Bamboo plan type there are a number of custom fields that are filled on the backend for the post type and most are consistent from plant to plant, such as Maximum Height, Culm Diameter, Min. Temperature, etc.

However, there are some fields that are radio button or checkbox choices, such as Collectibles, Ornamental, Frost Tolerant, etc.

I want to be able to display icons or images on the frontend that are associated with the text content, so that if the value of Frost Tolerant, for instance, is YES, then a little icon representing that (probably a snowflake) will display on the specification card for that plant. This could be either next to the text for Frost Tolerant or elsewhere on the card.

How do I go about doing that in Metabox??

Add New Note to this Reply

December 4, 2021 at 10:42 PM #32420

Long Nguyen
Moderator

Hi,

You can use the extension MB Conditional Logic to show/hide a field based on another field value. Please read more on the documentation https://docs.metabox.io/extensions/meta-box-conditional-logic/

Add New Note to this Reply

December 11, 2021 at 6:46 PM #32535

guerre64
Participant

Do you have any examples of how to do this - the documentation just really doesn't help to get an idea of what to do for someone who is relatively inexperienced?!

Add New Note to this Reply

December 12, 2021 at 12:26 PM #32546
Long Nguyen
Moderator
Hi,

You can use the field switch or checkbox on the backend to ask for show/hide the image field. Then on the frontend, use the code to check the value of the field and show the image. Just like this
```
$value = rwmb_meta( $field_id );
// If field is on.
if ( $value ) {
    echo 'Slider goes here';
    // Do something.
    echo '<img src="#123" alt="your image here">';
}
// If field is off.
else {
    echo 'No slider';
    // Do something else.
}
```
Refer to the documentation
https://docs.metabox.io/fields/switch/#template-usage
https://docs.metabox.io/fields/checkbox/#template-usage
https://docs.metabox.io/fields/single-image/

Add New Note to this Reply
December 13, 2021 at 2:12 AM #32558

guerre64
Participant

Thanks for that extra info - I'll take a look.

Cheers 🙂

Add New Note to this Reply
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.