🟢 Clarify instructions for dummy images in contribution guidelines, enhance design 🎨

[XanderRubio]

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⬇️

[negar-75]

Hi, I want to work on this issue as well 😊

[XanderRubio]

Hi, I want to work on this issue as well 😊

Yes, of course! Let me assign it! I'm still resolving a conflict from the IP addresses translation merge and will get it done👍🏻 We will need to open up this organization as I will need assistance helping to maintain this as more and more contributors are adding, and I would like to add more issues from the ROADMAP and create open issues. That way, more people who search for issues on GitHub when looking for open-source work find this repository. In the meantime, happy developing on this issue, and let me know if I can help. Have a great weekend!

[negar-75]

Hi @XanderRubio I hope you started your week well could you explain a little more about this issue and what we are gonna reach?

[negar-75]

This is the view of dummy images that I can see now, and we want to add a feature that users can upload 9 images for this section and then will be shown in random orders?

[negar-75]

it means that users can upload 9 photos and then in BrickLayout.js we get an arrays of images for example 40 images and next choose them randomly and show them to users? So maybe in this 9 images that we are showing the user, he can not see his chosen photos ? because the photos are chosen randomly and in each like 10 seconds they will rotate

[negar-75]

I think we can redesign the Header completely but maybe it is a feature issue, now we can just think about how to get images from users and show them randomly

[negar-75]

{ "id": "Negar Nasiri", "image": "img/bid_image/Negar_Nasiri.jpg", "avatar": "img/avatar/Negar_Nasiri.jpg", "name": "Negar Nasiri", "location": "Lisbon, Portugal 🇵🇹", "GitHub": "https://github.com/negar-75", "text": "I've always dreamed of owning my own business, generating income, creating numerous job opportunities, and leaving a significant mark on the world." "dummyImages":["image-1-url","image-2-url","image-3-url","image-4-url"] }, this is a data structure we need

[XanderRubio]

@negar-75 Hi Negar! I hope you started your week well also. I was traveling the past day and will be situated tomorrow and will provide my thoughts on your questions within 20 hours. Thank you for your patience😎

[negar-75]

I am changing the design of header in this way, what do you think about that?

[XanderRubio]

This is the view of dummy images that I can see now, and we want to add a feature that users can upload 9 images for this section and then will be shown in random orders?

I am changing the design of header in this way, what do you think about that?

Great! I saw your reply while I was typing my response to your previous question. 😅 Let's proceed with your idea! We can display nine images that change over time, showcasing different building code examples. We'll need to consider where to store and upload these images later on.

For new contributors, we can avoid having them include dummy images initially. Instead, we can create a separate issue for first-time contributors to tackle to continually add to our database of dummy images. I encourage you to use your creativity and design something you're passionate about. We can always change the "Before I Die Code" logo later and add more pages to the project for depth.

I found a website with a rotating image slide example: 3D Image Slider. This could inspire us to design a vertical image slide. I'd prefer the images to be structured in a 3x3 grid or evenly arranged, rather than appearing out of order. Let me know your thoughts!

[XanderRubio]

Ahh nice sorry I just noticed you kept all 10 images in the last image you sent! That looks great also.

[XanderRubio]

I am changing the design of header in this way, what do you think about that?

In this case, go with what you see looks best with how many images as you made it work and look much better with 10 images.

[negar-75]

this is nine images actually😂😂

[negar-75]

in the website you mentioned , images are shown in 3d way, could you send me more examples of what you think to inspire me

[negar-75]

for storing the dummy images , in Contributors.json we can have something like this { "id": "Negar Nasiri", "image": "img/bid_image/Negar_Nasiri.jpg", "avatar": "img/avatar/Negar_Nasiri.jpg", "name": "Negar Nasiri", "location": "Lisbon, Portugal 🇵🇹", "GitHub": "https://github.com/negar-75", "text": "I've always dreamed of owning my own business, generating income, creating numerous job opportunities, and leaving a significant mark on the world." "dummyImages":["image-1-url","image-2-url","image-3-url","image-4-url"] },

[negar-75]

if we want a grid, so how can we combine grid and slideshow together ?? I

[XanderRubio]

this is nine images actually😂😂

😂😂 Apologies, you are correct!

[negar-75]

https://codepen.io/nathantaylor/pen/PJGqdE take a look at this

[XanderRubio]

in the website you mentioned , images are shown in 3d way, could you send me more examples of what you think to inspire me

in the website you mentioned , images are shown in 3d way, could you send me more examples of what you think to inspire me

I will do some research now for more examples

[negar-75]

https://codepen.io/suez/pen/OjGQza and this

[XanderRubio]

https://codepen.io/nathantaylor/pen/PJGqdE

Sold✅ Great example and very dynamic. That is a neat effect! How do you envision this? One image at a time? Or multiple images have this effect?

[XanderRubio]

https://codepen.io/suez/pen/OjGQza and this

Hahah this one is neat also! Hmm.. the first one https://codepen.io/nathantaylor/pen/PJGqdE has my vote.

[negar-75]

one image at a time, and for approaching this we need install sass because we have functions in css

[negar-75]

so we are changing header completely, and our dummy images database for it,

[XanderRubio]

