[finrik]

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"
    }
  }
}

 

[Bob]

src="{{urlMd}}"

 

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[finrik]

This seems to work only for content image. As an example will not work:

 

[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.

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[finrik]

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"
}
]

 

[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/

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[finrik]

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

 

 

[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">

 

 

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[finrik]

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

 

[finrik]

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

[Author]

Posts