How to set conditional displays for modules when in editing/preview modes

EdCupaioli — Mon, 24 Jun 2024 22:38:27 GMT

Background

I am developing a nav bar which is transparent with white text on init. This is an issue since the preview for the module has a white background.

Solution

Using the In-app editory and preview variables allowed me to set a conditional so I can view the menu in it's scrolled from top state. Example:

I used the is_in_module_previewer variable to check if the module was in the preview mode (boolean) and added the class that would make the links visible on white backgrounds.

I then used the if_is_in_global_content_editor variable since my nav is a global module and I want my content editors to be able to preview the nav bar while they edit.

Re: How to set conditional displays for modules when in editing/preview modes

Jnix284 — Tue, 25 Jun 2024 10:49:50 GMT

Thanks for sharing this @EdCupaioli, I've started to see more themes take advantage of the editor/preview variables to improve the user experience - there are a lot of cool things you can do with is_in_theme_editor as well.

topic How to set conditional displays for modules when in editing/preview modes in CMS Development

How to set conditional displays for modules when in editing/preview modes

Re: How to set conditional displays for modules when in editing/preview modes