Silk UI - problems with the resizing of images stored in an entity

Silk UI - problems with the resizing of images stored in an entity

  

Hi there!

I’m using the Silk UI Lisbon Template.

In some screens I’m using pictures that are stored in an entity. These pictures are uploaded by a user when creating a new project. In these cases, I’m having problems with the resizing of the pictures inserted in a “Gallery” or the “Card Simple Image” widgets for example (i.e. when resizing the screen, the images would not fit the widget and they will not be adjusted in size). I’ve tried gallery and card simple image using pictures stored in the Images Folder and works as expected.



Note: I've used a Scaffolding Pattern and the “picture entity” for storing the uploaded pictures was generated automatically by the platform (therefore it has three attributes Picture – Binary Data -, Filename – Text -, and Filetype - Text).

Any idea on how to solve the issue? that would be really nice! 

By the way, I’ve read some suggestions in the Forums to use the “Responsive Image” Widget, but I would like to avoid this since 1) the user would need to upload three different sizes of the same picture, and 2) I guess the issue will not be solved 100% ( I expect the problem to be similar when resizing within Desktop format for example).  

Thanks!


Gaby

Hi Gaby, could you upload a module/application in which we can see the problem in action? Could you also upload some of the pictures that you are using or otherwise make sure that you have a timer that runs upon deployment that loads the pictures into the database?

This makes it easier to help you out.


Greetings, pedro

Solution

Hi Gaby,

Your issue can probably be fixed with some CSS. You can try something like:

img {
    height: 220px;
    width: 100%;
    object-fit: cover;
}

With this CSS I was able to properly fit database images in a container. The image will adjust to the width of the container for the given height.

Note: You will need to adjust the height, 220px was an example, to fit your requirements

Cheers,

João

Solution

João Mateus wrote:

Hi Gaby,

Your issue can probably be fixed with some CSS. You can try something like:

img {
    height: 220px;
    width: 100%;
    object-fit: cover;
}

With this CSS I was able to properly fit database images in a container. The image will adjust to the width of the container for the given height.

Note: You will need to adjust the height, 220px was an example, to fit your requirements

Cheers,

João

Lovely João!! Thanks a lot! :)

 It worked! now Images are being displayed correctly in Galley and in Card Simple Image!