XF 2.2 Conditional Statement with custom user field

[lucien_lies]

I am using this code to hide the images I use in the forum headers if the users want to hide them, why doesn't it work if I have the custom user field enabled?

Its on my template: category_header.less

there is also a reference on my extra.less to this template: <xf:include template="category_header.less" />

<xf:if is="!$xf.visitor.Profile.custom_fields.removeforumheaders">

.block.block--category.block--category5 .block-container .block-header {
background-image: url('https://i.ibb.co/TbdZkLK/ergthngjmnm.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category27 .block-container .block-header {
background-image: url('https://i.ibb.co/NSF3PBJ/zona-internacional.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category24 .block-container .block-header {
background-image: url('https://i.ibb.co/ky6t1r0/videojuegos.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category31 .block-container .block-header {
background-image: url('https://i.ibb.co/S0jCtVz/tech.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category12 .block-container .block-header {
background-image: url('https://i.ibb.co/nLTs3GV/peliculas.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category1 .block-container .block-header {
background-image: url('https://i.ibb.co/GV3XGqQ/el-foto-y-proyectos.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</xf:if>

 

[Paul B]

Conditional statements of that nature don't work in less templates.

 

[Nicolas FR]

Give a try to this : In your node_list_category template replace the first block <xf:macro></xf:macro> by this

<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <xf:if is="!$xf.visitor.Profile.custom_fields.removeforumheaders">
        <div class="block block--category block--category{$node.node_id}">
            <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
            <div class="block-container">
                <h2 class="cat-image">
                    <a href="{{ link('categories', $node) }}">{$node.title}</a>
                    <xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
                </h2>
                <div class="block-body">
                    <xf:macro template="forum_list" name="node_list"
                        arg-children="{$children}"
                        arg-extras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </div>
            </div>
        </div>
    <xf:else />
        <div class="block block--category block--category{$node.node_id}">
            <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
            <div class="block-container">
                <h2 class="block-header">
                    <a href="{{ link('categories', $node) }}">{$node.title}</a>
                    <xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
                </h2>
                <div class="block-body">
                    <xf:macro template="forum_list" name="node_list"
                        arg-children="{$children}"
                        arg-extras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </div>
            </div>
        </div>
    </xf:if>
</xf:macro>

Change your Less template by this

.block.block--category.block--category5 .cat-image {
background-image: url('https://i.ibb.co/TbdZkLK/ergthngjmnm.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category27 .cat-image {
background-image: url('https://i.ibb.co/NSF3PBJ/zona-internacional.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category24 .cat-image {
background-image: url('https://i.ibb.co/ky6t1r0/videojuegos.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category31 .cat-image {
background-image: url('https://i.ibb.co/S0jCtVz/tech.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category12 .cat-image {
background-image: url('https://i.ibb.co/nLTs3GV/peliculas.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.block.block--category.block--category1 .cat-image {
background-image: url('https://i.ibb.co/GV3XGqQ/el-foto-y-proyectos.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.cat-image {
    padding: 6px 10px;
    margin: 0;
    font-weight: 400;
    text-decoration: none;
    font-size: 20px;
    color: #2577b1;
    border-bottom: 1px solid #dfdfdf;
}

 

[Nicolas FR]

Adjust the cat-image CSS as you want.