XF 2.0 Access options in template

XFA

Formerly MtoR
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

XenForo developer
Staff member
It is possible, in the same way as any other template:
Code:
{$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:
Less:
@_attach-thumbSize: xf-option('attachmentThumbnailDimensions', px);
 

XFA

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

Will try the second suggestion thanks.
 

Brad Padgett

Well-known member
It is possible, in the same way as any other template:
Code:
{$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:
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.

CSS:
.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 :unsure:

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

Chris D

XenForo developer
Staff member
It may not like the use of conditionals within the CSS rule itself.

You could probably do something like:
Code:
<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:

Code:
<div class="totalContainer {{ $xf.options.total_visitors_only ? 'totalContainer--noTopPadding' : '' }}">
And Less like this:

Less:
.totalContainer
{
        padding-top: 10px;

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

Brad Padgett

Well-known member
It may not like the use of conditionals within the CSS rule itself.

You could probably do something like:
Code:
<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:

Code:
<div class="totalContainer {{ $xf.options.total_visitors_only ? 'totalContainer--noTopPadding' : '' }}">
And Less like this:

Less:
.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!
 
Top