How to use images from entities in inline styles? (or dynamic images in inline CSS)

How to use images from entities in inline styles? (or dynamic images in inline CSS)

  

To a better control of image size format, I want to use images in a list as background, so I can use a square format with a radius. In css, its simple, but I can't acess to url of image:

"background-image: url(" + GetEntityByUserId.List.Current.Entity.Image + ");"

I already tried binaryData API but its runs only in server side. There is a solution to use a convert in client side?

Thanks in advance!

Hi João,

Don't know if it is the best approach to what you want to do, but if you want to do using background images, you can use one of the approaches here: https://www.outsystems.com/forums/discussion/29349/CardBackground+in+WEB+needs+Image+URL/

Cheers,
Eduardo Jauch


Its doesn't look the same problem. I can use dynamic images already, its by default, but I want to do a image inside a circle and, because I don't know which format size the image has, need to use as background-image. Then I can work in css.

Hi João,

Could you explain a bit better what you want? You want to use a dynamic image (e.g. from the database), and use that as the background image in CSS?

If so, you can create a web page that returns an image based on whatever condition you like, and use that as url in the CSS. See attachment for an example.

Hi João.

If you look to the example (and code) that I provided in the other thread, you will see that there are 3 different ways of using images, including one where a dynamic image (from database) is used as background image defined in CSS.

I don't know if the way you want to do what you want (using background image) is the best, but for sure my examples and code will help you to do the way you asked.

Cheers,
Eduardo Jauch

Hi Eduardo,

Am I assuming correctly that in your examples, you use inline-style CSS that you refresh for different images?

Hi Kilian,

In the example I did, one of the cards adds a inline style (background image) through java script using an image widget.

In order to simplify (not requiring the javascript), the element where the background image will be add can use an inline style with the same idea: 

style
= "background-image: url('" + imageURL + "')"

Where the "imageURL" is a local variable (for example) that will store the image URL (generated dynamically acoordingly requirement) that points to a page that will download the image (in the example, I created a page called ImageForBackground, where you pass the ID of the image, but could be other filter) and it returns the image.

it really depends how you approach it.


1. does it stay an url, then you need to create a simple aspx where you "download" the image in the preparation.

2. convert the binary-data to base64 and put it in the inline-css



@Eduardo Jauch,

In that case, I like my approach better :). I think caching is not a problem with an URL that ends in a download.

@J.,

1. That's what I did in my example.

2. That's not dynamic.

depends where the dynamic part is.


if the url is dynamic, then i see no difference by change the base64..

if the contents of the url is dynamic than you are right.


Thanks for all answer. Need to check later, but I'm wondering if this is for mobile version. It is? Because of aspx webpage.

@João,

When you want a specific answer for mobile, you need to tell us that is for mobile. Most of us are still too "web wired".

In general, this will work for mobile as well (if the network is ON). But in general mobile has a different way of doing thins and to do this offline, you will need to resort to other methods.

@Kilian,

I like to use cache :)

Thanks and sorry.

I'm newbie in Outsystems, so I'll take a note to do it in future. :)

Not a problem :)
Just to help us to help you ;)

(I'll stop here, because I don't feel confortable yet with mobile).

Hi Joao,

With mobile it's indeed a whole different ballgame. There's afaik no easy way to serve dynamic images with CSS, except doing it with inline styling (and refreshing that).

Solution

I found a similar hack at StackOverFlow. Basically, I can hack (by javascript) a img tag inside a container. I need to do some compensations to center, but I got what I want... harder than it should, but it works. :)

You can check script here:

https://codepen.io/joaosaro/pen/GOxvKK

In Outsystems, it can be setup with a ClientAction and run it when render a page.

Thanks all! ;)

Solution