Problem🤔

Contributor @ccelest1 pointed out that the contribution guidelines do not provide clear instructions for dummy_images. For example there role and purpose. We should update the contribution guidelines to provide clearer instructions for what is the purpose of the dummy_images. This led us to think about expanding in the Contribution Guidelines what the dummy_images are and additionally, we can work on adding a section in the files to have users add high-quality images of dummy images to be later displayed on rotation when a user is viewing the website.

Current view of the static dummy images on the home page⬇️

Task⛏️🪚🔨
(https://github.com/BeforeIDieCode/BeforeIDieAchievements/tree/feature-dummy_image)

• Will need to define what the design of the dynamic dummy_images looks best on the home page. Currently there are ten images displayed
• Add into the contribution guidelines the purpose of the dummy_images and how user submit them, the image quality, image standards
• Develop the ability to have dummy_images display on rotation. This will need to be done in the BrickLayout file.

🌲 Please work on this issue on the branch [feature-dummy_image]

** IF NEEDED, WE CAN CREATE INDIVIDUAL ISSUES FOR EACH OF THE TASKS ABOVE

Please see the two code examples below ⬇️ for ideas on how to address the BrickLayout Component

1️⃣ To allow contributors to upload dummy images to your open source project and display 9 images at a time (as an example) in a randomized manner, you can modify the BrickLayout component as follows:

1. Pass the images uploaded by contributors as props to the BrickLayout component.
2. Use the useState hook to store the shuffled array of images.
3. Use the useEffect hook to shuffle the array of images whenever it changes.
4. Use the slice method to display only 9 images at a time.
5. Use the setInterval method to rotate the displayed images after a certain interval.

import React, { useState, useEffect } from "react";
import styles from "./BrickLayout.module.css";

const BrickLayout = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentIndex((currentIndex + 1) % images.length);
    }, getRandomInt(5000, 10000));
    return () => clearInterval(intervalId);
  }, [currentIndex, images]);

  const displayedImages = images.slice(currentIndex, currentIndex + 9);

  return (
    <div>
      <div className={styles["blur-circle-shape-two"]}></div>
      <div className={styles["brick-layout"]}>
        <div className={styles["brick-column"]}>
          {displayedImages.map((image, index) => (
            <img key={index} src={image} alt="" />
          ))}
        </div>
      </div>
    </div>
  );
};

export default BrickLayout;

// Function to get a random integer between min and max
const getRandomInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

2️⃣ To make each image disappear and then reappear with another image in its place in different time sequences between 5-10 second intervals, you can modify the BrickLayout component as follows:

1. Pass the images uploaded by contributors as props to the BrickLayout component.
2. Use the useState hook to store the index of the current image.
3. Use the useEffect hook to change the index of the current image after a certain interval.
4. Use the setInterval method to change the index of the current image after a certain interval.
5. Use the slice method to display only 9 images at a time.

import React, { useState, useEffect } from "react";
import styles from "./BrickLayout.module.css";

const BrickLayout = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentIndex((currentIndex + 1) % images.length);
    }, getRandomInt(5000, 10000));
    return () => clearInterval(intervalId);
  }, [currentIndex, images]);

  const displayedImages = images.slice(currentIndex, currentIndex + 9);

  return (
    <div>
      <div className={styles["blur-circle-shape-two"]}></div>
      <div className={styles["brick-layout"]}>
        <div className={styles["brick-column"]}>
          {displayedImages.map((image, index) => (
            <img key={index} src={image} alt="" />
          ))}
        </div>
      </div>
    </div>
  );
};

export default BrickLayout;

// Function to get a random integer between min and max
const getRandomInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

Resources
🪟 Image Grid / Masonry Layout for React
React Visual Grid Docs
Image from the React Visual Grid that could be used as the layout for the dummy image backdrop⬇️