Set image in bootstrapcomponents-imagemedia

Forum to discuss the new web client version of Servoy.

Set image in bootstrapcomponents-imagemedia

Postby dfernandez » Wed Oct 21, 2015 2:30 pm

Hi,

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

Regards
dfernandez
 
Posts: 60
Joined: Wed Feb 29, 2012 4:04 pm

Re: Set image in bootstrapcomponents-imagemedia

Postby ROCLASI » Wed Oct 21, 2015 4:57 pm

You can use CSS for this.
Code: Select all
.myComponentSelector { background-image: url('/mediaName.ext'); }

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

Hope this helps
Robert Ivens
SAN Developer / Servoy Valued Professional / Servoy Certified Developer

ROCLASI Software Solutions / JBS Group, Partner
Twitter: @roclasi
--
ServoyForge - Building Open Source Software.
PostgreSQL - The world's most advanced open source database.
User avatar
ROCLASI
Servoy Expert
 
Posts: 5391
Joined: Thu Oct 02, 2003 9:49 am
Location: Netherlands/Belgium

Re: Set image in bootstrapcomponents-imagemedia

Postby dfernandez » Wed Oct 21, 2015 5:57 pm

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.
dfernandez
 
Posts: 60
Joined: Wed Feb 29, 2012 4:04 pm

Re: Set image in bootstrapcomponents-imagemedia

Postby derk.hulshof » Thu Oct 22, 2015 2:02 pm

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;
}
derk.hulshof
 
Posts: 106
Joined: Tue Dec 03, 2013 9:18 am
Location: Netherlands

Re: Set image in bootstrapcomponents-imagemedia

Postby dfernandez » Fri Oct 23, 2015 2:01 am

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
dfernandez
 
Posts: 60
Joined: Wed Feb 29, 2012 4:04 pm

Re: Set image in bootstrapcomponents-imagemedia

Postby omar » Fri Oct 23, 2015 11:23 am

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

Code: Select all
img {
   object-fill: contain
}


For more info and examples see: http://www.quirksmode.org/css/images/object.html
Intrasoft, Founder
Omar van Galen
omar@intrasoft.nl
+31-(0)6-21234586
Servoy Developer
omar
 
Posts: 348
Joined: Sat Feb 12, 2011 4:51 pm
Location: Intrasoft, The Netherlands

Re: Set image in bootstrapcomponents-imagemedia

Postby sbutler » Sat Apr 09, 2016 7:18 pm

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://<host>:<port>/resources/fs/<solutionName>/*

So, if you organize your media, and make CSS and Images folder such as:
Code: Select all
Media
  -topImage.jpg
  /css
    -mystyle.css
  /img
    -myimg.jpg


That means these items have the following URL:
topImage.jpg: http://<host>:<port>/resources/fs/<solutionName>/topImage.jpg
mystyle.css: http://<host>:<port>/resources/fs/<solutionName>/css/mystyle.css
myimg.jpg: http://<host>:<port>/resources/fs/<solutionName>/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.
Code: Select all
.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.
Scott Butler
iTech Professionals, Inc.
SAN Partner

Servoy Consulting & Development
Servoy University- Training Videos
Servoy Components- Plugins, Beans, and Web Components
Servoy Guy- Tips & Resources
ServoyForge- Open Source Components
User avatar
sbutler
Servoy Expert
 
Posts: 729
Joined: Sun Jan 08, 2006 7:15 am
Location: Cincinnati, OH


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 2 guests