Remove Thumb Wrap on logged in user image

App Development
1

When using an image in an html component, specifically logged in user employee photo, the image is displayed as a thumbnail. The thumbnail wrapper makes it’s difficult to style the image.

Is there a way to remove the thumbnail wrapper? Or what’s the best approach for styling the image?

2

HI Tim,

You can use the raw value and add your own Image Tag to get completely custom image output.

For example, if your image field is called “Logo” your HTML would look like this:
{!!Logo.src!!}

You can then use that in the HTML tag:
<img class="MyClassName" src="{!!Logo.src!!}" alt="Product Logo" width="500" height="200" />

3

Does this work with the image linked to the logged in user?

4

Oh no, sorry, not yet. We will certainly enable for this as well.

5

Ok that’s what I thought.

So back to my original question, is there a way to disable the thumb wrapper? The only way I’ve been successful is to style both thumb-wrap and thumb-wrap .img

6

There’s no way to remove that class. But if you tell me what you’re looking to accomplish I’m sure we can find a way to do it.

7

Make the image larger, add a border and radius. I was able to do it, it just seemed like it wasn’t the best approach.

.thumb-wrap {
min-width: 150px !important;
min-height: 100px !important;
overflow: hidden;
}
.thumb-wrap img {
min-width: 150px !important;
min-height: 100px !important;
margin: auto;
display: block;
padding: 2px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 1em;
}
8

Any chance this was enabled? Looking for exactly this