for storing the dummy images , in Contributors.json we can have something like this { "id": "Negar Nasiri", "image": "img/bid_image/Negar_Nasiri.jpg", "avatar": "img/avatar/Negar_Nasiri.jpg", "name": "Negar Nasiri", "location": "Lisbon, Portugal 🇵🇹", "GitHub": "https://github.com/negar-75", "text": "I've always dreamed of owning my own business, generating income, creating numerous job opportunities, and leaving a significant mark on the world." "dummyImages":["image-1-url","image-2-url","image-3-url","image-4-url"] },

I do not recommend adding the "dummyImages" JSON value. My goal is to make it easy for contributors to get started with Before I Die Code. Additional images can be added later by contributors in another issue who are eager to continue contributing to the project.

[XanderRubio]

one image at a time, and for approaching this we need install sass because we have functions in css

Nice that makes sense one image at a time

[negar-75]

so , at this level I use previous images

[negar-75]

yeah, you are right, adding this number of images maybe is boring for everyone

[XanderRubio]

so we are changing header completely, and our dummy images database for it,

so we are changing header completely, and our dummy images database for it,

Yes, after thinking more about this and chatting let's go ahead with enhancing the header and the dummy images can just be added for now into the dummy_img file. In the future we can actually add a database to this project rather than the JSON and individuals can add from a form similar to this open source project. I believe they eventually used Mongo DB.

[XanderRubio]

so , at this level I use previous images

You are free to add high-quality images that represent all the numerous activities and experiences humans want to do before they die and also the style of image for example anime, cinematic, etc. You can start with the previous images for when you first start to build out the new design and then after the design is clean and functioning we add new images.

[XanderRubio]

yeah, you are right, adding this number of images maybe is boring for everyone

Agreed🙏🏻

[XanderRubio]

@negar-75 Thank you for clarifyinh this issue as I'm excited to enhance the design and make it more dynci with displauning one image at a time and you will have to let me know if we need to change the text from the Header.jsx. I'm referring to this code here:

<span
                className={styles["span_open-source-project"]}
                style={{ color: "#006dff"}}
              >
                An Open
                <br />
                <br />
                Source
                <br />
                <br />
                Project
              </span>{" "}
              <br />
              <br />
              <span style={{ color: '#FFE439', fontWeight: 'bold' }}>
                <Typewriter
                  words={[
                    'to plant seeds 🌱 of inspiration.',
                    'to codify 💻 your purpose.',
                    'to compile your bucket 🪣 list.',
                    'to learn how to contribute 📚.'
                  ]}
                  loop={true}
                  cursor
                  cursorStyle="_"
                  typeSpeed={50}
                  deleteSpeed={50}
                  delaySpeed={1500}
                />
              </span>

[negar-75]

at this point , I have no idea for text design and I will have to remove this text from initial design

[XanderRubio]

at this point , I have no idea for text design and I will have to remove this text from initial design

All good, as this is why version control exists, and we will see what your first working design looks like and if it even makes sense to add the text design or have the typewriter effect.

[negar-75]

Hi @XanderRubio I did some code for this header and now I want you to take a look at this preview version and then we can make it better for this I am now in feature-dummy_image so again I have to commit all changes and create pull request? CUZ this is not a final version

[XanderRubio]

Hi @XanderRubio I did some code for this header and now I want you to take a look at this preview version and then we can make it better for this I am now in feature-dummy_image so again I have to commit all changes and create pull request? CUZ this is not a final version

Great! I would suggest the following:

1. Make sure the local branch (Your code on VSCode) is up-to-date with the main branch by fetching and merging the latest changes:

   git fetch origin main
   git merge origin/main

   This will ensure that the preview deployment is accurate to where the main branch is in time as of now.

2. Resolve any merge conflicts that may arise during the merge process. Let me know if it is too complex to resolve as more files have been added over the past week with the code.

3. Commit the resolved conflicts and push the changes to the remote feature branch (which is your forked version):

   git add .
   git commit -m "Resolved merge conflicts"
   git push origin feature-dummy_image

4. From here you will be good to go with creating a pull request and for us to work together for enhancement👏🏻

Let me know though as you might have a few merge conflicts to figure out and I can help with figuring it out. This is good practice to understand what is taking place and how to resolve it in your code editor.

[negar-75]

hi @XanderRubio why this issue is still open?

[negar-75]

I don't know because of why I could not see my last commits here! my last commit is related to autotranslation not header

[XanderRubio]

hi @XanderRubio why this issue is still open?

HI @negar-75

I was planning on closing the issue once I merge your feature onto the main and then will close. Let me know if you would advise differently. 😇

[XanderRubio]

I don't know because of why I could not see my last commits here! my last commit is related to autotranslation not header

Additionally when clicking the `Feature' / Closes #45 #133 from the work timeline of this issue this will show all your work and commits you have made to contribute to this issue. Please provide more information as I am unable to comprehend your question based on my current understanding.

[negar-75]

oh..I got it I thought I did something wrong again in git flow 😂😂😂😂😂 It takes a time to get familiar with it.

[XanderRubio]

oh..I got it I thought I did something wrong again in git flow 😂😂😂😂😂 It takes a time to get familiar with it.

Hahaha. Everything you have done and contributed has been correct. It does take time to get familiar with the Git workflow, but you are doing great with it. I've merged your work into the main branch and it can be viewed on the live link. Great work!