XF 2.0 Access options in template

[XFA]

Hi,

I have a question regarding the .less templates.
Is it possible to use the options inside them, tried so far but seems not possible unless I am missing something ?

I am trying to get the value of an option and set a width attribute using the option value + a 5px additional space.

Clément

 

[Chris D]

It is possible, in the same way as any other template:

{$xf.options.theOptionId}

Though that kind of syntax in .less templates does all kinds of ugly things. So you might want to do what we do in attachments.less:

@_attach-thumbSize: xf-option('attachmentThumbnailDimensions', px);

 

[XFA]

Ah odd, I had tried the first way but without luck.

Will try the second suggestion thanks.

 

[XFA]

That did it thanks

 

[Brad Padgett]

It is possible, in the same way as any other template:

{$xf.options.theOptionId}

Though that kind of syntax in .less templates does all kinds of ugly things. So you might want to do what we do in attachments.less:

@_attach-thumbSize: xf-option('attachmentThumbnailDimensions', px);

Sorry to bring up this old thread but I can't get options to work in LESS templates and I don't know why. Here's an example I'm using.

.totalContainer {

display: flex;
<xf:if is="{$xf.options.total_visitors_only}">
padding-top: 0;
<xf:else />
padding-top: 10px;
</xf:if>
color: @xf-paletteNeutral2;
}

Can you give an example @Chris D and let me know what I'm doing wrong. I'm trying to get rid of white-space when an option is selected. So when the option total_visitors_only is selected then there's no padding. I think this is valid syntax but I'm not sure why it won't work

I tried without the curly braces too and it still doesn't work.

 

[Chris D]

It may not like the use of conditionals within the CSS rule itself.

You could probably do something like:

<xf:if is="$xf.options.total_visitors_only">
.totalContainer
{
    padding-top: 0;
}
<xf:else />
.totalContainer
{
    padding-top: 10px;
{
</xf:if>

But we're not really intending complex conditions to be carried out within CSS/Less templates.

The best approach for this is doing something in the template itself:

<div class="totalContainer {{ $xf.options.total_visitors_only ? 'totalContainer--noTopPadding' : '' }}">

And Less like this:

.totalContainer
{
        padding-top: 10px;

        &.totalContainer--noTopPadding
        {
            padding-top: 0;
        }
}

 

[Brad Padgett]

It may not like the use of conditionals within the CSS rule itself.

You could probably do something like:

<xf:if is="$xf.options.total_visitors_only">
.totalContainer
{
    padding-top: 0;
}
<xf:else />
.totalContainer
{
    padding-top: 10px;
{
</xf:if>

But we're not really intending complex conditions to be carried out within CSS/Less templates.

The best approach for this is doing something in the template itself:

<div class="totalContainer {{ $xf.options.total_visitors_only ? 'totalContainer--noTopPadding' : '' }}">

And Less like this:

.totalContainer
{
        padding-top: 10px;

        &.totalContainer--noTopPadding
        {
            padding-top: 0;
        }
}

Wow yeah that worked perfectly. And also I appreciate you clearing that up regarding when options will and won't work in LESS files.

I'm fixing to update my MostEverOnline add-on with dates and just ran into an issue with trimming white-space when there was padding.

You guys have a lot of knowledge about the XF 2 system of things. Since you created it that's to be expected but I hope to learn a lot more in the future from you guys. The next add-on I'm going to work on is Thread Counts.

But yeah I also did not know you could option check in CSS classes either so that works out great. I'll keep this in mind in the future.

Thank you!