So when he wrote a post on interacting with the flickr api I was interested. After reading the post I figured it wouldn’t be to hard to write my own script to mimic the same effect. So the goals of this exercise are…

1. Make a function that will use the Flickr api to generate a list of thumbnails
2. Make it so when the user clicks an image it opens in a lightbox

Example

I’m using this code right now for my blog. You can see it in action at the bottom of my sidebar.

The Code

To kick this off here is the complete code that powers the function. I’ll go over it bit by bit so keep scrolling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

 
function GetFlickr(){
 
$user = array('id' => "26736852@N06");
 
$params = array('method' => 'flickr.people.getPublicPhotos',
                'user_id' => '26736852@N06',
                'per_page' => '12');
 
function request($params){
    $api_key = '#################################';
    $url = 'http://api.flickr.com/services/rest/?' .
           'api_key=' . $api_key . '&format=php_serial';
 
    foreach($params as $key => $val){
        $url .= '&' . urlencode($key) . '=' . urlencode($val);
    }
 
    $resp = file_get_contents($url);
    return  unserialize($resp);
}
 
$photos = request($params);
 
function build_photo_thumbnail($p){
     return 'http://farm' . $p['farm'] . '.static.flickr.com/' . $p['server'] .
            '/' . $p['id'] . '_' . $p['secret'] . '_s.jpg';
};
 
function build_photo_original($p){
     return 'http://farm' . $p['farm'] . '.static.flickr.com/' . $p['server'] .
            '/' . $p['id'] . '_' . $p['secret'] . '.jpg';
};
 
function build_photo_page_url($p){
     return 'http://flickr.com/photos/26736852@N06/' . $p['id'];
};
 
foreach ($photos['photos']['photo'] as $p){
 
	echo '<li><a href="' . build_photo_original($p) . '" rel="lightbox[flickr]" title="'.$p['title'].'"><img src="' . build_photo_thumbnail($p) . '" alt="'. $p['title'] . '" /></a></li>';
 
 
};
};

Getting Started

Line 1 should be simple, we define a function to contain all of our code and make this easy to call. The next part is all code strippted from Joshs article for making the request to Flickr.

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$user = array('id' => "26736852@N06");
 
$params = array('method' => 'flickr.people.getPublicPhotos',
                'user_id' => '26736852@N06',
                'per_page' => '12');
 
function request($params){
    $api_key = '#################################';
    $url = 'http://api.flickr.com/services/rest/?' .
           'api_key=' . $api_key . '&format=php_serial';
 
    foreach($params as $key => $val){
        $url .= '&' . urlencode($key) . '=' . urlencode($val);
    }
 
    $resp = file_get_contents($url);
    return  unserialize($resp);
}

These are just defining the various variables that we will need to make our api call. We will be using the flickr.people.getPublicPhotos method, its required parameters are api key and user_id. So in our params array we list our method and then our parameters in the order they are listed on the api page. We don’t need to list the api key here even though it is listed in the parameters.

For the request parameter we define out api key. You can get one at the flickr api key page. The rest of the function just builds the rest of the url that will call the api for you. If someone could comment and tell me exactly what this does that would be excellent.

The id variable in the user array can be found using a service called idgetter.

You make your api call with a simple line of code.

$photos = request($params);

Parsing the Data

So now the $photos variable holds all the data from your api call. Here is an example of what mine contains.

Array
(
    [photos] => Array
        (
            [page] => 1
            [pages] => 15
            [perpage] => 4
            [total] => 58
            [photo] => Array
                (
                    [0] => Array
                        (
                            [id] => ##########
                            [owner] => 26736852@N06
                            [secret] => ##########
                            [server] => ####
                            [farm] => #
                            [title] => Munch
                            [ispublic] => 1
                            [isfriend] => 0
                            [isfamily] => 0
                        )
 
                    [1] => Array
                        (
                            [id] => ##########
                            [owner] => 26736852@N06
                            [secret] => ##########
                            [server] => ####
                            [farm] => #
                            [title] => Rubmle
                            [ispublic] => 1
                            [isfriend] => 0
                            [isfamily] => 0
                        )
 
                    [2] => Array
                        (
                            [id] => ##########
                            [owner] => 26736852@N06
                            [secret] => ##########
                            [server] => ####
                            [farm] => #
                            [title] => Tick Tock
                            [ispublic] => 1
                            [isfriend] => 0
                            [isfamily] => 0
                        )
 
                    [3] => Array
                        (
                            [id] => ##########
                            [owner] => 26736852@N06
                            [secret] => ##########
                            [server] => ####
                            [farm] => #
                            [title] => OH Snap!
                            [ispublic] => 1
                            [isfriend] => 0
                            [isfamily] => 0
                        )
 
                )
 
        )
 
    [stat] => ok
)

