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?
Hello
I need to get the width of the screen from the get method of a controller. How could I do that?
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.
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?
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.
Can I suggest the following approach?
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.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.
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.