Connect with us

Published on: 12 Sep 2016

This is part 2 of the series of short articles called #whyusemodx I showcase why we at Any Screen Size choose MODX for our web projects. Part 2 is about Output Filters.

MODX Output Filters

Output Filters are pretty amazing and very usefull for any MODX project.

See the official documentation for MODX Output Filters here.

MODX Output Filters are described as:

Filters in Revolution allow you to manipulate the way data is presented or parsed in a tag. They allow you to modify values from inside your templates.

What does this mean? Lets look a few examples.

Show the Longtitle if not empty

Show the resource Longtitle if it is not empty. If it is empty use the Pagetitle.

p { color: red }

Longtitle Output Filter template code


	

Show Sidebar option

Show the Sidebar if Show sidebar option is yes.

Lets say we have a optional sidebar on our detail page and we would like the clinet to be able to edit the sidebar content in the MODX manager. We also want to give the client a option to show or hide the sidebar.

To do this without creating a seperate MODX Template, we simply use Output Filters.

We use two Output Filters to:

  • add a class of has_sidebar to our main section

  • show or hide the sidebar code

Sidebar Output Filter template code


	

To get this working we only need to create two MODX Template Variables:

  • sidebar_show
    radio or dropdown option with the values: Yes==yes||No==no lets also set the default option to no

  • sidebar_content
    richtext field where we can add the sidebar content

Example of the sidebar options in the MODX manager

Example of the sidebar options in the MODX manager - Any Screen Size

Output Filter with Template Variable

Show content based on Template Variable (page option).

You can even combine MODX Template Variables with output Filters! Lets say we have page with a Call To Action content block.

Of this CTA block there are 2 variants:

  • Try for free

  • Contact support

The client would like to have the option on every page to show the Contact support CTA block. But by default the page should display the Try for free CTA block.

We could create a MODX Template for both options, but a better solution is to use a Output Filter in combination with a Template Variable.

Output Filter with Template Variable template code


	

To get this working we only need to create one MODX Template Variable:

  • cta_box
    radio or dropdown option with the values: Try for free==try_for_free||Contact support==contact_support let's set the default option to try_for_free

Example of the CTA box option in the MODX manager

Example of the CTA box option in the MODX manager - Any Screen Size

Combining with System or Context settings

We can take this even further by combining Output Filters with System or Context settings.

Here we have a setting based on the Context or Site setting summerSpecial.

Whis this setting it is very easy to create a content section, site wide, based a specfic marketing strategy like a summer special.

The following code simply shows the chunk (HTML code) cta_special when the site setting summerSpecial is set to yes.

Example of System Setting based template code


	

Believe it or not, but this is just the very beginning of what is possible with MODX Output Filters, read the documentation to find out a lot more.


Thanks for reading

Get MODX for free at modx.com, need help with a MODX project? Contact us!


Feel free to contact us to find out if we can help you improve your website.

Lets chat free of charge