So we have an array which is storing a whole lot data. In the next section we will build some more fuctions and a use a loop to build a list of photos we can style with CSS.

Output the HTML

We are going to build 3 functions function build_photo_thumbnail, function build_photo_original, function build_photo_page_url.

25
26
27
28
29
30
31
32
33
34
35
36
37
38

 
function build_photo_thumbnail($p){
     return 'http://farm' . $p['farm'] . '.static.flickr.com/' . $p['server'] .
            '/' . $p['id'] . '_' . $p['secret'] . '_s.jpg';
};
 
function build_photo_original($p){
     return 'http://farm' . $p['farm'] . '.static.flickr.com/' . $p['server'] .
            '/' . $p['id'] . '_' . $p['secret'] . '.jpg';
};
 
function build_photo_page_url($p){
     return 'http://flickr.com/photos/26736852@N06/' . $p['id'];
};

As you can see these functions are just using the data stored in the array to build the correct URL’s for the photos. Notice the _s in the build_photo_thumbnail function is used to get the square size of the photo. You can find out more about Flickrs URL scheme at their Photo Source URLs page.

Now that we have our functions to the urls written its time for the last piece of code.

foreach ($photos['photos']['photo'] as $p){
	echo '<li><a href="' . build_photo_original($p) . '" rel="lightbox[flickr]" title="'.$p['title'].'"><img src="' . build_photo_thumbnail($p) . '" alt="'. $p['title'] . '" /></a></li>';
};

This is our foreach loop that will use the functions we just defined to generate the HTML code for out photos. You can see I’m hard coding the rel=“lightbox” attribute this will open the photo in a light box just alter this script for your particular brand of lightbox script.

Implementation

To use this script simply call the function from your php document link this.

<ul id="custom_flickr_badge">
<?php GetFlickr(); ?>
</ul>

at the head of your document you will also need to include the file that contains your function. Like this.

<?php include "flickr.php";  ?>

Where flickr.php is the path to the file where the function resides.

Concusion

This took me a long time to figure out but the end result is more pleasing then the default flickr badge. It keeps your visitors on the page and is easy to style via the id=”custom_flickr_badge” attribute.

If anyone has any issues with the script I’ll be happy to help.

Feel free to use these in any project commercial or otherwise. Leave me a comment if you do use it please.

udc_xray_freebies

This is a quick tutorial on how I created the stencil effect for the poster.

Quick Steps

• Select background (expand and smooth your selection).
• Fill with white.
• Black and white (not an adjustment layer) your photo and up the contrast.
• Merge the photo w/ the background.
• Make your photo a smart object.
• Apply Gaussian Blur and Cutout(In that order).
• Tweak both filters (every photo is different).
• Live Trace it in illustrator to and color each shape.
• Expand and Tweak the trace.

Detailed Steps
Select background (smooth the edges out)
Using your favorite selection tool to select the background of your image. Smooth out your selection by going to Select>Refine Edge and use the smooth slider to smooth out your edges.

It also helps to contract your selection a bit this creates a darkened border around your subject.

Fill with White
Fill your Selection with white.

Black and white (not an adjustment layer) your photo and up the contrast
You have to use the Image>Adjustment menu for this step because you want the filters applied in later steps to affect the edited version of the image and not the original. Not the best practice to completely destroy your image but a necessary one.

Merge the photo w/ the background
Fairly self-explanatory when you apply the filters to the image you want to make the entire image reside on one layer.

Make your photo a smart object
Go to Filters>Convert for Smart Filters to make your image a smart object this will let you adjust filters to get the best image later.

Apply Gaussian Blur and Cutout(In that order)
I used about 4px Gaussian blur. For the cutout I used 3 levels with 0 edge simplicity and 3 edge fidelity. If your image doesn’t have enough detail and is muddy, try taking down Gaussian blur. If your image has to much detail for you take the blur for edge simplicity up.

Tweak both filters (every photo is different)
If your image doesn’t have enough detail and is muddy, try taking down Gaussian blur. If your image has to much detail for you take the blur for edge simplicity up.

Live Trace it in illustrator to and color each shape.
Open your image in Illustrator and release the crop area and delete it. Also get rid of any clipping masks ect. Then go to Object>Live Trace>Tracing options. You can use my settings below or find your own.

Expand and Tweak
Live Trace is hardly ever perfect, by expanding your trace you can tweak individual paths. Go to Object>Expand and then click OK. Now you have all the individual paths for your tweaking pleasure.

