add bash scripts for gallery generation
This commit is contained in:
parent
b940a47c0d
commit
4db9d12743
32
gallery/centerpiece/convertToWebp.sh
Executable file
32
gallery/centerpiece/convertToWebp.sh
Executable file
@ -0,0 +1,32 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Specify the input directory
|
||||
INPUT_DIR="../../assets/pics/gallery/centerpiece"
|
||||
|
||||
# Ensure ImageMagick is installed
|
||||
|
||||
|
||||
for filename in $(find "$INPUT_DIR" -type f -name "*.heic"); do
|
||||
# Define the output file name
|
||||
CONVERTED_FILE="${filename%.heic}.webp"
|
||||
|
||||
# Skip if already converted
|
||||
if [[ -f "$CONVERTED_FILE" ]]; then
|
||||
echo "Skipping $filename, already converted."
|
||||
continue
|
||||
fi
|
||||
|
||||
# Convert HEIC to WEBP
|
||||
echo "Converting $filename to $CONVERTED_FILE..."
|
||||
convert "$filename" -quality 85 "$CONVERTED_FILE"
|
||||
|
||||
# Verify conversion success
|
||||
if [[ -f "$CONVERTED_FILE" ]]; then
|
||||
# Create a blank text file
|
||||
txt_file="${CONVERTED_FILE%.webp}.txt"
|
||||
echo -e "" > "$txt_file"
|
||||
echo "Successfully converted $filename to $CONVERTED_FILE and created ${txt_file}"
|
||||
else
|
||||
echo "Error converting $filename"
|
||||
fi
|
||||
done
|
||||
@ -58,7 +58,7 @@
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered">Centerpieces</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Centerpieces</h1>
|
||||
<div class="gallery">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -72,7 +72,7 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered">Centerpieces</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Centerpieces</h1>
|
||||
<div class="gallery">
|
||||
EOL
|
||||
|
||||
|
||||
32
gallery/classic/convertToWebp.sh
Executable file
32
gallery/classic/convertToWebp.sh
Executable file
@ -0,0 +1,32 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Specify the input directory
|
||||
INPUT_DIR="../../assets/pics/gallery/classic"
|
||||
|
||||
# Ensure ImageMagick is installed
|
||||
|
||||
|
||||
for filename in $(find "$INPUT_DIR" -type f -name "*.heic"); do
|
||||
# Define the output file name
|
||||
CONVERTED_FILE="${filename%.heic}.webp"
|
||||
|
||||
# Skip if already converted
|
||||
if [[ -f "$CONVERTED_FILE" ]]; then
|
||||
echo "Skipping $filename, already converted."
|
||||
continue
|
||||
fi
|
||||
|
||||
# Convert HEIC to WEBP
|
||||
echo "Converting $filename to $CONVERTED_FILE..."
|
||||
convert "$filename" -quality 85 "$CONVERTED_FILE"
|
||||
|
||||
# Verify conversion success
|
||||
if [[ -f "$CONVERTED_FILE" ]]; then
|
||||
# Create a blank text file
|
||||
txt_file="${CONVERTED_FILE%.webp}.txt"
|
||||
echo -e "" > "$txt_file"
|
||||
echo "Successfully converted $filename to $CONVERTED_FILE and created ${txt_file}"
|
||||
else
|
||||
echo "Error converting $filename"
|
||||
fi
|
||||
done
|
||||
@ -18,11 +18,11 @@
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; display:block; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 100%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20%; right: 10%; font-size: 30px; color: white; text-decoration: none; }
|
||||
.close { position: absolute; top: 20%; right: 10%; font-size: 30px; color: white; text-decoration: none; display: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -58,28 +58,70 @@
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered">Classic Balloon Décor</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Classic Balloon Décor</h1>
|
||||
<div class="gallery">
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox1"><img src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch"></a>
|
||||
<p class="caption">20' Classic Arch</p>
|
||||
<a href="#lightbox1"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch"></figure></a>
|
||||
<div class="caption">20' Classic Arch</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox2"><img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns"></a>
|
||||
<p class="caption">Classic Columns</p>
|
||||
<a href="#lightbox2"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241116_194051.webp" alt="Column with Custom Vinyl and a Bouquet"></figure></a>
|
||||
<div class="caption">Column with Custom Vinyl and a Bouquet</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox3"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241123_094218.webp" alt="Classic 25' Arch"></figure></a>
|
||||
<div class="caption">Classic 25' Arch</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox4"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241231_171144.webp" alt="Ceiling Fill"></figure></a>
|
||||
<div class="caption">Ceiling Fill</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox5"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20250129_121605.webp" alt="Classic Columns"></figure></a>
|
||||
<div class="caption">Classic Columns</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox6"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20250129_121638.webp" alt="
|
||||
Classic 20' Arch with SIgnature Arrangement"></figure></a>
|
||||
<div class="caption">
|
||||
Classic 20' Arch with SIgnature Arrangement</div>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox7"><figure class="image is-square"> <img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns"></figure></a>
|
||||
<div class="caption">Classic Columns</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="lightbox1" class="lightbox">
|
||||
<a href="#" class="close">×</a>
|
||||
<a href="#lightbox1"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch"></figure></a>
|
||||
<div><p class="caption" style="color: black; text-align: center; margin-top: 10px;">20' Classic Arch</p></div>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">20' Classic Arch</p>
|
||||
</div>
|
||||
<div id="lightbox2" class="lightbox">
|
||||
<a href="#" class="close">×</a>
|
||||
<a href="#lightbox2"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns"></figure></a>
|
||||
<div><p class="caption" style="color: black; text-align: center; margin-top: 10px;">Classic Columns</p></div>
|
||||
<a href="#lightbox2"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241116_194051.webp" alt="Column with Custom Vinyl and a Bouquet"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Column with Custom Vinyl and a Bouquet</p>
|
||||
</div>
|
||||
<div id="lightbox3" class="lightbox">
|
||||
<a href="#lightbox3"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241123_094218.webp" alt="Classic 25' Arch"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Classic 25' Arch</p>
|
||||
</div>
|
||||
<div id="lightbox4" class="lightbox">
|
||||
<a href="#lightbox4"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20241231_171144.webp" alt="Ceiling Fill"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Ceiling Fill</p>
|
||||
</div>
|
||||
<div id="lightbox5" class="lightbox">
|
||||
<a href="#lightbox5"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20250129_121605.webp" alt="Classic Columns"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Classic Columns</p>
|
||||
</div>
|
||||
<div id="lightbox6" class="lightbox">
|
||||
<a href="#lightbox6"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/20250129_121638.webp" alt="
|
||||
Classic 20' Arch with SIgnature Arrangement"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">
|
||||
Classic 20' Arch with SIgnature Arrangement</p>
|
||||
</div>
|
||||
<div id="lightbox7" class="lightbox">
|
||||
<a href="#lightbox7"> <figure class="image is-square"> <img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns"></figure></a>
|
||||
<br/><p class="caption" style="color: black; text-align: center; margin-top: 10px; padding: 10px;">Classic Columns</p>
|
||||
</div>
|
||||
|
||||
<footer class="footer has-background-primary-light">
|
||||
|
||||
@ -32,11 +32,11 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
.gallery-item { text-align: center; }
|
||||
.gallery img { object-fit: cover; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.gallery img:hover { transform: scale(1.05); box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
|
||||
.caption { font-size: 0.9rem; margin-top: 5px; color: #4a4a4a; font-family: 'Autour One', cursive; display:block; }
|
||||
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||||
.lightbox img { max-width: 90%; max-height: 100%; border-radius: 10px; }
|
||||
.lightbox:target { display: flex; }
|
||||
.close { position: absolute; top: 20%; right: 10%; font-size: 30px; color: white; text-decoration: none; }
|
||||
.close { position: absolute; top: 20%; right: 10%; font-size: 30px; color: white; text-decoration: none; display: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -72,7 +72,7 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered">Classic Balloon Décor</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Classic Balloon Décor</h1>
|
||||
<div class="gallery">
|
||||
EOL
|
||||
|
||||
@ -91,8 +91,8 @@ for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
fi
|
||||
|
||||
echo " <div class=\"gallery-item\">" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#lightbox$count\"><img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></a>" >> "$OUTPUT_FILE"
|
||||
echo " <p class=\"caption\">$caption</p>" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#lightbox$count\"><figure class=\"image is-square\"> <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></figure></a>" >> "$OUTPUT_FILE"
|
||||
echo " <div class=\"caption\">$caption</div>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
|
||||
count=$((count+1))
|
||||
@ -120,9 +120,9 @@ for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
|
||||
fi
|
||||
|
||||
echo " <div id=\"lightbox$count\" class=\"lightbox\">" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#\" class=\"close\">×</a>" >> "$OUTPUT_FILE"
|
||||
# echo " <a href=\"#\" class=\"close\">×</a>" >> "$OUTPUT_FILE"
|
||||
echo " <a href=\"#lightbox$count\"> <figure class=\"image is-square\"> <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></figure></a>" >> "$OUTPUT_FILE"
|
||||
echo " <div><p class=\"caption\" style=\"color: black; text-align: center; margin-top: 10px;\">$caption</p></div>" >> "$OUTPUT_FILE"
|
||||
echo " <br/><p class=\"caption\" style=\"color: black; text-align: center; margin-top: 10px; padding: 10px;\">$caption</p>" >> "$OUTPUT_FILE"
|
||||
echo " </div>" >> "$OUTPUT_FILE"
|
||||
|
||||
count=$((count+1))
|
||||
|
||||
71
gallery/classic/updateGallery1.sh
Executable file
71
gallery/classic/updateGallery1.sh
Executable file
@ -0,0 +1,71 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Check if input is provided
|
||||
if [ -z "$1" ]; then
|
||||
echo "Usage: $0 DIRECTORY"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
DIRECTORY=$1
|
||||
|
||||
# Check if directory exists
|
||||
if [ ! -d "$DIRECTORY" ]; then
|
||||
echo "Error: Directory does not exist."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Set variables
|
||||
IMAGE_ DIR="$DIRECTORY"
|
||||
OUTPUT_FILE="index.html"
|
||||
|
||||
# Generate gallery with captions
|
||||
count=1
|
||||
for img in $IMAGE_DIR/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [ -f "$img" ]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${filename%.*}.txt"
|
||||
|
||||
# Read caption if available, otherwise use default
|
||||
if [ -f "$caption_file" ]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
|
||||
echo " <div class=\"gallery-item\">" >> $OUTPUT_FILE
|
||||
echo " <a href=\"#lightbox$count\"><figure class=\"image is-square\"> <img src=\"$IMAGE_DIR/$filename\" alt=\"$caption\"></figure></a>" >> $OUTPUT_FILE
|
||||
echo " <div class=\"caption\">$caption</div>" >> $OUTPUT_FILE
|
||||
echo " </div>" >> $OUTPUT_FILE
|
||||
|
||||
count=$((count+1))
|
||||
fi
|
||||
done
|
||||
|
||||
# Add closing tags for the gallery
|
||||
cat >> $OUTPUT_FILE <<EOL
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer has-background-primary-light">
|
||||
<div class="content has-text-centered">
|
||||
<h7>Copyright © <span id="year"></span> Beach Party Balloons</h7>
|
||||
<h7>All images & content are property of Beach Party Balloons. Use of images without written permission is prohibited.</h7>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="footer"></div>
|
||||
<script src="$IMAGE_DIR/script.js"></script>
|
||||
EOL
|
||||
|
||||
# Add lightbox overlays with captions
|
||||
count=1
|
||||
for img in $IMAGE_DIR/*.{jpg,jpeg,png,gif,webp}; do
|
||||
if [ -f "$img" ]; then
|
||||
filename=$(basename "$img")
|
||||
caption_file="${filename%.*}.txt"
|
||||
|
||||
if [ -f "$caption_file" ]; then
|
||||
caption=$(cat "$caption_file")
|
||||
else
|
||||
caption=""
|
||||
fi
|
||||
|
||||
echo " <div id=\"lightbox$count\" class=\"lightbox\">
|
||||
32
gallery/organic/convertToWebp.sh
Executable file
32
gallery/organic/convertToWebp.sh
Executable file
@ -0,0 +1,32 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Specify the input directory
|
||||
INPUT_DIR="../../assets/pics/gallery/organic"
|
||||
|
||||
# Ensure ImageMagick is installed
|
||||
|
||||
|
||||
for filename in $(find "$INPUT_DIR" -type f -name "*.heic"); do
|
||||
# Define the output file name
|
||||
CONVERTED_FILE="${filename%.heic}.webp"
|
||||
|
||||
# Skip if already converted
|
||||
if [[ -f "$CONVERTED_FILE" ]]; then
|
||||
echo "Skipping $filename, already converted."
|
||||
continue
|
||||
fi
|
||||
|
||||
# Convert HEIC to WEBP
|
||||
echo "Converting $filename to $CONVERTED_FILE..."
|
||||
convert "$filename" -quality 85 "$CONVERTED_FILE"
|
||||
|
||||
# Verify conversion success
|
||||
if [[ -f "$CONVERTED_FILE" ]]; then
|
||||
# Create a blank text file
|
||||
txt_file="${CONVERTED_FILE%.webp}.txt"
|
||||
echo -e "" > "$txt_file"
|
||||
echo "Successfully converted $filename to $CONVERTED_FILE and created ${txt_file}"
|
||||
else
|
||||
echo "Error converting $filename"
|
||||
fi
|
||||
done
|
||||
@ -58,7 +58,7 @@
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered">Organic Balloon Décor</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Organic Balloon Décor</h1>
|
||||
<div class="gallery">
|
||||
<div class="gallery-item">
|
||||
<a href="#lightbox1"> <figure class="image is-square"> <img src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt=""></figure></a>
|
||||
|
||||
@ -72,7 +72,7 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered">Organic Balloon Décor</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Organic Balloon Décor</h1>
|
||||
<div class="gallery">
|
||||
EOL
|
||||
|
||||
|
||||
32
gallery/sculpture/convertToWebp.sh
Executable file
32
gallery/sculpture/convertToWebp.sh
Executable file
@ -0,0 +1,32 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Specify the input directory
|
||||
INPUT_DIR="../../assets/pics/gallery/sculpture"
|
||||
|
||||
# Ensure ImageMagick is installed
|
||||
|
||||
|
||||
for filename in $(find "$INPUT_DIR" -type f -name "*.heic"); do
|
||||
# Define the output file name
|
||||
CONVERTED_FILE="${filename%.heic}.webp"
|
||||
|
||||
# Skip if already converted
|
||||
if [[ -f "$CONVERTED_FILE" ]]; then
|
||||
echo "Skipping $filename, already converted."
|
||||
continue
|
||||
fi
|
||||
|
||||
# Convert HEIC to WEBP
|
||||
echo "Converting $filename to $CONVERTED_FILE..."
|
||||
convert "$filename" -quality 85 "$CONVERTED_FILE"
|
||||
|
||||
# Verify conversion success
|
||||
if [[ -f "$CONVERTED_FILE" ]]; then
|
||||
# Create a blank text file
|
||||
txt_file="${CONVERTED_FILE%.webp}.txt"
|
||||
echo -e "" > "$txt_file"
|
||||
echo "Successfully converted $filename to $CONVERTED_FILE and created ${txt_file}"
|
||||
else
|
||||
echo "Error converting $filename"
|
||||
fi
|
||||
done
|
||||
@ -58,7 +58,7 @@
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered">Sculptures and Themes</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Sculptures and Themes</h1>
|
||||
<div class="gallery">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -72,7 +72,7 @@ cat > "$OUTPUT_FILE" <<EOL
|
||||
</nav>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-centered">Sculptures and Themes</h1>
|
||||
<h1 class="title has-text-centered has-text-dark">Sculptures and Themes</h1>
|
||||
<div class="gallery">
|
||||
EOL
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user