XF 2.2 Using a loop in extra.less

[RadicalBrad]

Hello,

I have added code to place small thumbnail images next to my forum nodes. This is working perfectly, and can be seen here under Tutorials and Projects...

ChopZone DIY

The Bike Building DIY Community

chopzone.com

To make these display, I add the following code in extra.less.
It simply finds the node ID and then stuffs the image in the background.
Here are two thumbnails as a reference...

/* PROJECT : skystyle_tallbike */
.node.node--id82 {
.node-icon i {display:none;} 
padding-left:12px;
padding-top:6px;
padding-bottom:6px;
.node-icon {
background-image: url('https://chopzone.com/content/tutorials/skystyle_tallbike/thumb.jpg');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
width:100px;
height:64px;
}}

/* PROJECT : marauder_lowracer */
.node.node--id81 {
.node-icon i {display:none;} 
padding-left:12px;
padding-top:6px;
padding-bottom:6px;
.node-icon {
background-image: url('https://chopzone.com/content/tutorials/marauder_lowracer/thumb.jpg');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
width:100px;
height:64px;
}}

My question is : can I use a loop to reduce this code?
The only unique lines are the node ID and the Image URL.

Perhaps some kind of array that contains NODE,URL and then does a loop to generate this?
If not, not big deal, this certainly works.

Really liking my XF Forum!

Cheers,
Brad

 

[Russ]

From the looks of it, you have the images only in specific categories, so you could use CSS like this:

.block--category59, .block--category67
{
    .node
    {
        padding-left:12px;
        padding-top:6px;
        padding-bottom:6px;
        .node-icon
        {
            background-repeat:no-repeat;
            background-position:center;
            background-size:contain;
            width:100px;
            height:64px;
            i
            {
                display: none;
            }
        }
        &.node--id82 .node-icon { background-image: url('https://chopzone.com/content/tutorials/skystyle_tallbike/thumb.jpg'); }
        &.node--id81 .node-icon { background-image: url('https://chopzone.com/content/tutorials/marauder_lowracer/thumb.jpg'); }
    }
}

It basically sets the node icon up for every node in those two categories, then you define the image on each node towards the bottom.

(not a loop but much cleaner)

 

[RadicalBrad]

From the looks of it, you have the images only in specific categories, so you could use CSS like this:

.block--category59, .block--category67
{
    .node
    {
        padding-left:12px;
        padding-top:6px;
        padding-bottom:6px;
        .node-icon
        {
            background-repeat:no-repeat;
            background-position:center;
            background-size:contain;
            width:100px;
            height:64px;
            i
            {
                display: none;
            }
        }
        &.node--id82 .node-icon { background-image: url('https://chopzone.com/content/tutorials/skystyle_tallbike/thumb.jpg'); }
        &.node--id81 .node-icon { background-image: url('https://chopzone.com/content/tutorials/marauder_lowracer/thumb.jpg'); }
    }
}

It basically sets the node icon up for every node in those two categories, then you define the image on each node towards the bottom.

(not a loop but much cleaner)

Great, thanks!
I will give this a whirl tonight.

Brad

 

[RadicalBrad]

Thanks Russ, that worked perfectly.
Probably removed more than 100 lines of code too.

If you ever want to build a bike or trike (from my site), just let me know and I will hook you up!

Cheers!
Brad