Processing images to provide an absolute url in json output and control the layout and weight of each item in json

support
1

Continuing the discussion from Using existing layout code to generate json:

Hi there

I am curently using this code to generate index.json file in the section

{{- $.Scratch.Add "data" slice -}}
{{- range where .Site.RegularPages "Section" "properties-for-sale" -}}
    {{- with .Params -}}
        {{- $.Scratch.Add "data" (dict "title" .title "visible" .visible "date" .date "lastmod" .lastmod "type" .type "subtype" .subtype "details" .details "location" .location "features" .features "coverImage" .coverImage) -}}
    {{- end -}}
{{- end -}}
{{- $.Scratch.Get "data" | jsonify -}}

I want to generate data so I can dynamically load cards and filter them using js in Hugo. unfortunately for me this code does not let me process image and the output url refers to the front matter of coverimage: which holds path to the image in the assets/images directory.

3 questions

  1. How can I resize and generate jpg and web images so I can use it in my card?
  2. how can I arrange the output data to have on the top title, then description, then image etc?
  3. instead of outputting all the data in the front matter how can I get the below format?

"title":"56","description":"balboa bla", "imagewebp":"https://example.com/fdfsds1280_q=80.webp", "imagewebp":"https://example.com/fdfsds1280_q=80.jpg"

I read 4 other posts some going back to 2016 but not able to solve this :slightly_frowning_face:

Thanks a lot for taking the time to help.