Get image size with dc:looper:field

[carlomue]

Hej,

I am trying to optimize my slider:

Corporate-Design-Entwicklung aus Mainz: Unser Angebot

On another page, I am using ACF with a gallery.
I need the image sizes for the lightbox plugin to work properly.
This setup is working:

Looper Provider:
{{dc:acf:post_field field=“bildergalerie”}}

{{dc:looper:field key=“sizes.slider_small”}}
{{dc:looper:field key=“sizes.slider_full”}}
{{dc:looper:field key=“sizes.slider_full-width”}}
{{dc:looper:field key=“sizes.slider_full-width”}}

---

New Setup with Parameters.

I would like to use this slider with parameters and the list type.
But I can’t get the needed information out of the system.

Looper Provider:
{{dc:param:listItems}}

In the consumer, I get the url as a string only.
Is there a way to get the information I need with this new setup?

{{dc:looper:field key=“image.src”}}

{
  "listItems" : {
    "type"      : "group[]",
    "label"     : "Slides",
    "itemLabel" : "{{index}}. Slide – ({{typ}})",
    "params"    : {
      "typ" : {
        "type"    : "choose",
        "label"   : "Typ",
        "initial" : "image",
        "options" : [
          { "value" : "image", "label" : "image" },
          { "value" : "video", "label" : "video" },
          { "value" : "icon", "label" : "icon" }
        ]
      },
      "image" : {
        "type"     : "group",
        "label"    : "Bild",
        "noPicker" : true,
        "params"   : {
          "src" : {
            "label"   : "Quelle",
            "type"    : "image",
            "initial" : ""
          },
          "alt" : {
            "label"   : "Alt",
            "type"        : "textarea",
            "initial"     : "",
            "placeholder" : "Kurze Beschreibung des Bildes"
          }
        },
        "when"    : "eq($.listItems.typ, 'image')"
      },
      "video" : {
        "type"     : "group",
        "label"    : "Video",
        "noPicker" : true,
        "params"   : {
          "file" : {
            "type" 		: "file",
            "label"   : "Datei",
            "file_types" : ["video/mp4"],
            "placeholder" : "MP4-Datei angeben"
          }
        },
        "when"    : "eq($.listItems.typ, 'video')"
      },
      "icon" : {
        "type"     : "group",
        "label"    : "Icon",
        "noPicker" : true,
        "params"   : {
          "icon-fa" : {
            "type"    : "fa-icon",
            "label"   : "Icon",
            "initial" : "circle"
          },
          "color" : {
            "label"   : "Color",
            "type"    : "color",
            "initial" : "rgb(35, 35, 35)"
          }
        },
        "when"    : "eq($.listItems.typ, 'icon')"
      },
      "headline" : {
        "label"      : "Überschrift",
        "type"       : "text",
        "initial"    : ""
      },
      "text" : {
        "label"      : "Text",
        "type"       : "text-editor",
        "initial"    : "",
        "height"     : 1
      }
    }
  }
}

By the way – do you have a documentation for formatting the code in the forum properly?

Looking forward to hearing from you.
Best wishes
Carlo

[ruenel]

Hello Carlo,

You can try using this instead: {{dc:looper:field key="image.src" size="medium"}}

Kindly let us know if this helps.

[carlomue]

Hej @ruenel,

it doesn’t work.
It’s loading the file in original size and ignores the size attribute.

I need the width and height of the selected image as well.

Looking forward to hearing from you
Best regards
Carlo

[ruenel]

Hey Carlo,

Can you please do a looper debug by adding {{dc:looper:debug_consumer}}? Please send the debug info so we can check the data.

Thanks.

[carlomue]

Hej @ruenel,

here you go:

Index: 0
Current Data:
array(6) {
  ["typ"]=>
  string(5) "image"
  ["image"]=>
  array(2) {
    ["src"]=>
    string(103) "https://honey-studio.de/wp-content/uploads/2023/05/honey-studio-mainz-webdesign-prozess-zielsetzung.jpg"
    ["alt"]=>
    string(97) "Corporate Design Mainz: Unser Prozess: Darstellung zur Zielsetzung bei Corporate Design-Projekten"
  }
  ["video"]=>
  array(1) {
    ["file"]=>
    string(0) ""
  }
  ["icon"]=>
  array(2) {
    ["icon-fa"]=>
    string(6) "circle"
    ["color"]=>
    string(13) "rgb(35,35,35)"
  }
  ["headline"]=>
  string(35) "Kennenlerngespräch und Zielsetzung"
  ["text"]=>
  string(117) "In einem ersten Gespräch lernen wir uns kennen und besprechen die Ziele, die Sie mit dem Corporate Design verfolgen."
}

I don’t understand, why the image is a string instead of an object.

Thank you.

[carlomue]

Hej there,
could you give me a short reaction, please?
It would be great to know if you are aware of my answer.
Thank you.

[ruenel]

Hello Carlo,

You only have the absolute path of the image. There is no way you can get the cropped or the other sizes of the image. If the field returns the image ID, then it may be possible with {{dc:looper:field key="image.src" type="image" size="medium"}}

Hope this helps.

[carlomue]

Hej @ruenel,

thank you for your feedback.
Please tell me how I can return the image ID.
At the moment it is not working.

I have searched the forum and found this entry:

Parameter image, get id only

When creating a parameter to select an image, I always get the URL as a result. {{dc:param:PortfolioImg}} = > returns the url of the image Would it be possible to query only the ID, because I would need it for further queries like a custom meta field. Something like this? {{dc:post:meta post="{{dc:param:PortfolioImg return="id"}}" key="acf_img-caption-advanced"}} That seems not working because it is stored as id and size. [screenshot_ 2024-01-23 um 10.51.44] And a very basic question: is …

Could you add my vote for this feature as well?
It would be very useful.

Looking forward to hearing from you
Best regards
Carlo

[charlie]

It actually originally only sent the attachment_id. And then elements handled the processing. I’m thinking I need to change it back. The reason for change was around using images in Element CSS. There is already a type="image" in Dynamic Content which converts to a URL. We are either going to revert the preprocessing or add in an attachment_id type to Dynamic Content. I will have to think on it. Thanks for the feeback.