« Creating PDF/A in Fil… | Home | Colorize JSON in File… »

Tip of the day: Using Label to show an image in a Xojo Web App


ThumbnailToday I had a workshop with a client for Xojo Web Apps. Check out our Events & Training page if you like to have a training or join an event.

In the training we had a problem with WebImageView control in Xojo. It always shows images at 100% size and centers them. But we wanted to load existing images hosted on a server based on the URL from a database query. So we query the database and get back URLs for images already, but they may be of a different size as the thumbnails we need. That is normally no problem as a browser can load an image and scale it down easily. We tried various hacks on the WebImageView and indeed you can overwrite the CSS styles for the view to scale down the image. Sadly Xojo resets the style to fix it when you resize the website. And the feature request from 2015 to get a scale options shows no progress (Feedback case #40994). They may have other priorities...

But Xojo got in early 2017 an improvement to allow raw html tags in text for a label. Yes, a label is now used in our web app to show images! The label gets the img tag in the open even with the right URL, e.g.:

<raw><img src="http://www.mbsplugins.com/CoreML-thumbnail.jpg" style="max-width:100px; max-height:100px;"></raw>"

You can write this in the text property in the IDE or late assign it in an open event:

Sub Open()
  me.Text = "<raw><img src=""http://www.mbsplugins.com/CoreML-thumbnail.jpg"" style=""max-width:100px; max-height:100px;""></raw>"
End Sub

As you see we define the rectangle here with max-width and max-heigh in CSS to make sure the image is scaled proportionally down. You can add more CSS tags, e.g. to center the image.

An important property is the multiline property on the WebLabel. Only if you set Multiline = true, your image will have the right size. Otherwise it's cut to 27px height by Xojo.
06 04 18 - 17:01
No comments

  
Remember personal info?

Emoticons / Textile


Notify:
Hide email:

Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.