Sign in
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

  • This topic has 9 replies, 2 voices, and was last updated 1 year ago by .
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #9396
    Avatar photofinrik

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

     

    #9397
    Avatar photoBob
    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!

    #9398
    Avatar photofinrik

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

     

    #9399
    Avatar photoBob

    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!

    #9400
    Avatar photofinrik

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

     

    #9402
    Avatar photoBob

    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!

    #9404
    Avatar photofinrik

    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

     

     

    #9406
    Avatar photoBob

    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!

    #9407
    Avatar photofinrik

    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
    
    

     

    #9408
    Avatar photofinrik

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.