Beginnerprogrammer Beginnerprogrammer - 22 days ago 6
React JSX Question

Reactjs galleryblock

I would like to create an image block depending on how many images are getting set in the array. Like this gallery block:

[![enter image description here][1]][1]

What I tried is this:

<div className="gallery clearfix">
<div className="gallery-image">
<img src={block.gallery[0].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[0].images.thumbnail_md} 1x, ${block.gallery[0].images.thumbnail_lg} 2x`} className="img-fluid" />
</div>
<div className="gallery-thumbs">
<div className="row">
{block.gallery.map((item, i) => (
<div className="gallery-item" key={i}>
{ block.gallery.length > 4 ?
<div className="inner">
<img src={block.gallery[i].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[i].images.thumbnail_md} 1x, ${block.gallery[i].images.thumbnail_lg} 2x`} className="img-fluid" title="" />
<div className="img-overlay">
<span className="img-overlay-body">{ block.gallery.length - 4 }+ <span className="hidden-xs">Foto's</span></span>
</div>
</div>
:
<img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" />
}
</div>
))}
</div>
</div>
</div>


This is the outcome how it looks: [![enter image description here][2]][2]

Do not mention the styling yet.

But Now it shows me two times the first pic how do I start the map from the second of array? And only place the span with +X Photo's only on the last photo?

Answer

For the first question, I would replace :

{ block.gallery.length > 4 ? /* existing code */
: <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" />

by :

{ block.gallery.length > ? 
  i > 0 ? /* existing code */ : null
: <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" />

For the second one,

{ block.gallery.length - 4 }+ <span className="hidden-xs">Foto's</span>

by

const remain = block.gallery.length - 4; //before return
<span className="img-overlay-body">{ i === block.gallery.length ?  remain + <span className="hidden-xs">Foto's</span> : null }</span>

So eventually, that would be :

const remain = block.gallery.length - 4; 
  return (
    <div className="gallery clearfix">
        <div className="gallery-image">
          <img src={block.gallery[0].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[0].images.thumbnail_md} 1x, ${block.gallery[0].images.thumbnail_lg} 2x`} className="img-fluid" />
        </div>
        <div className="gallery-thumbs">
          <div className="row">
            {block.gallery.map((item, i) => (
              <div className="gallery-item" key={i}>
                { block.gallery.length > 4 ?
                  i > 0 ? 
                  <div className="inner">
                    <img src={block.gallery[i].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[i].images.thumbnail_md} 1x, ${block.gallery[i].images.thumbnail_lg} 2x`} className="img-fluid" title="" /> : null
                    <div className="img-overlay">
                     <span className="img-overlay-body">{ i === block.gallery.length ?  remain + <span className="hidden-xs">Foto's</span> : null }</span>
                    </div>
                  </div>
                  :
                  <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" />
                }
              </div>
              ))}
          </div>
        </div>
      </div>);