100 pictures of me, me, me
From time to time, I see that someone thinks that I actually take a picture of my self every day for each individual post. If that were the case, I would have to consider myself to be uber vain. It takes too much time to go through that.
I’m a programmer, and I love to try out neat little tricks. I’ll tell you what I did. It’s actually kind of cool - and you can do it to (or I can help you). I first started out with determining how many pictures I wanted. To keep things simple, I decided on 100 pictures to make a 10×10 grid. You can have any size you want (2×4, 8×3, 3×1). You want to give your pictures as much variety as possible.
I then took all my pictures and resized them (60×45). Since I have 10 rows and columns, my final image of 100 images was 600×450 pixels. Small pictures hide the grainy details that my web-cam picked up and help keep the overall grids filesize small.
I wanted to make sure that each post had a different random image. I wanted this image to be “sticky” in that when ever someone refreshes the page, or comes back to look at the post later, they will see the same random image that was originally assigned to it. I should see the same image as someone else does on there browser.
I don’t have dynamic blog software that lets me assign a special image to each post. My rules required some javascript. I decided to base the image off of the title of the post. I would get the ASCII value of each character in the title and add it up. Then I would get the modulouse of the value by the number of pictures in the grid (100). So the modulous of 105 and 100 would be image number 5 (100 % 105 == 5).
And walah … you have the basic ground work of how my images work. Here is a sample of the image that I use. Through CSS, I am able to position the image as a background image. Since I only show 65×40 pixels, you only see one cell within the grid of images.
And for anyone who wants to really go at it and try it on there own blogs, here is the code that I made. You’ll see that I have two seperate images. One for my wife Angel, and one for me. She doesn’t have as many images as I do. This code supports multiple authors. Cool eh?
2 function profile_initialize()
3 {
4 var elements = document.getElementsByTagName(“img”);
5 var n = elements.length;
6 for(var i = 0; i < n; i++)
7 {
8 var element = elements[i];
9 if(
10 element.hasAttribute != null
11 && element.hasAttribute(“title”)
12 && element.hasAttribute(“alt”)
13 && element.className == “profile”
14 )
15 {
16 var alt = element.getAttribute(“alt”);
17 var title = element.getAttribute(“title”);
18 element.style.backgroundImage = “url(http://www.klooze.com/templates/profiles/” + escape(alt) + “.jpg)”;
19 element.style.backgroundPosition = profile_background(title, alt);
20 element.style.cursor = “hand”;
21 element.title = “View Profile for “ + alt;
22 element.onclick = profile_visit;
23 }
24 else if(element.title != null && element.alt != null && element.className == “profile”)
25 {
26 var alt = element.alt;
27 var title = element.title;
28 element.style.cursor = “hand”;
29 element.title = “View Profile for “ + alt;
30 element.onclick = profile_visit;
31 element.style.backgroundPosition = profile_background(title, alt);
32 element.style.backgroundImage = “url(http://www.klooze.com/templates/profiles/” + escape(alt) + “.jpg)”;
33 }
34 }
35 if(profile_onload) profile_onload();
36 }
37 function profile_background(title, alt)
38 {
39 var columns = 1;
40 var rows = 1;
41 switch(alt)
42 {
43 case “Angel”:
44 columns = 2;
45 rows = 5;
46 break;
47 case “Lewis E. Moten III”:
48 columns = 10;
49 rows = 10;
50 break;
51 }
52 var n = new Number(0);
53 for(var i = 0; i < title.length; i++)
54 n+= title.charCodeAt(i);
55 n = n % (columns * rows);
56 var left = n % columns;
57 var top = (n - left) / columns;
58 var height = new Number(45);
59 var width = new Number(60);
60 left *= width;
61 top *= height;
62 return left + ‘px ‘ + top + ‘px’;
63 }
64 function profile_visit()
65 {
66 switch(this.getAttribute(“alt”))
67 {
68 case “Angel”:
69 window.location.href = “http://www.blogger.com/profile/5315263″;
70 break;
71 case “Lewis E. Moten III”:
72 window.location.href = “http://www.blogger.com/profile/4441557″;
73 break;
74 }
75
76 }
77 profile_onload = window.onload;
78 window.onload = profile_initialize;
April 15th, 2005 at 12:55 pm
You are “the man”.
I have a “team blog” on Blogger (apart from my usual one) and was looking for a way to put an image of the person who made the posting at the top of their post (like the comments portion of blogger). Seeing as Blogger does not appear to have a type tag i realised i will have to code it somehow.
Not as easy as i thought though….
This code might point me in the right direction.
/taoski goes off to learn JavaScript
April 15th, 2005 at 5:10 pm
Very cool code. Thanks for the description.
April 15th, 2005 at 10:33 pm
oh, ok. i thought you took a new picture of yourself everyday. well, this explains why you’re wearing the same shirt in almost every picture, haha.
April 15th, 2005 at 10:53 pm
I’ve also wondered if you took new pictures everyday. Now, the secret is out! Cool stuff.
April 16th, 2005 at 8:25 am
Add me to the list that thought you were taking a new shot everyday. D’uh. I should have noticed the shirt.
You are the man. What an awsome thing you created there!
April 17th, 2005 at 9:28 am
brilliant.
ok, maybe not brilliant, but certainly a smart way of using photos, and programming; and making your blog unique..
April 17th, 2005 at 9:49 am
this is cool…. i just wish I was smart enough with computers to figure this out… good job man…
April 19th, 2005 at 10:49 am
Ahhh…
Managed to sort out my little quandry - with little or no skill in using Javascript!
See here: http://taoski.blogspot.com/2005/04/mr-chuffed.html
April 23rd, 2005 at 6:54 pm
al ov yas r gay n weird u mongs