how to use same html and css code, but changing only image url? (for not repeat the same code)

user_19728198 0
Viewed 67

hope one of you can give me a “how to” hint.

I’m a newbie here and in building a website. I’ve written a website with “50 odd pages” for my photos. Photography is my passion, not website building. On each page 1 photo, is centered vertically, horizontally, bladibla, and a button for showing a full-screen copy of the photo. For that purpose, I use CSS overlay and a script to open and close.

As you’ll understand, on each page the same CSS stylesheet, except for the URL of the photo which is mentioned twice. In the head as part of the CSS overlay code and once more in the body for addressing the photo.

A snippet of the overlay code:

.overlay-content {
    background-image: url("https://.../images/photo_0X.png");
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

And in the body:

<img id="photo" src="https://.../images/photo_0X.png">

This works perfectly but for maintenance purposes, I would like to simplify the code of my pages and therefore create 1 (external) CSS file for all pages. Regularly I change background color, and fonts, and add pages/photos.

My question is as follows: Is it possible to generalize the “background-image: url” line of the overlay code? E.g. by adding an image id to the image line in the body. There’s just 1 photo on each page so I could give every photo the same img id. E.g. img id=”photo”. As above. In other words; would it be possible to refer in the overlay code to the image id in the body instead of repeating the full path to the photo? Referring to the image id is just an idea, every other suggestion is appreciated. P.S. I love simple solutions.

Thanks a lot, even if it’s just for reading this “long read” (-;

css
1 Answers

example here: https://jsfiddle.net/9sx3bjg7/

  • there isn't any need to create 50 pages by hand.

  • just create an array with all your images ["./myImg", "./anotherImg", "https://myImageLink"]

  • and create one HTML file

  • and change the URL parameter with the index of the image, enter image description here

  • then get the index from the link and show the image on the index of the array

  • in javascript we change the --src CSS variable, and everything will work!

css var: https://developer.mozilla.org/en-US/docs/Web/CSS/var

why change the URL?

so if the user like an image
he can copy the link,
and maybe send it to another friend,
and the friend can see directly the image
without the need to see all the images first.

this means every time you click next (➡️) you refresh the page and have a new image (and now you solved the problem of more pages)

for example:

localhost:3000/?id=10
myUrl.com/?id=10

this technique is used also by google.com,
try for example do a search,
and the link will be changed to ?q=.

same concept also here for not making infinite pages.

how it work?

enter image description here

enter image description here

here the working example:

/* get img container */
let img = document.querySelector("#img-container");

/* get id from url */
/* if the user see the website for first time reset to 0 */
let id = getId();
changeImg();

/* button functionalities */
function next() {
  id++;
  window.location.search = `id=${id}`;
}

function prev() {
  id--;
  window.location.search = `id=${id}`;
}

/* id functionalities */
function getId() {
  let result = []; // []
  // details about location.search https://stackoverflow.com/a/26803253/17716837
  let stringArray = location.search.replace("?", "").split("&"); // ["id=number", "another=string"]

  stringArray.forEach((string) => {
    result.push(string.split("="));
  }); // [[id, number], [other, string], [another, string]

  result = Object.fromEntries(result); // {id: number, another: string}

  return result.id ?? 0; // number (or 0 if undefined)
}

function resetId() {
  window.location.search = `id=0`;
}

/* change image functionalities */
function changeImg() {
  /* if the user see all image, then we reset the id to 0 */
  let choosedImg = imgArray[id] ? imgArray[id] : resetId();

  /* changing a css variable */
  img.style.setProperty("--src", `url(${choosedImg})`);
}
/* the most important part is here, the other also only css designs */

#container #img-container {
  /* src get changed automatically by javascript */
  background-image: var(--src);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.5rem;
}

* {
  box-sizing: border-box;
}

body {
  /* centering vertically and horizontally */
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}


/* container responsive */

#container {
  width: 80vmin;
  height: 80vmin;
}

#container {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
}

#container {
  /* make image bigger, buttons smaller */
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
}


/* button flexbox */

#btn-container {
  display: flex;
  gap: 1rem;
}


/* buttons responsive width  */

#btn-container button {
  flex: 1;
}
<div id="container">
  <div id="img-container" style="--src: https://picsum.photos/500">
    <!-- here it will be a image -->
  </div>

  <div id="btn-container">
    <button title="previus" onclick="prev();">⬅️</button>
    <button title="next" onclick="next()">➡️</button>
  </div>
</div>

<!-- just change the array :) -->
<script>
  /* here put all your img urls */
  let imgArray = [
    "https://i.stack.imgur.com/ZtQFV.jpg", /* 0 */
    "https://i.stack.imgur.com/1zsuD.jpg", /* 1 */
    "https://i.stack.imgur.com/gONSm.jpg", /* 2 */
    "https://i.stack.imgur.com/pmIwb.jpg", /* 3 */
    "https://i.stack.imgur.com/7qow3.jpg", /* 4 */
    "https://i.stack.imgur.com/JPr4x.jpg", /* ... until 50+ */
  ];
</script>

<!-- make sure to import the script at the end, or after the array in html -->
<script src="script.js"></script>

responsive:

also is responsive because we using vmin

vmin means CSS will get the smaller dimension on screen (height or width) and then divide it by 100.

  • vertically responsive:

enter image description here

  • horizontally responsive:

enter image description here

user_177168370
Related