php gallery & a an alternative utilizing python

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:

  1. Create Minimum Viable Product
  2. Style the model
  3. review and improve on earlier design
  4. 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

Python snippet:

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”)

>print galleryList

[‘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’);

Before\After:

BeforeSKPMaker.PNGafterSKPMaker.PNG

 

 

 

 

 

 

 

And it works!

sam_website_margin_and_aligned - Copy.png

 

Summary:

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s