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

Find That Email: Email Address Generator

 

Summary: Development of a simple Email Permutator Chrome Web Extension.

Prototype:

v1_emailGenerator

I had the concept of “Minimum Viable Product” drilled into my head during my coursework at USC, and as iterative design has become the standard through SCRUM, AGILE, and all those trendy methodologies.   This unstyled prototype uses html inputs, a preset number of domains.  The Generate Emails button uses a JS Event Listener to trigger the generate_emails() JS function

document.getElementById(‘generateEmailButton’).addEventListener(‘click’,

generate_emails)

Prototype 2:

v2_emailFinder.png

My next TODO was to clean up interface by making number of domains variable and ignore blank domains in generate function.  The appendChild function took care of the first job:

document.getElementById(divName).appendChild(newdiv);

And the answer to this handy stackoverflow post detailed that JS ‘if’ checks for ‘truthiness’ of variables, evaulating to false if value is null, undefined, NaN, emptystring(“”), 0, or false.

In the end, my collaborator recommened our users would only need to use one domain at a time, so this work was scrapped, but it was a useful lesson.

Prototype 3:

v3_emailGenerator

Iteration on way to stylizing buttons with CSS.

First release Version:

v4_emailGenerator

We determined users only needed to generate emails for one domain.  And that removing the Generate Emails button in favor of a dynamic automated interface.  The onblur Event Object was an easy solution.

Where to Go From Here:

Integration with InboxSDK to automatically detect open emails and fill the inbox, replacing (or adding to) earlier permutations.


Checkout these and other projects at: aidanblant.com