Learning to improve my approach

Programming
,
1

I am trying to create a vertical mosaic style representation of a series of images. The final piece consists of 55 photos, all of the same view and shot throughout a day. I have achieved the desired result, however, the code is clunky and inefficient.

I am looking for improvements to my approach so that:

  • The size of the image slices are generated programmatically
  • The mosaic is centered horizontally on the page

My current approach uses the following HTML and CSS:

<div class='mainImage crop-01'>
  <img src="../2019-08-15/02.jpg" alt="">
</div>

<div class="mainImage crop-02">
  <img src="../2019-08-15/03.jpg" alt="">
</div>

<div class="mainImage crop-03">
  <img src="../2019-08-15/04.jpg" alt="">
</div>

<div class="mainImage crop-04">
  <img src="../2019-08-15/05.jpg" alt="">
</div>

<div class='mainImage crop-05'>
  <img src="../2019-08-15/06.jpg" alt="">
</div>

<div class="mainImage crop-06">
  <img src="../2019-08-15/07.jpg" alt="">
</div>

<div class="mainImage crop-07">
  <img src="../2019-08-15/08.jpg" alt="">
</div>

<div class="mainImage crop-08">
  <img src="../2019-08-15/09.jpg" alt="">
</div>

.mainImage {
  height: 775px;
  position: absolute;
  top: 0;
  border: 2px solid crimson;
}

.mainImage img {
  height: 100%;
}

.crop-01 {
  left: 10px;
  width: 150px;
  overflow: hidden;
  text-indent: 0px;
}

.crop-02 {
  left: 160px;
  width: 150px;
  overflow: hidden;
  text-indent: -150px;
}

.crop-03 {
  left: 310px;
  width: 150px;
  overflow: hidden;
  text-indent: -300px;
}

.crop-04 {
  left: 460px;
  width: 150px;
  overflow: hidden;
  text-indent: -450px;
}

.crop-05 {
  left: 610px;
  width: 150px;
  overflow: hidden;
  text-indent: -600px;
}

.crop-06 {
  left: 760px;
  width: 150px;
  overflow: hidden;
  text-indent: -750px;
}

.crop-07 {
  left: 910px;
  width: 150px;
  overflow: hidden;
  text-indent: -900px;
}

.crop-08 {
  left: 1060px;
  width: 150px;
  overflow: hidden;
  text-indent: -1050px;
}

I am looking for a more efficient approach to creating a vertical mosaic-style representation of a series of images. The final piece consists of 55 photos, all of the same view and shot throughout a day. The desired results are:

  • Image slices are generated programmatically
  • The mosaic is centered horizontally on the page

If you have any suggestions, please let me know.

2

To improve the efficiency of your approach and achieve the desired results, you can use a programming language like JavaScript to generate the image slices programmatically and center the mosaic horizontally on the page.

First, you need to modify your HTML to include a container div for the mosaic images:

<div class="mosaic-container"></div>

Next, you can write a JavaScript function that generates the image slices dynamically and centers the mosaic horizontally:

function generateMosaic(images) {
  var container = document.querySelector('.mosaic-container');
  var sliceWidth = 100 / images.length; // Calculate the width of each image slice

  images.forEach(function(image, index) {
    var crop = document.createElement('div');
    crop.classList.add('mainImage');
    crop.style.width = sliceWidth + '%';
    crop.style.overflow = 'hidden';
    crop.style.textIndent = '-' + (index * sliceWidth) + '%';

    var img = document.createElement('img');
    img.src = image;
    img.alt = '';

    crop.appendChild(img);
    container.appendChild(crop);
  });

  // Center the mosaic horizontally
  container.style.display = 'flex';
  container.style.justifyContent = 'center';
}

Finally, you can call the generateMosaic function with an array of image URLs to generate the mosaic:

var images = [
  "../2019-08-15/02.jpg",
  "../2019-08-15/03.jpg",
  "../2019-08-15/04.jpg",
  // Add the rest of the image URLs here
];

generateMosaic(images);

By using this approach, you eliminate the need to manually create each <div> and <img> element in your HTML. The images are generated dynamically, and the mosaic is centered horizontally on the page using CSS flexbox.