Set image in bootstrapcomponents-imagemedia

Classic Servoy
1

Hi,

How should I set the image media bootstrap component to load an image from the media?

Regards

2

You can use CSS for this.

.myComponentSelector { background-image: url('/mediaName.ext'); }

When you have your media in a subdirectory you need to add that too.

Hope this helps

3

Thank you Robert!

I can not make it work with an image from media. It shows an image in the form is I use an external url for the image, but that image is not shown when I launch the NG client form.

4

Looks like the image width and height is 0px
put in your css class a width and height and it will show up.

Something like this:

.mediaclassname{
background: url(“url_for_image”) no-repeat;
display: block;
width: 200px;
height: 200px;
}

5

Thank you Derk,

no-repeat does not work but without it, it shows!

.myimage { background-image: url(‘myimage.jpg’);
display: block;
width: 182px;
height: 215px;
}

Is it possible to adjust the size of the image to the size I want in my form? The image is bigger than the size I define in the css but then only a part of the image is shown

6

You should be able to use the CSS object-fill property:

img {
   object-fill: contain
}

For more info and examples see: CSS3 - object-fit and object-position

7

Just an extra tip for those that might struggle with this. The directory structure of your media defines how the background-image should be defined, similar to standard web development. Everything in your MEDIA is accessible at the url: http://:/resources/fs//*

So, if you organize your media, and make CSS and Images folder such as:

Media
  -topImage.jpg
  /css
    -mystyle.css
  /img
    -myimg.jpg

That means these items have the following URL:
topImage.jpg: http://:/resources/fs//topImage.jpg
mystyle.css: http://:/resources/fs//css/mystyle.css
myimg.jpg: http://:/resources/fs//img/myimg.jpg

So, when you are in mystyle.css, and you want to reference the those other images, you have to reference according the the URL structure with relative paths. The “…” goes up one directory since you are already in the css subdirectory.

.myTopImage{
   background-image: url('../topImage.jpg');
}

.myImage{
   background-image: url('../img/myimg.jpg');
}

Hope that helps a few people. The docs aren’t completely clear on the difference of the paths based on Media directory structure. Now you can organize your media, and reference it properly in CSS.