`Generating an ever-changing masonry layout on a website using live data`

I'm currently working on a new web project and I want to incorporate a masonry view for the images on the homepage.

The plan is to host this project on Azure, using blob storage for all the images. My idea is to organize the images for the masonry view in a specific subdirectory - let's name it "masonryImages" where I can easily add or remove images without affecting the HTML page.

Here's what I aim to achieve:

  1. Reference the source folder of the images for the HTML page.
  2. Iterate through this folder to a. determine the number of images required for the masonry view (approximately 50) and b. create an array of image sources.
  3. Automatically populate the HTML page with the .count and .src of these images instead of manually coding each detail.

I've been experimenting with a simple masonry layout:

 <div class="masonry">
            <div class="mItem">
                <img src="https://source.unsplash.com/random/300">
            </div>

            <div class="mItem">
                <img src="https://source.unsplash.com/random/100">
            </div>

            <div class="mItem">
                <img src="https://source.unsplash.com/random/50">
            </div>

            <div class="mItem">
                <img src="https://source.unsplash.com/random/600">
            </div>
 </div>

& For CSS styling

.masonry {
   column-count: 5;
   column-gap: 16px;
}

***** MY QUERY IS *****

Is there a way to dynamically generate elements in a masonry view based on the number of images in the source folder and display all images using their folder index?

javascripthtmlcss

Answer №1

To simplify things, you can create a hardcoded array of image URLs in Javascript and utilize it to dynamically populate the page.

const getRandomInt = (min, max) => {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min) + min);
}
const imageArray = [
  'https://picsum.photos/id/91/300',
  'https://picsum.photos/id/92/300',
  'https://picsum.photos/id/93/300',
  'https://picsum.photos/id/94/300',
  'https://picsum.photos/id/95/300',
  'https://picsum.photos/id/96/300',
  'https://picsum.photos/id/98/300',
  'https://picsum.photos/id/99/300',
  'https://picsum.photos/id/100/300',
]
const modifiedImages = imageArray.map(i => `${i}/${getRandomInt(300,400)}`)
document.querySelector('.masonry').innerHTML = modifiedImages.map(s => `<img src=${s}>`).join('')
.masonry {
  column-count: 3;
  gap: 16px;
}
.masonry img {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}
<div class="masonry"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize a button in React as a way to simultaneously submit a form and redirect with an href

I've created a form where users can input their information and click on a send button to submit it (see code below, button at the end). The form works fine, but when a user clicks on send, the input disappears which might give the impression that the ...

javascriptreactjsformsmaterial-ui

Leverage the power of AJAX for searching in Laravel 5.3

