heldercervantes

Illustrated options?

Recommended Posts

Hey there.

Anyone know of a clever approach to illustrate an options field with an image?

I often do modular content editors using a repeater and an options field for the type of block. The repeater has all fields, and each fields' visibility is configured so it appears only when it's relevant to the chosen block type. This is cool, allows a lot of flexibility, but on more complex solutions I sometimes find that the admin could benefit from seeing an image that illustrates the option that's chosen. Kind of like the theme choosing step when you install PW.

Any ideas on how to do something like this?

 

Thanks

Share this post


Link to post
Share on other sites

I don't know if I understood it right, but what about using FieldtypeRuntimeMarkup to show the image based on the option field selection?

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Maybe this is versatile for your needs...

Best regards mr-fan

  • Like 2

Share this post


Link to post
Share on other sites
2 hours ago, Sergio said:

using FieldtypeRuntimeMarkup to show the image based on the option field selection?

May I ask how? I use @kongondo's great module, however, the "content" of the field is updated only after the page has been saved. For example, I use it to display the sum of some values of some fields, which works great, but when editing those values only it is the next time when the page has been saved the sum is "updated". So my question is: how can this module be used to display an image (or anything else for that matter)  on-the-fly based on what is selected in the page editor?

Share this post


Link to post
Share on other sites
1 minute ago, szabesz said:

May I ask how?

I don't know. :) 

Share this post


Link to post
Share on other sites

i do this with selectize, or with some js that updates the selected opt; requires an extended input with data attr for img src

  • Like 2

Share this post


Link to post
Share on other sites
6 hours ago, szabesz said:

So my question is: how can this module be used to display an image (or anything else for that matter)  on-the-fly based on what is selected in the page editor?

JavaScript, CSS and $this->wire('files')->render('your-file') in Runtime Markup code setting :). 'your'file' has the PHP. See video demo below. Works on the fly, no need to save first + shows what's already saved.

 

6 hours ago, Sergio said:

I don't know. :) 

I do :). See video demo. 

 

8 hours ago, heldercervantes said:

Any ideas on how to do something like this?

Another option is RM as suggested by @Sergio. See this quick demo. I can post the code later in RM's forum.

 

 

Picture Options is a Select Options field. Options Illustration is a RuntimeMarkup Field.

 

  • Like 9

Share this post


Link to post
Share on other sites
8 hours ago, kongondo said:

I do :). See video demo.

I was hoping that :P Anyway, thanks for pointing me in the right direction! I will take a closer look soon.

Share this post


Link to post
Share on other sites
10 hours ago, kongondo said:

See this quick demo

Yep, that's exactly the behavior I was looking for. Time to get experimenting :)

Thank you all

Share this post


Link to post
Share on other sites
11 hours ago, szabesz said:

I was hoping that :P Anyway, thanks for pointing me in the right direction! I will take a closer look soon.

 

9 hours ago, heldercervantes said:

Time to get experimenting

Let me know if you need help :).

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.