chris/beachPartyBalloons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add bash scripts for gallery generation

Browse Source
This commit is contained in:
chris 2025-02-17 11:15:49 -05:00
parent b940a47c0d
commit 4db9d12743
13 changed files with 270 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
gallery/centerpiece/convertToWebp.sh Executable file
View 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

2
gallery/centerpiece/index.html
View File

@ -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>

2
gallery/centerpiece/updateGallery.sh
View File

@ -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
View 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

70
gallery/classic/index.html
View File

@ -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">&times;</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">&times;</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">

18
gallery/classic/updateGallery.sh
View File

@ -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\">&times;</a>" >> "$OUTPUT_FILE"
# echo " <a href=\"#\" class=\"close\">&times;</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
View 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 &copy; <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
View 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

2
gallery/organic/index.html
View File

@ -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>

2
gallery/organic/updateGallery.sh
View File

@ -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
View 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

2
gallery/sculpture/index.html
View File

@ -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>

2
gallery/sculpture/updateGallery.sh
View File

@ -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