This section contains views code related to form submission: {!! Form::open(['method'=>'GET','url'=>'blog','class'=>'navbar-form navbar-left','role'=>'search']) !! ...

javascriptphpajaxdatabaselaravel-5.3

Preventing AngularJS from Binding in Rows: A Solution

Currently, I am utilizing AngularJS version 1.5.3 and I am facing an issue with my services. I have two services - one that retrieves Area names and the other that fetches details for each Area. In my code, I first call the service to get the Area names an ...

javascriptangularjs

Exploring arrays and objects in handlebars: A closer look at iteration

Database Schema Setup var ItemSchema = mongoose.Schema({ username: { type: String, index: true }, path: { type: String }, originalname: { type: String } }); var Item = module.exports = mongoose.model('Item',ItemSchema, 'itemi ...

javascriptnode.jsmongodbexpress

Discovering the highest value within an array of objects

I have a collection of peaks in the following format: peaks = 0: {intervalId: 7, time: 1520290800000, value: 54.95125000000001} 1: {intervalId: 7, time: 1520377200000, value: 49.01083333333333} and so on. I am looking to determine the peak with the hig ...

javascripttypescript

Checking for valid positive numbers and detecting invalid dates with Angular form techniques

How do I validate an input to ensure it is a positive number and a date no earlier than the current date using Angular's FormControl, FormBuilder, and FormGroup? Here is my code: HTML: <p>Enter price:</p> <input type="number" formCont ...

htmlangularformsvalidationangular-reactive-forms

The React Js error message shows an 'Uncaught (in promise)' TypeError that prevents reading an undefined property

Struggling with passing the response from an Ajax request to another function in React. Although I am able to receive the response, I cannot pass it to { this.showBattersData(data); } where I need to render the DOM. It's clear that something is missin ...

javascriptreactjstypeerror

Disable Three.js when WebGL is not supported: Tips and tricks

I read about how to switch to canvasrenderer if webgl is not supported. renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer(); I'm not sure how to completely remove everything if webgl is not detected. I have an image in t ...

javascriptthree.jswebgl

There seems to be an issue with accessing the / endpoint in node

https://i.sstatic.net/ROGhJ.png index.js const path = require("path"); const express = require("express"); const exp = require("constants"); const dotenv = require("dotenv").config(); const port = process.env.PORT || 5001; const app = express(); //enabl ...

javascriptnode.js

Ways to align the `<ol>` number at the top vertically

I'm having trouble aligning my <ol> numbers vertically at the top of the list. I've created a sample on CodePen. ol { list-style-type: decimal-leading-zero; font-size: 11px; } a { font-size: 80px; tex ...

htmlcss

What is the most effective way to compare a property with the values stored in an array of objects?

d : {"children":[{"name":"China","children":[{"name":"China","value":400,"percentage":"33.33"}],"index":0},{"name":"England","children":[{"name":"England","value":300,"percentage":"33.33"}],"index":1},{"name":"Malaysia","children":[{"name":"Malaysia","val ...

javascriptarraysfor-loopd3.js

Looking to import a 3D gltf model using the input tag in an HTML file for use in three.js (JavaScript), but encountering an issue with the process

I am trying to upload my 3D model from an HTML input tag, but I keep encountering this error message: t.lastIndexOf is not a function Here's the HTML code I am using: <input type="file" id="MODEL" /> <button onclick=&qu ...

javascriptfilethree.js3d

Creating a step wizard form with ReactJs can be accomplished by breaking down the form into

I have developed a resume generation application with two main components: BasicDetails and EmploymentDetails. To see a working example, click here: https://codesandbox.io/s/next-dynamic-testing-issue-forked-h1nt8 index.js file: <form onSubmit={ha ...

javascriptreactjsformsnext.jsstepper

What are the steps to develop an ElectronJS application that displays "Hello world!" in the console after a button click?

Can anyone offer a helping hand? From the depths of imagination to the realms never before conceived by humans. Check out this HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hell ...

javascripthtmlnpmbuttonelectron

Tips for programmatically inserting an identifier attribute within an array of objects?

Within a simple section, I have implemented a feature where users can input movie details using a form. The values entered by the users are used to create objects, which are then pushed into an array. However, I am looking to assign a unique and dynamic ID ...

javascriptjqueryarrays

Clicking to fade in and out with jQuery on data attributes

I have structured my HTML code as follows: <div class="col-sm-8"> <img id="click-1" class="glasses one active" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png"/> ...

javascriptjquery

Parent container fails to center align when window is resized

When I resize my window to a smaller size, like that of a smartphone screen, the three inner divs (colored red, green, and blue - .left, .center, and .right) do not align in the center. Please refer to the screenshot attached for clarity. My goal is to ens ...

htmlcss

Error encountered when extending Typography variant in TypeScript with Material UI v5: "No overload matches this call"

Currently, I am in the process of setting up a base for an application using Material UI v5 and TypeScript. My goal is to enhance the Material UI theme by adding some custom properties alongside the default ones already available. The configuration in my ...

javascriptreactjstypescriptmaterial-ui

What is the best way to display the output after retrieving an array?

Database : --> product table P_id P_name P_uploadKey 1 Cemera 7365 2 Notebook 7222 3 Monitor 7355 4 Printer 7242 --> buy table B_id P_id B_nam ...

phphtmlsql

Updating the count property of an object using setState in React

I have an array of integers ranging from 0 to 6 as my input. My goal is to create an object that gives the count of each number in the array. edition = [6, 6, 6, 1, 1, 2]; const [groupedEdition, setGroupedEdition] = useState([{"0": 0, "1&quo ...

javascriptreactjsreact-hookssetstate