#!/bin/bash
# Define directory to look for images and output file
dir="./images" # Change this to your target directory
output="index.html"
# Get all images in directory (adjust file extensions as needed)
images=$(find "$dir" -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" -o -iname "*.gif" \) | head -n 12)
# Start generating HTML content using cat and here-doc
cat <<EOF > "$output"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masonry Image Grid</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
width: 90%;
max-width: 1200px;
}
.grid img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="grid">
EOF
# Loop through images and append to HTML
for image in $images; do
echo " <img src='$image' alt='Image'>" >> "$output"
done
# Close HTML tags using cat and here-doc
cat <<EOF >> "$output"
</div>
</body>
</html>
EOF
echo "index.html has been generated with images in $dir"
last updated:
