XF 2.2 Create custom XF syntax

[FoxSecrets]

How can I create my own XF syntax? I need one for screen size detection.

 

[mattrogowski]

It was established in your other thread that you cannot detect screen size with server-side PHP-compiled templates.

You need to use CSS media queries to hide and show elements, or use javascript to dynamically render HTML.

 

[FoxSecrets]

Right. But how can I create custom XF syntax? is there any documentation? I'll do another thing.

 

[Paul B]

What do you mean by "create my own XF syntax" ?

You use the existing syntax to apply CSS based on screen width.

Some examples.

This will render all text orange below the wide breakpoint.

@media (max-width: @xf-responsiveWide)
{
    *
    {
        color: orange !important;
    }
}

This will hide a specific widget below the medium breakpoint.

@media (max-width: @xf-responsiveMedium)
{
    .block[data-widget-key="new_threads_forum_list"]
    {
        display: none;
    }
}

This applies orange background to screen sizes above the narrow breakpoint.

@media (min-width: (@xf-responsiveNarrow  + 1))
{
    .p-pageWrapper
    {
        background: orange;
    }
}

 

[FoxSecrets]

No, I'm not looking for CSS. I'm not looking for screen stuff anymore.

I would like to know how to create custom XF syntax like <$xf.xxxxx >

 

[Paul B]

You keep posting in the general questions and support forum.

Development related questions should be posted in the appropriate forum.

I have moved this latest thread as per the others.

 

[Jeremy P]

You can't create new syntax. You can add new template functions ({{ my_function($foo) }}) and filters ({{ $foo|my_filter }}) by creating a listener for the template_setup event and registering them with the templater object, but this is usually a bit niche. If you just want reusable template partials or something, use macros.

 

[FoxSecrets]

I got the idea. Thank you @Jeremy P

 

[nocte]

I don't really know, what you exactly want to do, but maybe this addon is useful for you (you can server-side detect mobile devices):

Browser Detection

A light-weight shim around Mobile_detect for XenForo 2 Usage (in templates) The add-on injects the global variable $xf.mobileDetect, check that the variable is set before calling any methods to prevent errors during upgrades or if the add-on is...

xenforo.com