me/nodejs-website
me/nodejs-website
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Photos Enhancements (#10)

Browse Source 
* Skip files, only process albums. Do not open a new tab now that there is a BACK button.

* Continue opening in new tab so that photos page does not need reloaded.

* Fix CSS and make HTML readable.
This commit is contained in:
Hyperling 2024-01-25 02:46:33 +00:00 committed by GitHub
parent adc8f29f0a
commit 8dd9ab1615
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 48 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
pages/photos.sh
View File

@ -12,24 +12,41 @@ cd `dirname $0`/..
# Create the necessary HTML components for a web page. # Create the necessary HTML components for a web page.
$HELPER_DIR/body_open.php $HELPER_DIR/body_open.php
echo ""
# Give the page a description. # Give the page a description.
echo -e "\n\t\t<h1 class='col-12 title'>Photo Albums</h1>" echo -e "\t\t<div class='row'>"
echo -en "\t\t<p class='col-12 text'>You may click on an album name to view " echo -e "\t\t\t<h1 class='col-12 title'>Photo Albums</h1>"
echo -en "all of its files, or click on a specific image to bring up the full " echo -e "\t\t</div>"
echo -en "resolution. On the album pages you may also click an image or video "
echo -e "name to pull up the full resolution for download.</p>" echo -e "\t\t<div class='row'>"
echo -e "\t\t\t<div class='col-12 text'>"
echo -en "\t\t\t\t<p>You may click on an album name to "
echo -en "view all of its files, or click on a specific image to bring up the "
echo -en "full resolution. On the album pages you may also click an image or "
echo -e "video name to pull up the full resolution for download.</p>"
echo -e "\t\t\t</div>"
echo -e "\t\t</div>"
# Display the album names descending. # Display the album names descending.
ls files/photos/ | sort -r | while read album; do ls files/photos/ | sort -r | while read album; do
# Skip files, only read directories.
if [[ ! -d files/photos/$album ]]; then
continue
fi
# Clean album name. # Clean album name.
album_name=${album} album_name=${album}
album_name=${album_name//_/ } album_name=${album_name//_/ }
album_name=${album_name//-/ } album_name=${album_name//-/ }
echo -en "\t\t<h2 class='col-12 title'>" echo -e "\t\t<div class='row'>"
echo -en "\t\t\t<h2 class='col-12 title'>"
echo -en "<a href='/files/photos/$album/index.html' " echo -en "<a href='/files/photos/$album/index.html' "
echo -e "target='_blank' rel='noopener noreferrer'>$album_name</a></h2>" echo -e "target='_blank' rel='noopener noreferrer'>$album_name</a></h2>"
echo -e "\t\t<div class='col-12 text'>" echo -e "\t\t</div>"
# Catch all the upcoming photo records.
echo -e "\t\t<div class='row'>\n\t\t\t<div class='col-12 text'>"
# Create index page for each photo ALBUM based on its contents. # Create index page for each photo ALBUM based on its contents.
page="" page=""
@ -37,11 +54,15 @@ ls files/photos/ | sort -r | while read album; do
$HELPER_DIR/body_open.php > $subpage $HELPER_DIR/body_open.php > $subpage
# Add a back button # Add a back button
echo -en "\n\t\t<a href='/photos'>" >> $subpage echo -en "\n\t\t<div class='row'>\n\t\t\t<a href='/photos'>" >> $subpage
echo -e "<h3 class='col-12 title'>Back</h3></a>" >> $subpage echo -e "<h3 class='col-12 title'>Back</h3></a>\n\t\t</div>" >> $subpage
# Build the ALBUM page. # Build the ALBUM page.
echo -e "\t\t<h1 class='col-12 title'>$album_name</h1>" >> $subpage echo -e "\t\t<div class='row'>" >> $subpage
echo -e "\t\t\t<h1 class='col-12 title'>$album_name</h1>" >> $subpage
echo -e "\t\t</div>" >> $subpage
echo -e "\t\t<div class='row text'>" >> $subpage
ls files/photos/$album/* | sort | while read photo; do ls files/photos/$album/* | sort | while read photo; do
# Do not include the index page. # Do not include the index page.
if [[ $photo == *"index.html" ]]; then if [[ $photo == *"index.html" ]]; then
@ -60,10 +81,10 @@ ls files/photos/ | sort -r | while read album; do
if [[ $photo == *"/README.md" || $photo == *"/README.txt" ]]; then if [[ $photo == *"/README.md" || $photo == *"/README.txt" ]]; then
# If there is a README, show it on the PHOTOS page without a link. # If there is a README, show it on the PHOTOS page without a link.
echo -e "\t\t\t<p>`cat $photo`</p>" echo -e "\t\t\t\t<p>`cat $photo`</p>"
else else
# Otherwise put in the PHOTOS page list. # Otherwise put in the PHOTOS page list.
echo -en "\t\t\t<li class='indent'><a href=/$photo target='_blank' " echo -en "\t\t\t\t<li class='indent'><a href=/$photo target='_blank' "
echo -en "rel='noopener noreferrer'>$filename" echo -en "rel='noopener noreferrer'>$filename"
if [[ $photo == *".mp4" ]]; then if [[ $photo == *".mp4" ]]; then
echo -en " [VIDEO]" echo -en " [VIDEO]"
@ -72,34 +93,36 @@ ls files/photos/ | sort -r | while read album; do
fi fi
# Put in the subpage HTML. # Put in the subpage HTML.
echo -e "\t\t<div class='col-6 center'>" >> $subpage echo -e "\t\t\t<div class='col-6 center'>" >> $subpage
echo -en "\t\t\t<a href=/$photo target='_blank' " >> $subpage echo -en "\t\t\t\t<a href=/$photo target='_blank' " >> $subpage
echo -e "rel='noopener noreferrer'>" >> $subpage echo -e "rel='noopener noreferrer'>" >> $subpage
if [[ $photo == *".mp4" ]]; then if [[ $photo == *".mp4" ]]; then
echo -e "\t\t\t\t<video width='320px' controls>" >> $subpage echo -e "\t\t\t\t\t<video width='320px' controls>" >> $subpage
echo -e "\t\t\t\t\t<source src='/$photo' type=video/mp4>" >> $subpage echo -e "\t\t\t\t\t\t<source src='/$photo' type=video/mp4>" >> $subpage
echo -e "\t\t\t\t\tYour browser does not support videos." >> $subpage echo -e "\t\t\t\t\t\tYour browser does not support videos." >> $subpage
echo -e "\t\t\t\t</video>" >> $subpage echo -e "\t\t\t\t\t</video>" >> $subpage
elif [[ $photo == *".md" || $photo == *".txt" ]]; then elif [[ $photo == *".md" || $photo == *".txt" ]]; then
echo -e "\t\t\t\t<p>`cat $photo`</p>" >> $subpage echo -e "\t\t\t\t\t<p>`cat $photo`</p>" >> $subpage
else else
echo -e "\t\t\t\t<img src='/$photo'/>" >> $subpage echo -e "\t\t\t\t\t<img src='/$photo'/>" >> $subpage
fi fi
# Add a descriptive link. # Add a descriptive link.
echo -en "\t\t\t\t<p>$filename" >> $subpage echo -en "\t\t\t\t\t<p>$filename" >> $subpage
if [[ $photo == *".mp4" ]]; then if [[ $photo == *".mp4" ]]; then
echo -en " [VIDEO]" >> $subpage echo -en " [VIDEO]" >> $subpage
fi fi
echo -e "</p>\n\t\t\t</a>\n\t\t</div>" >> $subpage echo -e "</p>\n\t\t\t\t</a>\n\t\t\t</div>" >> $subpage
done done
echo -e "\t\t</div>" >> $subpage
# End album on PHOTOS page. # End album listings on PHOTOS page.
echo -e "\t\t\t</div>"
echo -e "\t\t</div>" echo -e "\t\t</div>"
# Add a final back button # Add a final back button
echo -en "\t\t<a href='/photos'>" >> $subpage echo -en "\n\t\t<div class='row'>\n\t\t\t<a href='/photos'>" >> $subpage
echo -e "<h3 class='col-12 title'>Back</h3></a>" >> $subpage echo -e "<h3 class='col-12 title'>Back</h3></a>\n\t\t</div>" >> $subpage
# Close out the ALBUM's page. # Close out the ALBUM's page.
$HELPER_DIR/body_close.php >> $subpage $HELPER_DIR/body_close.php >> $subpage