We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

optionImages – get specific dimension

February 24, 2023 at 11:16 am #9396
[anonymous]
Is it possible to display only a specific size for “Options Image”. Similar to “{{urlXs}}”
In my case I would not need responsive images, just one resolution (Md Size)
```
"optionImages" : {
  "sizes": "(max-width: 1200px) 100vw, 1200px",
  "dimensions": {
    "xs": {
      "width": 300,
      "height": 200
    },
    "sm": {
      "width": 480,
      "height": "auto"
    },
    "md": {
      "width": 749,
      "height": "auto"
    },
    "xl": {
      "width": 1200,
      "height": "auto"
    }
  }
}
```
February 24, 2023 at 11:42 am #9397
Bob
```
src="{{urlMd}}"
```
February 24, 2023 at 12:00 pm #9398
[anonymous]
This seems to work only for content image. As an example will not work:
February 24, 2023 at 12:24 pm #9399

Bob

You asked about the possibility of displaying only a specific size for the “option image”…

I’m not sure what you want to accomplish.

February 24, 2023 at 4:16 pm #9400
[anonymous]
I have added an image upload field in the “customConfig”. I would like to display this now. But I need only a small image and not e.g. 1200px completely independent of the device (mobile phone, notebook, PC). So I would have like to display only a specific size e.g. Md

Important: I also have a second upload field. For this second field I need a large image and/or that should also be dependent on the device.
```
"customConfig": [
{
    "name": "example",
    "label": "Example Image",
    "value": "",
    "group": "Example",
    "type": "smallupload"
}
]
```
February 25, 2023 at 7:32 am #9402
Bob
Using the {{responsive Image Attributes}} helper may help in your case.
1. How to set up the Option images: https://getpublii.com/dev/how-images-work-in-publii/#options-image
2. How to configure the specific image size for Option images https://getpublii.com/dev/responsiveimageattributes-helper/
February 25, 2023 at 10:03 am #9404
[anonymous]
This does not work, or I am doing something wrong. 🙁

Config File:
```
"optionImages" : {
  "sizes": {
    "hero": "(max-width: 1200px) 100vw, 1200px",
    "smallImages": "(max-width: 749px) 100vw, 749px"
  },
  "dimensions": {
    "xs": {
      "width": 300,
      "height": 200,
      "group": "smallImages,hero"
    },
    "sm": {
      "width": 480,
      "height": "auto",
      "group": "smallImages,hero"
    },
    "md": {
      "width": 749,
      "height": "auto",
      "group": "hero"
    },
    "xl": {
      "width": 1200,
      "height": "auto",
      "group": "hero"
    }
  }
}
```
Template File (use smallImages):
Browser html code. Displays all sizes. Not only the size of the group “smallImages”
Also the browser then uses the largest file – XL 1200 px and not SM 480 px
February 25, 2023 at 10:21 am #9406
Bob
Try this way:
```
<img src="{{@config.custom.wildlifeMediaImage1}}"
           {{#if @config.site.responsiveImages}}
              {{responsiveImageAttributes @config.custom.wildlifeMediaImage1 'smallImages'}}
           {{/if}} 
           alt="" class="h-full w-full object-cover object-center">
```
February 25, 2023 at 12:28 pm #9407
[anonymous]
Oh no. It seems that the forum has deleted parts of the code. In the entry before.

Basically I had it exactly the same. Have adjusted it now. Does not change anything, sadly. It still takes the fichtenkreuzschnabel-xl.jpg = 1200 px file and not the small one.

But I have now read in the documentation: “Note: Groups can be created only for Featured images.”

It seems that this does not work at the moment what I want.
```
-> generates
```
February 25, 2023 at 12:31 pm #9408

[anonymous]

I don’t know why. But I can not post the code completely. In the file attachment as screenshot