How to turn folders with images and movies into a website!

Ok so here is another blog post about automating website creation.

Problem: I have lots of projects where I take pictures of the thing, but dont want to sit down and make a full website. Mainly lamp projects. Its a pain adding all the href tags and what not.. also there could be like 10 – 50 photos! Im lazy. I want to put the media in a folder, run a script that turns that into a website. Ideally run the script on a bunch of folders at the same time and turn all my folders into websites.

The basics concepts and then structure as as follows

concepts

  • grabbing text and then outputting it into our HTML file.
    • we do this with the echo command and the > command. this grabs it and outputs it into a file we specified. This is our output variable. The output file in our case. We have to put the $ in front of output variable cause thats how you reference variables in bash.
  • a for loop to cycle through all the files in the folder, looking for images and movies
  • a for loop to cycle through all the folders in a directory

structure

  • create a for loop that gets into each folder in the directory
  • create a index.html file
  • create our header with our prototypes we used in the last tutorial
    • we are using the name of the folder as the title of our html and also the main heading of our file
  • grab the description.txt file and use that as our description of what we are showing off
    • this command is cool cause it also will add the line breaks in your text file and any html links
  • create a for loop that cycles through all the files and looks for matching file extensions in our case : jpg, png, jpeg, webp, bmp, tif, gif, JPG, PNG, JPEG.
    • now it takes that and wraps it up in a <a href> tag so we can click on it and make it bigger.
  • also we want to display movies! so we look for movie file extensions and then make the appropriate syntax and tags around that.
  • add a footer at the end of this html file
  • get out of that folder and go onto the next one!

The script!

    #!/bin/bash

    echo "Welcome to the scriptrr wwow for generating websites from subfolders."
    # make the current directory where you run the script the parent_dir
    parent_dir=$(pwd)
    # now cycle through each directory in that parent
    for dir in */; do
        cd "$dir"
        echo we are now in the "${PWD##*/}" folder! making website now grr grr crank crank
        output="index.html"
        #start our file off with the standard html and header tags
        echo "<html><head>" > "$output"
        cat "../../../../httpdocs/prototypes/beginning.html" >> "$output"
        cat "../../../../httpdocs/prototypes/header.html" >> "$output"
        echo "<title> ${PWD##*/} </title>" >> "$output"
        cat "../../../../httpdocs/prototypes/nav.html" >> "$output"
        echo "</head><body>" >> "$output"
        echo "<h1 style=\"text-align: center\"> ${PWD##*/} </h1>" >> "$output"

        # Add heading from description.txt
        description=$(cat "description.txt")
        formatted_description=$(echo "$description" | sed -e 's/\(http[^[:space:]]*\)/<a href="\1">\1<\/a>/g' -e 's/$/<br>/')
        echo "<h3 style=\"text-align: center; padding: 1%\"> $formatted_description </h3>" >> "$output"
        echo "<div class=\"container\">" >> "$output"
        echo "<div class=\"row\">" >> "$output"


        for file in *; do
            if [[ $file =~ .*\.(jpg$|png$|jpeg$|webp$|bmp$|tif$|gif$|JPG$|PNG$|JPEG$) ]]; then
                filename="$file"
                echo "<a href=\"$filename\" data-lightbox=\"images\" data-title=\"Image $i\"><img src=\"$filename\" alt=\"$filename\" class=\"col-md-4\"></a>" >> "$output"
                ((i++))
            fi
            if [[ $file =~ .*\.(mov$|MOV$|avi$|mp4$|ogg$|webm$) ]]; then
                filenameMov="$file"
                echo this is the movie filenamee: $filenameMov
                echo  "<video width = "500" height = "300" controls>" >> "$output"
                echo "<source src = \"$filenameMov\"  type = "video/mp4">" >> "$output"
                echo  "This browser doesn't support video tag."  >> "$output"
                echo "</video>" >> "$output"
            fi
        done

        cat "../../../../httpdocs/prototypes/footer_photoSites.html" >> "$output"

        echo "</div></div>" >> "$output"
        echo "</body></html>" >> "$output"

        cd "$parent_dir"
    done

    echo "Website generation completed for all of the suuuuubfolders."

HOW TO USE IT

  1. Make the script a .sh file
  2. put it in the folder that contains all the other folders of your projects.
  3. run this script in that folder and it should output an index.html file in each one of the child folders

next steps

  • I was trying to make it so you could click one image and it would get big and you could push left and right arrows and it would cycle through, but I havent figured that out yet. Lightbox.js?
  • make links better looking.. like have the link say something and not just the raw web address
  • automatically downsampling of the images. I tried ImageMagick and Mogrify but those werent working. also a python thing called Pillow. Pillow was probably going to work, but it was making seperate image files and I didnt like that. It looked like imagemagick could like resample the image on the fly without making a seperate file. I couldnt get the tool to install on windows but i didnt try very hard!

Leave a Comment