Image-Size in Dataview

Questions
1

In a Dataview I can set the image width and heigt
But when the image, that I want to display, is larger than the image size i have specified, the image is cut off
Is there a way, that it always fit in the given image size?
Or do I always have to upload an image with the correct size?

2

Hi @Patrick,
thank you for your question!

First and foremost, we recommend to keep thumbnails as small as possible. So if your dataview items in the configurator are displayed at e.g. 200x200 pixels, it makes no sense to use images which are 1000x1000 pixels.

Background settings in CSS for dataview items
In your specific case, the following snippet should do the trick to display the image contained and centered within the boundings of the dataview item:

.your-dataview .cfgr-dataview-item-img {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

Shorthand for panels, labels, …
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. This would work for static background images in panels, labels etc.
background: center / contain no-repeat url(linkToImage);

I hope this helps!
David

3

Thanks for the tips @LEI

My dataview shows several images and is connected via SigSlos to one big image, which contains all the pictures I need for this dataview
SigSlo → Set entries → Edit mapping → With the Image offset X and Y I display the picture I need
My Image is 765 x 2000px and i display different pictures with 80 x 153px in that dataview, so when I use background-size: contain; , I don’t see the picture I need anymore

Is there a way to resize the shown pictures anyway?

4

Hi @Patrick,
Alright that’s a different story now as you are using a sprite.
That way, I don’t think that there is any option in CSS for you to scale individual parts of your sprite map.

I would suggest scaling your individual images directly in the sprite using Photoshop or your tool of choice.

David

5

Hi @LEI

ok, thanks for the info, i will upload the file with the right image-sizes

I still have one more question on that topic
I just wanted to show a single image in a new dataview using a CSS class like you described it above

.dv-schema .cfgr-dataview-item-img {
background: center / contain no-repeat url(https://my-image.png);
}

But the image is not displayed…
I also tried to use a graphicview and change the CSS class to

… .cfgr-graphicview-item-img {…}

but it didn’t work either

Do you know, what I did wrong?

6

Hi @Patrick,

Sorry for not getting back to you. Did you manage to solve your problem in the meantime or can we support you in any way?

David

7

Hi David,

yes, I just had to write

.dv-schema { … }

instead of

.dv-schema .cfgr-dataview-item-img { … }

i quickly found the mistake but forgot to write it in here… :grimacing: