CMS Development

EdCupaioli
Contributor

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

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: 

 

<nav class="my-nav {% if is_in_global_content_editor or is_in_module_previewer %}nav-scrolled{% endif %}">
<!-- All my nav code... -->
</nav>

 

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. 

 

1 Reply 1
Jnix284
Hall of Famer | Elite Partner
Hall of Famer | Elite Partner

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

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.


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Upvotes