Customer Communication and the Value of Free Stock Photos

As I’ve worked with clients and friends alike, I’m realizing the same thing everybody who works in customer-facing industry does: don’t rely on consistent communication, and make sure you have enough to work with so you don’t have to rely on coming back to client.

In some cases, working with the image is necessary, such as the splash page for sandyellis.net, in which I aimed for a design around the form of the image.  I other cases, it doesn’t matter.  Stock photo of Pictures of Children playing in a park,

FREE STOCK PHOTOS ARE INVALUABLE AS PLACHOLDERS 

Having a real photo helps you design for what the site will actually look like with a photo, and sometimes, the client will be happy with the photo, saving you some extra tweaking and refining.

 

KEEP MOVING FORWARD  – Always have something to do!

For small to medium scale projects, having a small number in-process is invaluable to keeping yourself productive.  Idle hands and all that.

But while I (or you) fine-tune my (or your) strategy for client communication, this is the time to work on fun personal projects! Even completely inane ones, I was inspired by a sweet potato laying on my white desk one afternoon, and went to create a website with a white and sweet-potato red color scheme.  I failed to find a decent ‘product photo’ style photo of a sweet potato, but this cactus photo looked intruiging, I kept moving and came up with aidanblant.com/cactus.

Completely inane, but I’ve revisted the original rinky-dink design three times, and have tinkered with it in the 10-20 minutes break between other proejcts for the last few days.

Pros:

– Fun sandbox

– Explore creative tricks

– Gets me into habit of ‘defaulting’ to web-design instead of reading web-comics!

– No delays!  No waiting for clients, and no scratching head over some large-scale design

– No pressure!

 

The most curious result is that I’ve had random design ideas pop into my head for a site, dedicated to a random (and very sharp) photo of a cactus (props to Rafel).  I’ve got a long but tidy list of to-dos to take a crack.

Advertisements

Bootstrap Modal Lightbox – Display Clicked Item

Last weekend I decided to revamp smanthakoffordphoto.com with Bootstrap to 1) test my profiency and 2) improve mobile access on the site.

I created a modal lightbox, just like the original site (and after some testing figured out the simple and elegant solution to a responsive images that always fit in the window, desktop or mobile).  The standard Bootstrap Carousel has one issue: it sets the first slide as active by statically adding the ‘active’ class to the div, and therefore doesn’t display the clicked image using ” data-toggle=”modal” data-target=”#myModal” “.

My immedate thought was “apply the ‘active’ class through a javascript function, and remove it likewise when closing the window”.   This turned out to be the perfect solution, and I was able to hack out the following design:

Each gallery thumbnail/image has the follow onclick, index adjusted accordingly (can use simple methods whether html or php).

<div …. onclick=”setActive(1)”>

<div …. onclick=”setActive(2)”>

what is setActive?  It’s my function for adding the “active class” to the corresponding lightbox.

// add to nth div in div.carousel-inner

function setActive(num) {

var c = document.getElementById(“carouselin”)

var d = c.children[num];

d.className += ” active”;

}

The carousel items have a ” data-dismiss=”modal” ” and the following snippet for removing class items I found on Stack Overflow (link).

 

 

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

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