1. Would I be a better designer to work with if I knew coding myself? Do developers appreciate knowledgeable designers?

The designers at EMU Marketing code our own pages in XHTML and CSS this takes the pressure off of the developers to make things “look right” and lets the designers have control over the entire visual appeal of the site.

I think developers appreciate designers who have at least some knowledge of how difficult a certain feature will be to implement, or know roughly what the process will be in creating the development back end.

2. Designers: Developers don’t like you because you represent Work and don’t see why said work is wholly necessary. Developers: Designers are scared of you because you are the gatekeeper. This is the dynamic. Discuss.

Because the designers and developers work in the same room and we critique and review each other project regardless of experience with that area it gives our designers a sense of the development process and a general understanding of how the websites work. It gives the developers a chance to see how the design process works and eliminates this problem.

3. How can stronger communication be developed not only between designers and developers, but also between designers, developers, and creative teams (art director, copywriter)? How can a team bring them into the fold more effectively?

Strong communication is one of the great things about EMU Marketing we are always looking at each others projects and keeping up on how things are working. Bringing developers into the project early to help work out features and to give them an overview of the site is always helpful.

4. To developers: if there was one thing ― an ability, a bit of knowledge, an understanding ― that you could instill in all designers with the wave of a magic wand, what would it be?

I would be very interested to know what this is.

5. How do you keep the goal of the project front and center so that design and development can keep a “common good” as their primary function?

The goal is always to give the client a site they can be proud to show off to people. It is up to both parties to do thier part. Designers need to make the site flow well and the information easy to access. Developers need to make the site easy to use and the information flow out the databases and into a readable format. Everyone has the same goal, I think once everyone understands that its easy to keep it front and center.

6. What’s the most helpful thing a designer can do before handing over design files?

Here is the checklist that the developers wrote.

1. Discuss site functionality with programmers.
2. Code XHTML and CSS.
3. Look at site with no styles, does it make sense?
4. Recode CSS from scratch if necessary (should be much quicker the second time).
5. Once site is valid, get approval from programmers.

That makes it pretty clear what the developers want valid and understandable XHTML and CSS from the designs to plug into the framework.

7. How soon should a developer be engaged to sense-check a design? At design brief? Before it goes to the client?

As the list above makes clear sense check occurs after meeting with the client but before the design goes to code.

8. Is it a mistake to make the lead developer the project manager?

Probably not but that might be a mistake and take away from the visual appeal of the site. Just the same and making the lead designer a project manager might create a mess for the developers. The best solution is to have someone outside the web design and development process. In this case it is our boss Lee who has a background in print design.

9. How can I get the developer to give me an absolute answer on whether something is doable?

Do your research and know their skill level. See if an open source project exists that does what you want or have an example ready. I find myself say “you know like how Wordpress does it.” when I’m explaining a feature to the developers.

Its also good to know what the developers know how to do. In my case there is nothing it seems our developers cannot do. See this post on what was going to be the tag cloud for Cultural Forum.

10. It seems that designers are under pressure to design an exceptional and unique experience and developers are under pressure to produce sites with high performance and little/no errors. Designer’s goals add pressure to developers and vice versa. How can our goals work together instead of causing pressure on each other?

Exceptional user experiences and high site performance are not mutually exclusive. These problems are problems of experience and dedication. Because designers are in charge of the front end code developers are not responsible for that area. They are free to focus on performance issues and creating error free applications. designers and focus only on the user experience.

Pantone Mugs

These great Pantone Mugs would be an awesome gift but at 130$ they might be a little to much. But I have heard of a few places that sell them individually.

T-Shirts

T-Shirts are something no one can ever get enough of. This one from Bad Designer Threads is sweet.

Design Magazines

MOMA Under 50$ sections

The Museum of Modern Art Store has sections for gifts under $25, $50, and $100. The under 50 and 25 dollar sections have some cool gifts, the Munny toy is especially cool.

Veer

Veer has some great merch the Pentagram Calender is especially awesome.

At the end of winter break (early January) I’ll scan all of drawings and make a post about it.

Anyone else want to join me? Maybe you could get back into the swing of something for the break.

You can read the whole bit here, where he goes in depth about how he made the coin and the processes and inspiration for the coin.

Paper Cut Illustrations

With all the work I have been doin with paper latly this was a great find on stumbleupon. Yes they really are all paper you can see her full portfolio here.

50 Creative Portfolio Designs

I’m starting to do research and beginning designs for the next version of upsidedowncity which will be a portfolio site with a blog attached. Smashing Magazine always comes up whenever I’m doing research and it always is smashing. This article features some amazing portfolios and is no exception.

29 Texture Packs

