Illustrated options?

[heldercervantes]

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

[Sergio]

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

 

 

[mr-fan]

Maybe this is versatile for your needs...

Best regards mr-fan

[szabesz]

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?

[Sergio]

1 minute ago, szabesz said:

May I ask how?

I don't know.  

[Macrura]

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

[kongondo]

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.

 

[szabesz]

8 hours ago, kongondo said:

I do . See video demo.

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

[heldercervantes]

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

[kongondo]

11 hours ago, szabesz said:

I was hoping that  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 .