Group Images in Post Backgrounds

[Ptilly]

Hiya,

Would anyone know how to achieve something similar to how Zenimax Online Studios is adding an image to the background of administrator's posts? Or if there is an add-on that can achieve this?



Thank You so much for any help or advice you can give on this!

 

[gogo]

Anyone?

 

[Mr Lucky]

The only way I can think of is to create a bbcode which adds a div background around the text of the post. It could be used by anyone though, if they know the code - for example all they need do is quote your post and they know the bbcode.

Unless you have an addon that can make bbcode conditional on a usergroup.

example bbcode replacement:

<div style ="width:100%;min-height:200px;background-image:url('https://example.com/path-to-image.png');background-repeat:no-repeat">
{text}
</div>

OTOH, I don't think there's a way to make style properties conditional. Or is there?

 

[Ptilly]

This is a simple way to get it to work, but it's by no means refined. If anyone has a better way of doing this, please feel free to let us know!

.msgBgByName (@msgBgAuthorName; @msgBgUrl; @msgBgSize; @msgBgPosition: false) {

.message[data-author="@{msgBgAuthorName}"] .message-inner {
background-image: linear-gradient(to top, @xf-contentBg, fade(@xf-contentBg, 50%)), url(@msgBgUrl);
background-position: @msgBgPosition;
background-size: @msgBgSize;
background-size: 400px 146px;
background-repeat: no-repeat;
background-position: bottom 55px left 140px;
}
.message[data-author="@{msgBgAuthorName}"] .message-cell.message-cell--user {
background: transparent;
}
}

// Insert usernames of the affected users below:
.msgBgByName (Ptilly; 'https://i .imgur. com/Zxva9f1.png'; cover; left);
.msgBgByName (Lon; 'https://i .imgur. com/Zxva9f1.png'; cover; left);