Width screen from controller

Help
1

Enonic version: Enonic xp 6.2
OS: Windows 7

Hello

I need to get the width of the screen from the get method of a controller. How could I do that?

2

The server does not have the client screen size, so you would have to either have a table of screen sizes for various clients (will not work for a resized browser window) - or you will have to detect this via javascript.

We recommend not handling things like screen size on the server, but rather try to solve these cases with client side javascript - similar to what we are doing in the image lib.

3

Actually. I have an image of 2000px x 900px on my home page but I need to resize the width and height in some resolutions (for example in a tablet 1024×600). I am using the scale max function (like this example portal.imageUrl({id: id, scale: ‘max(’+resolution+’)’}); ) However the first load of the page I can’t get the width of the screen so I can’t set the scale max. How could I resolve this problem?

4

Hi

The way we are thinking of doing this internally in Enonic is similar to how we handled responsive images in Enonic CMS. In short, we add a set of scaled image urls in a data attribute on each image, but the image src attribute only contains a transparent placeholder image (with the same aspect ratio as the actual image). When the page is loaded, we find the rendered width of each image, and replace the placeholder with the best matching scaled image url in the dataset.
This lets us load smaller images on for example tablets and phones than on large desktops. This technique has been used on a lot of Enonic CMS powered web sites.

We are developing an XP lib for this, it is not released yet, but you can check out the current source code on Github. As far as I remember, it should be working in the current state.

1 Like
5

Can I suggest the following approach?

  1. Always give your user a very low res version of the image (let’s say 50 x 50 px). In addition, add the imageId to a data-id attribute on the tag you’re adding the image to. This will give the user a general idea of the colors and shapes, and it will load in a second - but it will look terrible.
  2. Once you get the load event of this image, get the screen sizes via javascript and send off a new request to the server for the correct sized image. You can attach further event listeners to fade in the image once it’s completely loaded.

I’m not sure if Enonic offers this “give me an image in this size with this quality” API, but it can easily be created as a service.

6

The image service real-time renders the image you would like - even with autofocus capabilities when you’re asking for a crop! Use the image view functions to do this - or look at the upcoming image-lib that @tlo mentioned earlier.