optionImages – get specific dimension
- This topic has 9 replies, 2 voices, and was last updated 7 months, 1 week ago by .
-
AuthorPosts
-
February 24, 2023 at 11:16 am #9396
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" } } }
February 24, 2023 at 11:42 am #9397Bob
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!February 24, 2023 at 12:00 pm #9398finrik
This seems to work only for content image. As an example will not work:
February 24, 2023 at 12:24 pm #9399Bob
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!February 24, 2023 at 4:16 pm #9400finrik
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 #9402Bob
Using the {{responsive Image Attributes}} helper may help in your case.
- How to set up the Option images: https://getpublii.com/dev/how-images-work-in-publii/#options-image
- 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!February 25, 2023 at 10:03 am #9404finrik
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 #9406Bob
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!February 25, 2023 at 12:28 pm #9407finrik
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 #9408finrik
I don’t know why. But I can not post the code completely. In the file attachment as screenshot
-
AuthorPosts
- You must be logged in to reply to this topic.