Conditional statements within a forEach loop

Question

I am trying to run a unique function to a specific object in an array.

I currently have a forEach loop that iterates through different records in an imported database, which creates a 'panel' for every record.

Here is a preview:

As you can see, the first panel does not line up with the bottom of the others. This is because it is a landscape photo and so its width must me larger to compensate. However, to do this I must have some kind of exception in my forEach loop to set the width of that record uniquely.

Here is an the code I have written:

fetch(
"https://(apiurl)/" ) //here I run a GET request to my database
.then(handleError) // skips to .catch if error is thrown
.then((data) => {
  data.records.forEach((record) => {
    let galleryitem = document.createElement("li");
    galleryitem.setAttribute("class", "splide__slide is-visible");
    galleryitem.setAttribute("aria-hidden", "false");
    galleryitem.setAttribute("tabindex", "0");
    galleryitem.setAttribute("style", "margin-right: 28px; width: 25vw");
    listing.appendChild(galleryitem);
    let gallerycontent = document.createElement("div");
    gallerycontent.setAttribute("class", "slider-square");
    galleryitem.appendChild(gallerycontent);
    let imgwrapper = document.createElement("div");
    imgwrapper.setAttribute("class", "slider-square_img");
    gallerycontent.appendChild(imgwrapper);
    let de_img = document.createElement("img");
    de_img.setAttribute("class", "slider-square_photo");
    de_img.setAttribute("src", record.fields.ArtLink);
    de_img.setAttribute("loading", "lazy");
    de_img.setAttribute("sizes", "(max-width: 479px) 84vw, (max-width: 991px) 48vw, 36vw");
    imgwrapper.appendChild(de_img);
    let textcontent = document.createElement("div");
    textcontent.setAttribute("class", "text-opacity");
    gallerycontent.appendChild(textcontent);
    let art_title = document.createElement("h3");
    art_title.setAttribute("class", "slider_title");
    art_title.textContent = record.fields.Title;
    textcontent.appendChild(art_title);
    let art_desc = document.createElement("h3");
    art_desc.setAttribute("class", "slider_descriptor");
    art_desc.textContent = record.fields.Descriptor;
    textcontent.appendChild(art_desc);
  });
})
.catch(function writeError(err) {
  // catches the error and logs it
})

I have thought of running a conditional statement within the loop so that only the first image has its own width but to no avail. For example, I would do:

if (data.records.record == [0]) { galleryitem.setAttribute("style", "margin-right: 28px; width: 50vw"); }

This does not work as intended. Any ideas?

(It may also be useful to note is that I am using the splidejs library for the slider)

EDIT: I have added the full code for context, and here is a screenshot of a section of the array table >>

Answer 1

You can also do that :
more readeable with Template literals

fetch( 'https://(apiurl)/' ) // here I run a GET request to my database
.then( handleError )        // skips to .catch if error is thrown
.then( data =>
  {
  let LI_attr =
    { className     : 'splide__slide is-visible'
    , 'aria-hidden' : 'false'
    , tabindex      : '0'
    , style         : 'margin-right: 28px; width: 50vw' 
    }  
  data.records.forEach( (record, indx)  =>
    {
    listing.appendChild( 
      Object.assign( 
        document.createElement('li')
        , LI_attr
    ) )
    .innerHTML = `
      <div class="slider-square">
        <div class="slider-square_img">
          <img class="slider-square_photo"
              src="${record.fields.ArtLink}"
              loading="lazy"
              sizes="(max-width: 479px) 84vw, (max-width: 991px) 48vw, 36vw" >
        </div>
        <div class="text-opacity">
          <h3 class="slider_title">${record.fields.Title}</h3>
          <h3 class="lider_descriptor">${record.fields.Descriptor}</h3>
        </div>
      </div>`;
      
    if (indx===0)
      LI_attr.style = 'margin-right: 28px; width: 25vw'  // change width value for next records

    });
  })
.catch(function writeError(err) {
  // catches the error and logs it
})