Textures I never can seem to find a use for a growing collection. But here are 29 more I’m looking at downloading.

Human Flipbook

Erbert and Gerbert did this great using tshirts with various amounts of ripping and tearing to create a flipbook/stop motion animation commercial which went viral on the internet.

Save Polaroid

If you dont know Polaroids Instant Film will be gone soon. The group trying to save it is already up and running. Meanwhile stock up on the film if you use it.

Sovergn Back

I found Sovereign Beck through the Cool Hunters Video Podcast. Put simply they make awesome ties. No this isn’t an ad I just really want one.

Pantone Shoes

Another awesome peice of designer clothing. Pantone shoes though at 200+ dollars they are a little out of my league.

Pixel perfect

Every pixel counts and the less you have the more each one matters.

One of my first jobs was working on banner ads for food services to go up on the Oregon Daily Emerald website. Being just 685×60 pixels cramming all the information in required some creativity on my part, but also imparted the lesson above.

Content makes the site

The most important thing is your content, don’t neglect it. Don’t let your clients neglect it either.

My coworker Tristan is working on a case study on the EMU Ticket Office website. If you take a look, the real focus of the site is the content. It is well written and correct. The photos are vibrant and fit the website. There is no horrific use of bold and italics to mar the readability of anything.

If any of those elements were out of place the whole site would be ruined, The Ticket Office handles all of their content. Because of the minimalist design they control how good or bad the site looks.

Push it to the limit. Then pull back.

This is actually something I learned back in my theater days. Our teacher always told us to push it to far and then he would tell us to pull it back.

When I was working on the Civil War LAN posters I did the same thing by going out on a limb and taking the minimalist flag and character design and adding both smoke and black bars on the top and bottom. The smoke stayed and the black bars went. My coworkers know when to say somethings goes too far. Just goes to show you to get the opinion of others. Which leads me into my next point…

Always get a second opinion

If you don’t get a second opinion something will be wrong.

Most of the mistakes or slip ups come around when things happen to fast and no one else takes the time to look over simple information like times and dates. Getting a second opinion helps you make better designs and catch silly mistakes that you wouldn’t notice.

Recycle, Reduce, Reuse (your designs)

If a design doesn’t work out save all the parts they might come in handy later.

This should be a no brainer. Saving parts of designs helps you get ideas and save time later.

Make it flexible (Raster vs. Vector)

Vectors are easy to scale and can be easily redesigned across all the different media.

Another lesson the Civil War LAN posters taught me was that a raster image is a pain to transfer across loads of different ads. Having to wait several minutes to open up a 600mb file just to resize the component to make a 2×3 ad is a pain. Use vectors for as much as you can to speed stuff up.

When I say redesign I mean everything

Just trash the old design and start over.

I learned this doing the new Cultural Forum website. I tried using the original colors from the website for the new and the same rounded corners. And everyone hated it. Including me. So I trashed the old design totally for the new grungy headers and striped color bars.

Be a packrat (design freebies)

They are free. That means you should have them. Even if you don’t use them.

Having a collection of freebies is a great way to get inspiration quickly as well as adding subtle effects to your designs like paint splats, subtle watercolor effects, grunge textures etc.

Proofread as much as possible

No matter how many times you proofread there will always be something wrong.

I rely on my girlfriend, since she’s a grammar Nazi and has a good eye. Things will always go wrong. After 6 proofreading sessions and well over 4 people looking at it we still get basic errors on some project. Make sure to triple check dates, times and costs.

If you make a mistake, don’t sweat it fix it

Don’t worry about that important bit of information you just forgot. Think about how you are going to fix it.

I’ve done matching stickers to go over bits of info on posters that have had gone to press with the wrong information. I didn’t sweat it and tried to keep my cool and come up with the best solution.

Let it stew

Try to let your projects stew for a week or two to get ideas going.

I try to know what I will be working on a month or a few weeks in advance. This gives my brain time to work on the problem and gives me an idea of where to when I start it. Times when I have had to start a project cold have always been the hardest to get going.

A SEO Guide from Google

If you haven’t heard the news yet Google released an short guide to SEO optimization via the Google Webmaster Blog looks pretty good check it out here.

Imaginary Design

Love can damage your health

Another awesome portfolio from the UK, that’s 2 in a row. Can I make it three next week? At any rate check out this portfolio for some great inspiration.

280 Slides

280 Slides is an online slideshow maker.

After alot of poking around and Google searching I finally rediscovered 280 Slides. Its pretty much an online slideshow maker with some pretty awesome features.

Wordpress Theme Toolkit Plugin

Theme Toolkit Plugin - A better theme editors for wordpress.