PHP SQL Post Section

Question

[IMAGE TWO][3]

Hello! I am trying to make a blog post section as the one shown in Image One. It consists of a CSS Grid with four divs inside, each one is a cell that occupies 1fr of the wrapper element, has an img, a h6 and p elements inside as you can see in Image One. This is all put inside a Javascript Slideshow, meaning that each slide for the slideshow is made of CSS Grid.

My problem/goal: I want to create an admin site in which to upload a new image and text through a form, and that to be a new div/cell added to the grid, making the previous grid cells move and occupy other slides in the slideshow. This would be sort of like in a phone where you have multiple screens to put apps, and when you add a new app the other's move into new screens that are automatically created. Hope this analogy clarifies the problem.

My question: Is it possible to do this in Css grid or are grid cells fixed to their position? If possible, could anybody give me a hint on how to move on from here? I am really stuck. I would like to know through what language I can achieve adding a new div that makes the other ones move on to new slides. Is it PHP?

I hope someone has this answer because I cannot move on from this point. Thank you very much.

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #contentContainer {
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}
      #wrapper {
    width: 2200px; /* size of the slider per number of slides */
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
  background-color: blue;
  text-align: center;
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
  background-color: red;
  text-align: center;
}
.div3 {
  grid-area: 2 / 2 / 3 / 3;
  background-color: violet;
  text-align: center;
}
.div4 {
  grid-area: 2 / 1 / 3 / 2;
  background-color: orange;
  text-align: center;
}

.div1 img {
  max-width: 100%;
  max-height: 50px;
}

.div2 img {
  max-width: 100%;
  max-height: 50px;
}

.div3 img {
  max-width: 100%;
  max-height: 50px;
}

.div4 img {
  max-width: 100%;
  max-height: 50px;
}

#itemOne {
    background-color: #ADFF2F;
    background-image: url("");
}

#itemTwo {
    background-color: #FF7F50;
    background-image: url("");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("");
}
#navLinks {
    text-align: center;
    width: 550px;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: #CCCCCC;
            padding: 5px;
            border-radius: 50%;
            border: black 5px solid;
        }
            #navLinks ul li:hover {
                background-color: #FFFF00;
            }
            #navLinks ul li.active {
                background-color: #333333;
                color: #FFFFFF;
                outline-width: 7px;
            }
                #navLinks ul li.active:hover {
                    background-color: #484848;
                    color: #FFFFFF;
                }
    </style>
  </head>
  <body>
    <div id="contentContainer">
      <div id="wrapper">





        <div id="itemOne" class="content">

            <div class="div1">
              <a href="">
                <img src="">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>




        <div id="itemTwo" class="content">

            <div class="div1">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>




        <div id="itemThree" class="content">

            <div class="div1">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>




        <div id="itemFour" class="content">

            <div class="div1">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>







      </div>
    </div>
    <div id="navLinks">
      <ul>
          <li class="itemLinks" data-pos="0px"></li>
          <li class="itemLinks" data-pos="-550px"></li>
          <li class="itemLinks" data-pos="-1100px"></li>
          <li class="itemLinks" data-pos="-1650px"></li>
      </ul>
    </div>
    <script>
      // just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;

// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // identify the item for the activeLink
    link.itemID = i;
}

// set first item as active
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    var position = link.getAttribute("data-pos");

    var translateValue = "translate3d(" + position + ", 0px, 0)";
    wrapper.style.transform = translateValue;

    link.classList.add("active");
}
    </script>
  </body>
</html>´´´

  [2]: https://i.sstatic.net/6q0I8.png
  [3]: https://i.sstatic.net/jlOm8.png

The slider solution can be found here: stackoverflow.com/a/25898660/1097415 In this case you can go with Slick carousel. And after that all you have to do is add new slide in the position (using index) like this $('#slider').slick('slickAdd', '<div>new content</div>', '0');. When you have this working, if you need this to be dynamically connected with your PHP application, you just pass the needed content using Ajax (there is plenty of examples out there. Here's one: stackoverflow.com/a/16956612/1097415). P.S. Next time please provide at least some code. Help us help you. — richardevcom
– richardevcom, Commented Feb 4, 2020 at 0:40
Thank you very much richardev! I have just added the code, I am sorry I am new at stack overflow. I have considered using slick but I thought it was best to do it on my own with JS and CSS grid for the multiple row slider, do you think it is a bad idea? Thank you! — Blue
– Blue, Commented Feb 4, 2020 at 1:08
If you know what you're doing, then I don't see any problem developing your own solution. I mentioned Slick as just an example of how you can do it. It's up to you. Anyway, about the grid issue - you can split each slide (for example) in 1 row and multiple columns with fixed width. Whenever you will add new item, it will automatically push next item and so the others forwards. If they will go out of bounding-box, they will start in a new row, which is what you were searching for. — richardevcom
– richardevcom, Commented Feb 4, 2020 at 1:31
Thank you so much for your help! However, I would like for elements that go out of the bounding box to start off in a new column, not row. Each element that I add to the content container should be placed clockwise at the bottom of the container, when that container is full, the firs element added should start a new slide, hope that this clarifies the problem. Is it possible to do this in Flexbox or should I do it in css grid? — Blue
– Blue, Commented Feb 8, 2020 at 1:59
I have just added a new image that better illustrates this idea. Hope that you can help me, I am really lost. Thank you very much — Blue
– Blue, Commented Feb 8, 2020 at 2:09

Collectives™ on Stack Overflow

PHP SQL Post Section

0

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Linked