How to get the collection with jekyll?

šŸ†˜ Support
1

Hello, i would like to show a gallery of images, but jekyll show this:

{"payload"=>{"id"=>"15839315", "type"=>"upload", "attributes"=>{"size"=>138715, "width"=>1280, "height"=>720, "path"=>"/48028/1620844182-img-20210414-wa0050.jpg", "format"=>"jpg", "author"=>nil, "notes"=>nil, "copyright"=>nil, "default_field_metadata"=>{"en"=>{"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil}}, "is_image"=>true, "created_at"=>"2021-05-12T18:29:50.338Z", "updated_at"=>"2021-05-12T18:29:50.338Z", "url"=>"https://www.datocms-assets.com/48028/1620844182-img-20210414-wa0050.jpg", "tags"=>[], "filename"=>"img-20210414-wa0050.jpg", "basename"=>"img-20210414-wa0050", "exif_info"=>{}, "mime_type"=>"image/jpeg", "colors"=>[{"red"=>187, "green"=>110, "blue"=>84, "alpha"=>255}, {"red"=>210, "green"=>174, "blue"=>160, "alpha"=>255}, {"red"=>147, "green"=>115, "blue"=>97, "alpha"=>255}, {"red"=>55, "green"=>69, "blue"=>30, "alpha"=>255}, {"red"=>222, "green"=>207, "blue"=>171, "alpha"=>255}, {"red"=>58, "green"=>71, "blue"=>53, "alpha"=>255}], "smart_tags"=>["boat", "vehicle", "transportation", "watercraft", "vessel"], "duration"=>nil, "frame_rate"=>nil, "mux_playback_id"=>nil, "blurhash"=>"LFDvizn+9FkC4TbZRjoe0KWB~qt6", "mux_mp4_highest_res"=>nil}, "relationships"=>{"creator"=>{"data"=>{"id"=>"36792", "type"=>"account"}}}}, "data_source"=>{"entities"=>{"site"=>{"48028"=>{"payload"=>{"id"=>"48028", "type"=>"site", "attributes"=>{"name"=>"admboat", "theme"=>{"logo"=>nil, "dark_color"=>{"red"=>80, "blue"=>83, "alpha"=>255, "green"=>50}, "light_color"=>{"red"=>248, "blue"=>250, "alpha"=>255, "green"=>243}, "accent_color"=>{"red"=>167, "blue"=>179, "alpha"=>255, "green"=>75}, "primary_color"=>{"red"=>226, "blue"=>87, "alpha"=>255, "green"=>87}}, "imgix_host"=>"www.datocms-assets.com", "domain"=>nil, "internal_domain"=>"admboat.admin.datocms.com", "locales"=>["en"], "last_data_change_at"=>"2021-05-12T20:15:09.298Z", "google_maps_api_token"=>"AIzaSyDMMrHWNDFFrsj-MYvM0ScFmkzA1YmgsAo", "global_seo"=>nil, "favicon"=>nil, "no_index"=>false, "frontend_url"=>"https://vander.netlify.app/", "timezone"=>"Europe/London", "require_2fa"=>false, "items_count"=>1}, "relationships"=>{"account"=>{"data"=>{"id"=>"36792", "type"=>"account"}}, "users"=>{"data"=>[]}, "sso_users"=>{"data"=>[]}, "menu_items"=>{"data"=>[{"id"=>"548227", "type"=>"menu_item"}]}, "item_types"=>{"data"=>[{"id"=>"795168", "type"=>"item_type"}]}, "roles"=>{"data"=>[{"id"=>"95573", "type"=>"role"}, {"id"=>"95574", "type"=>"role"}]}, "build_triggers"=>{"data"=>[{"id"=>"14282", "type"=>"build_trigger"}]}}}, "data_source"=>{...}}}, "item_type"=>{"795168"=>{"payload"=>{"id"=>"795168", "type"=>"item_type", "attributes"=>{"name"=>"boats", "singleton"=>false, "sortable"=>false, "api_key"=>"boat", "ordering_direction"=>nil, "tree"=>false, "modular_block"=>false, "draft_mode_active"=>false, "all_locales_required"=>true, "collection_appeareance"=>"table", "collection_appearance"=>"table", "has_singleton_item"=>false, "hint"=>nil}, "relationships"=>{"fields"=>{"data"=>[{"id"=>"3725225", "type"=>"field"}, {"id"=>"3725226", "type"=>"field"}, {"id"=>"3726072", "type"=>"field"}, {"id"=>"3726074", "type"=>"field"}, {"id"=>"3726075", "type"=>"field"}, {"id"=>"3727546", "type"=>"field"}]}, "singleton_item"=>{"data"=>nil}, "ordering_field"=>{"data"=>nil}, "title_field"=>{"data"=>{"id"=>"3725225", "type"=>"field"}}}}, "data_source"=>{...}}}, "field"=>{"3725225"=>{"payload"=>{"id"=>"3725225", "type"=>"field", "attributes"=>{"label"=>"nome", "field_type"=>"string", "api_key"=>"name", "hint"=>nil, "localized"=>false, "validators"=>{}, "position"=>1, "appearance"=>{"addons"=>[], "editor"=>"single_line", "parameters"=>{"heading"=>false}}, "appeareance"=>{"addons"=>[], "editor"=>"single_line", "parameters"=>{"heading"=>false}}, "default_value"=>nil}, "relationships"=>{"item_type"=>{"data"=>{"id"=>"795168", "type"=>"item_type"}}, "fieldset"=>{"data"=>nil}}}, "data_source"=>{...}}, "3725226"=>{"payload"=>{"id"=>"3725226", "type"=>"field", "attributes"=>{"label"=>"descriĆ§Ć£o", "field_type"=>"text", "api_key"=>"description", "hint"=>nil, "localized"=>false, "validators"=>{}, "position"=>2, "appearance"=>{"addons"=>[], "editor"=>"markdown", "parameters"=>{"toolbar"=>["heading", "bold", "italic", "strikethrough", "code", "unordered_list", "ordered_list", "quote", "link", "image", "fullscreen"]}, "type"=>"markdown"}, "appeareance"=>{"addons"=>[], "editor"=>"markdown", "parameters"=>{"toolbar"=>["heading", "bold", "italic", "strikethrough", "code", "unordered_list", "ordered_list", "quote", "link", "image", "fullscreen"]}, "type"=>"markdown"}, "default_value"=>nil}, "relationships"=>{"item_type"=>{"data"=>{"id"=>"795168", "type"=>"item_type"}}, "fieldset"=>{"data"=>nil}}}, "data_source"=>{...}}, "3726072"=>{"payload"=>{"id"=>"3726072", "type"=>"field", "attributes"=>{"label"=>"images", "field_type"=>"gallery", "api_key"=>"images", "hint"=>nil, "localized"=>false, "validators"=>{}, "position"=>3, "appearance"=>{"addons"=>[], "editor"=>"gallery", "parameters"=>{}}, "appeareance"=>{"addons"=>[], "editor"=>"gallery", "parameters"=>{}}, "default_value"=>nil}, "relationships"=>{"item_type"=>{"data"=>{"id"=>"795168", "type"=>"item_type"}}, "fieldset"=>{"data"=>nil}}}, "data_source"=>{...}}, "3726074"=>{"payload"=>{"id"=>"3726074", "type"=>"field", "attributes"=>{"label"=>"alugar", "field_type"=>"boolean", "api_key"=>"rent", "hint"=>nil, "localized"=>false, "validators"=>{}, "position"=>4, "appearance"=>{"addons"=>[], "editor"=>"boolean", "parameters"=>{}}, "appeareance"=>{"addons"=>[], "editor"=>"boolean", "parameters"=>{}}, "default_value"=>nil}, "relationships"=>{"item_type"=>{"data"=>{"id"=>"795168", "type"=>"item_type"}}, "fieldset"=>{"data"=>nil}}}, "data_source"=>{...}}, "3726075"=>{"payload"=>{"id"=>"3726075", "type"=>"field", "attributes"=>{"label"=>"vender", "field_type"=>"boolean", "api_key"=>"sell", "hint"=>nil, "localized"=>false, "validators"=>{}, "position"=>5, "appearance"=>{"addons"=>[], "editor"=>"boolean", "parameters"=>{}}, "appeareance"=>{"addons"=>[], "editor"=>"boolean", "parameters"=>{}}, "default_value"=>nil}, "relationships"=>{"item_type"=>{"data"=>{"id"=>"795168", "type"=>"item_type"}}, "fieldset"=>{"data"=>nil}}}, "data_source"=>{...}}, "3727546"=>{"payload"=>{"id"=>"3727546", "type"=>"field", "attributes"=>{"label"=>"Slug", "field_type"=>"slug", "api_key"=>"slug", "hint"=>nil, "localized"=>false, "validators"=>{"slug_title_field"=>{"title_field_id"=>"3725225"}, "slug_format"=>{"predefined_pattern"=>"webpage_slug"}, "required"=>{}}, "position"=>6, "appearance"=>{"addons"=>[], "editor"=>"slug", "parameters"=>{"url_prefix"=>nil}}, "appeareance"=>{"addons"=>[], "editor"=>"slug", "parameters"=>{"url_prefix"=>nil}}, "default_value"=>nil}, "relationships"=>{"item_type"=>{"data"=>{"id"=>"795168", "type"=>"item_type"}}, "fieldset"=>{"data"=>nil}}}, "data_source"=>{...}}}, "item"=>{"38910462"=>{"payload"=>{"id"=>"38910462", "type"=>"item", "attributes"=>{"name"=>"Blue Marine", "description"=>"description: A embarcaĆ§Ć£o possui capacidade para 07 passageiros + 1 tripulante e\n oferece: ducha de Ć”gua doce , Cooler com gelo, Ć”gua potĆ”vel, snorkel, flutuadores,\n mĆ”scara de mergulho, e som ambiente bluetooth.\n\n Equipada co VHF, Material de Salvatagem, primerios socorros \n Passeio de 05 horas com 05 paradas, 06 horas sendo 01 parada em um restaurante para almoƧar ( custo do cliente ). \n Lugares que poderĆ£o fazer parte do passeio, mas respeitando apenas 05 paradas: ( praia do Jurumirim, praia da quita ou engenho, ilha do mantimento, praia Santa Rita, praia vermelha, ilha da pescaria ( canal do Cristo ), praia da lula, ilha comprida do sul, praia da ConceiĆ§Ć£o, enseada da ConceiĆ§Ć£o, conhecida como lagoa azul, ilha dos cĆ“cos, saco da velha, ilha da cotia. \n Passeios diferenciados: Passeio para fiord MamanguĆ” com 05 paradas: Ć” combinar. \n Passeio NORTE: Ilha sapĆŖ, ilha comprida do norte, ilha do pico, ilha do cedro, ilha do pelado grande ou pequeno, Ć” combinar. \n Passeio para Praia Grande da CajaĆ­ba com cachoeira... \n Passeio para Angra dos Reis Ć” combinar. \n A embarcaĆ§Ć£o Blue Marine se disponibiliza de um atendimento diferenciado, prezando por seu conforto, seguranƧa e satisfaĆ§Ć£o.", "images"=>[{"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839315"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839316"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839317"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839318"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839320"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839321"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839322"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839323"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839324"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839325"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839326"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839327"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839328"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839329"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839330"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839331"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839332"}, {"alt"=>nil, "title"=>nil, "custom_data"=>{}, "focal_point"=>nil, "upload_id"=>"15839333"}], "rent"=>true, "sell"=>false, "slug"=>"blue-marine", "updated_at"=>"2021-05-12T19:31:34.045+01:00", "created_at"=>"2021-05-12T19:31:34.040+01:00ā€¦

in DATO config is:

directory '_boats' do
  dato.boats.each do |boat|
    create_post "#{boat.slug}.md" do
      frontmatter :yaml,
                  nome: boat.name,
                  description: boat.description,
   
                  images: boat.images.map do |image|
        image.url(h: 300, fm: 'jpg', auto: 'compress')
      end

  content boat.description
end

end
end

Jekyll

   {% endif %} {% for image in page.images %}

                <li class="responsive" data-thumb="{{image}}">
                  <img class="responsive" src="{{image}}" />
                </li>

                {% endfor %}

someone can help?

2

hello @calixtodaniel the image object has a lot of properties, you should get what you need.

Have a look here: Image manipulation - DatoCMS for more information.

If you are still confused feel free to get back here.