XF 2.1 How to reduce the opacity of an image thumbnail (attachment)?

[gogo]

For example:

original:



faded:

 

[mcatze]

In which position is this thumbnail? XFMG?

 

[gogo]

In which position is this thumbnail? XFMG?

normal posts

 

[gogo]

attachment_macros

                    <img src="{$attachment.thumbnail_url}" alt="{$attachment.filename}" />

How do I add opacity attribute to this img tag?

I tried:

<style>div.fade {opacity:0.6;}</style>
<img src="{$attachment.thumbnail_url}" alt="{$attachment.filename}" class="fade" />

It doesn't work.

 

[mcatze]

Quite simple..
Add the following code to your extra.less:

.bbImage {
    opacity: .5;
   
    &:hover {
        opacity: 1;
    }
}
.attachment-icon {
    &.attachment-icon--img {
        img {
            opacity: .5;
           
            &:hover {
                opacity: 1;
            }
        }
    }
}

 

[gogo]

nice! can i have them limited to certain usergroups only?

 

[mcatze]

Not that easy. You should add additional classes per TMS and set conditional statements per TMS like..

<xf:if is="{{$xf.visitor.isMemberOf([x, y])}}">
    Show content...
</xf:if>

 

[gogo]

Did it. danke schön!

 

[mcatze]

Create two TMS for your needs.
Template: attachment_macros
Modification key: AddFadeToImg
Find:

<img src="{$attachment.thumbnail_url}" alt="{$attachment.filename}" />

Replace:

<xf:if is="{{$xf.visitor.isMemberOf([3, 4])}}">
    <img class="fade" src="{$attachment.thumbnail_url}" alt="{$attachment.filename}" />
<xf:else />
    $0
</xf:if>

Template: lightbox_macros
Modification key: AddFadeToImgAttach
Find:

<img src="{$src}" data-url="{$dataUrl}" class="bbImage" data-zoom-target="1" {{ $alt ? 'alt="' . $alt|for_attr . '"' : '' }} style="{$styleAttr}" />

Replace:

<xf:if is="{{$xf.visitor.isMemberOf([3, 4])}}">
    <img src="{$src}" data-url="{$dataUrl}" class="bbImage fade" data-zoom-target="1" {{ $alt ? 'alt="' . $alt|for_attr . '"' : '' }} style="{$styleAttr}" />
<xf:else />
    $0
</xf:if>

Replace the extra.less entry with the following:

.fade {
    opacity: .5;
  
    &:hover {
        opacity: 1;
    }
}

The numbers 3, 4 in <xf:if is="{{$xf.visitor.isMemberOf([3, 4])}}"> are the usergroup IDs

 

[gogo]

Please comment on my way of modification:

template: bb_code_tag_attach

find:

<img src="{$attachment.thumbnail_url}"
        class="bbImage {$alignClass}"
        style="{$styleAttr}"
        alt="{$alt}" />

replace:

<xf:if is="{{$xf.visitor.isMemberOf([1, 4])}}">
<style>
    .bbImage {
    opacity: .1;
}
</style>
</xf:if>
$0

see if I'm missing anything or whether it's not a good style of doing so..

 

[mcatze]

It works, but its dirty..
You shouldn't place a <style></style>-option between the code.

 

[gogo]

Got it.

I got to that dirty method (yeah I felt something wrong with it too so I asked for your comment) before seeing your helpful solution.

I learned a lot from you guys! Thanks.