I revised samanthakoffordphoto.com to automatically load gallery images via php, replacing the hardcoded image links used as placeholder for this type of design. This followed my standard workflow of:
- Create Minimum Viable Product
- Style the model
- review and improve on earlier design
- repeat step 3 until it satisfies mine/user’s
While I was happy with result, I was not happy at requiring an otherwise static web design to use php, and increase the requirements. While I have the tools and skills to run web applications on php-enabled servers, my tendencies towards minimalism led me to find a simpler solution: a python script for automatically generating all gallery .html files based on folders and images in “photos” directory.
Generating Gallery pages with PHP
Generating Gallery pages with Python
galleryList = os.listdir("photos") for i in range(len(galleryList)): newGallery = open(galleryList[i]+".html","w+") newGallery = open(galleryList[i]+".html","w+") photoList = os.listdir("photos/"+galleryList[i]); # print photoList; newGallery = open(galleryList[i]+".html","w+") newGallery.write(' [MISCELLANEOUS STYLING] '); for j in range(len(photoList)): newGallery.write('<li><img src="photos/'+galleryList[i]+'/'+photoList[j]+'" onclick="openModal();currentSlide('+str(j+1)+')" class="hover-shadow cursor"></li>\n');
This snippet is the ‘summary’ of my change. The ‘listdir’ command produces a list of directories, as shown:
>>galleryList = os.listdir(“photos”)
[‘Actor’, ‘Business’, ‘Dance’, ‘Personal’, ‘Theater’, ‘Travel’]
We then iterate through each respective folder, creating a “Actor.html”, “Business.html”, etc for each gallery folder.
For each gallery folder, I use:
#Creates new file ending in .html from the galleryList list object, with write permissions
newGallery = open(galleryList[i]+”.html”,”w+”)
And iterate through photoList in the same way as galleryList, producing a div and img html object for every image in the folder.
photoList = os.listdir(“photos/”+galleryList[i]); photoList = os.listdir(“photos/”+galleryList[i])
newGallery.write( [other html code] )
for j in range(len(photoList)): for j in range(len(photoList)): newGallery.write(‘<li><img src=”photos/’+galleryList[i]+’/’+photoList[j]+'” onclick=”openModal();currentSlide(‘+str(j+1)+’)” class=”hover-shadow cursor”></li>\n’);
And it works!
I created a gallery.php file that used GET_ID to select a folder to display all folders from. (Example: “samanthakoffordphoto.com/gallery.php?gallery=Actor” ).
Wanting to examine a static solution that requires no server-side processing:
I used python to automatically generate and update Actor.html, Business.html, and any other galleries
Checkout these and other projects at: aidanblant.com