Tutorial On How To Create A Picture Of The Day Script

[SabrinaDeep]

I keep seeing requests for potd scripts, so, i thought to share my own one with you guys. I'm sure that there are other ways to do it, probably better ones, but this is the best that my intellect and self-studies allow me to do, at the moment eheheh. And since i'm one of the few non-blondes dulls around, i will explain the whole process in a way that even the blondiest of the dulls can understand. I just assume that you own a website and know how to access it on your server using and FTP program.

1) GOAL
--------

You want to create a script which automatically shows a different thumbnail every day. You want to be able to clcik on the thumbnail and to be redirected to a page with the full picture and sponsors banners. See an example at Sabrina Deep Blog - The Deep-throat Journal (top-left of the page).

2) PREPARE YOUR SERVER
-------------------------

Let's assume your site is called yoursite.com.
- Go inside your website root directory, using FTP.
- Create a new folder and call it "potd"
- Open the newly created folder
- Create a new folder inside the newly created "potd" folder and call it "images"
- Create a new folder inside the newly created "potd" folder and call it "thumbs"

The reason why we are creating two different folders for the full image and for the thumbnail, rather than putting them all together, is because you might want to add different thumbs sizes in the future and in that case it is better to have the thunbs separated from the full pictures.

3) PREPARE THE PICTURES
--------------------------

A- Select 31 pictures if you want the pictures to change every day in a month and then to start rotating again the next month or 365 pictures, if you want a different picture for every day of the year. Crop them with the same width and make sure that whatever width you choose they are not bigger than 640pixels in width. In this way they shall look nice in every browser 's platform and you shall be able to both use small and big pictures in height.
- If you have chosen 31 pictures, name each of the pictures from number 1 to number 31 .jpg (1.jpg, 2.jpg, 3.jpg,.......31.jpg)
- If you have chosen 365 pictures, name each of the pictures from number 1 to number 365 .jpg (1.jpg, 2.jpg, 3.jpg,.......365.jpg)
B- For each picture, make a thumbnail of the size you want (but make sure that ALL the thumbnails have the same size in width and height lol) and name each thumbnail as follows:
- For 31 thumbnails, name each of the thumbnails "t_" plus the number from 1 to 31 .jpg (t_1.jpg, t_2.jpg, t_3.jpg,.......t_31.jpg)
- For 365 thumbnails, name each of the thumbnails "t_" plus the number from 1 to 365 .jpg (t_1.jpg, t_2.jpg, t_3.jpg,.......t_365.jpg)
C- Upload all the pictures from A to the folder "images" on your server.
D- Upload all the pictures from B to the folder "thumbs" on your server.


4) THE SCRIPTS
----------------

You need two very simple, but separated scripts. One is for calling the daily thumbnail on the page where you want to show the picture of the day, while the other one calls the full picture on the subsequent page with the sponsor's banner.

A- The Thumbnail Script
------------------------
Create a new, blank text document and add the following into it:

--- 31 DAYS ---
If you have 31 pictures and thumbnails, this is the correct script.

PHP Code:

<?php

$today=date('d'); 


$thumbtocall='http://www.[b]yoursite[/b].com/potd/thumbs/'.$today.'.jpg';


header('Location: '.$thumbtocall); 
?>

You just have to change the "yoursite.com" part with your website name, that's it!
Now, save the text document as "thumbs.php"

--- 365 DAYS ---
If you have 365 pictures and thumbnails, this is the correct script. As you may see the only things which changes is the $today variable.

PHP Code:

<?php

$today=date('z');


$thumbtocall='http://www.[b]yoursite[/b].com/potd/thumbs/'.$today.'.jpg';


header('Location: '.$thumbtocall); 
?>

You just have to change the "yoursite.com" part with your website name, that's it!
Now, save the text document as "thumbs.php"


B- The Full Picture Script
------------------------

--- 31 DAYS ---
If you have 31 pictures and thumbnails, this is the correct script.

PHP Code:

<?php
$today=date('d'); 
?>

<html>
<head>
<title>[b]YOUR TITLE HERE[/b]</title>
</head>

<body>

<div align=center><b><font face="Arial" size="7">[b]YOUR TITLE HERE[/b]</font></b></div>

<div align=center><a href="SPONSORURLHERE"><img src="http://www.yoursite.com/potd/image/<? print $today ?>.jpg" border=0 alt="[b]WHATEVER ALTERNATE TEXT YOU WANNA PUT HERE[/b]"></a></div>

<p align="center" style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p align="center" style="margin-top: 0; margin-bottom: 0"><a href="[b]YOURSPONSORURLHERE[/b]">
<img border="0" src="http://www.[b]yoursite[/b].com/[b]NAMEOFSPONSORSBANNER[/b].gif" width="[b]sponsor-banner-width[/b]" height="[b]sponsor-banner-height[/b]"></a></p>
<p align="center" style="margin-top: 0; margin-bottom: 0">
<font face="Arial" style="font-size: 16pt"><a href="[b]SPONSORURLHERE[/b]">[b]SALE TEXT HERE[/b]</a></font></p>

</body>
</html>

You just have to change the "yoursite.com" part with your website name and the other bolded text with what you like, that's it!
Now, save the text document as "index.php"

--- 365 DAYS ---
If you have 365 pictures and thumbnails, this is the correct script. As you may see the only things which changes is the $today variable.

PHP Code:

<?php
$today=date('z'); 
?>

<html>
<head>
<title>[b]YOUR TITLE HERE[/b]</title>
</head>

<body>

<div align=center><b><font face="Arial" size="7">[b]YOUR TITLE HERE[/b]</font></b></div>

<div align=center><a href="[b]SPONSORURLHERE[/b]"><img src="http://www.[b]yoursite[/b].com/potd/image/<? print $today ?>.jpg" border=0 alt="[b]WHATEVER ALTERNATE TEXT YOU WANNA PUT HERE[/b]"></a></div>

<p align="center" style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p align="center" style="margin-top: 0; margin-bottom: 0"><a href="[b]YOURSPONSORURLHERE[/b]">
<img border="0" src="http://www.[b]yoursite[/b].com/[b]NAMEOFSPONSORSBANNER[/b].gif" width="[b]sponsor-banner-width[/b]" height="[b]sponsor-banner-height[/b]"></a></p>
<p align="center" style="margin-top: 0; margin-bottom: 0">
<font face="Arial" style="font-size: 16pt"><a href="[b]SPONSORURLHERE[/b]">[b]SALE TEXT HERE[/b]</a></font></p>

</body>
</html>

You just have to change the "yoursite.com" part with your website name and the other bolded text with what you like, that's it!
Now, save the text document as "index.php"

You can adjust the HTML part as you please as long as you leave what is above intact.
Basically, you call the full picture automatically simply using the following inside your image tag:

PHP Code:

<img src="http://www.[b]yoursite[/b].com/potd/image/<? print $today ?>.jpg" border=0 alt="[b]WHATEVER ALTERNATE TEXT YOU WANNA PUT HERE[/b]">

5) PUT IT AT WORK
--------------------
A- Simply upload the thumbs.php and index.php newly created files onto the "POTD" folder on your website.

B- Use the following code to call the thumb of the day wherever you want to call it (your blog, site etc):

PHP Code:

<a href="http://[b]yoursite[/b].com/potd/index.php" target="_blank">
<IMG width="[b]CHOSENTHUMBWIDTH[/b]" height="[b]CHOSENTHUMBHEIGHT[/b]" src="http://www.[b]yoursite[/b].com/potd/thumbs.php" border="0">
</a> 


Well, maybe it looks complicated but it's very easy and fast to do. The goodness about this is that it is in PHP and to the contrary of JAVASCRIPT everybody with every browser will be able to see the picture of the day.

Of course it can be implemented for calling different thumbnail sizes and for adding webmasters codes to the url, but i wanted to explain how the basic thing is done. If you want to see more, just let me know and i'll find some time to add and explain the custom sponsor version of the script.

[oOghostriderOo]

THANK YOU VERY MUCH, this is exactly what i have been looking for. Question for you - can you use more than one instance of the script on the same page and have it display different / random pics. for instance a rotating gallery of 5 or 10 pics that changes everyday.

[pam]

That's awesome, Sabrina! I have a script that does the same thing, but I didn't relish having to move it to yet another domain, set it all up, etc.

Crap, now I have another project to do lol. I need to grab images ..... and since my employee doesn't even have photo editing software, I have to do this all myself.

[RageCash-Ben]

Very nice Sabby

[SabrinaDeep]

Surely you can, althought you might have problems of speed in loading the page, but that depends on your server resources, really.

You can even fish different pics from the same package of pictures, simply creating more istances of both index.php and thumbs.php and just adding a number. For example if you wanna have two different pics of the day on the same page, fishing from the same set of pics, create a duplicate of both index.php and thumbs.php and on each of them substitute

$today=date('d');

with

$today=date('d')+5;
if ($today > "31") {
$today='1';
}

Now on your webpage you can add

<a href="http://www.yoursite.com/potd/index.php><img src="http://www.yoursite.com/potd/thumbs.php" border=0 alt="WHATEVER ALTERNATE TEXT YOU WANNA PUT HERE"></a>
<br>
<a href="http://www.yoursite.com/potd/index1.php><img src="http://www.yoursite.com/potd/thumbs1.php" border=0 alt="WHATEVER ALTERNATE TEXT YOU WANNA PUT HERE">

This way, thumbs.php and thumbs1.php fish the picture named with today's date and the picture named with today's date + 5. When the result is greater than 31, it picks the picture named t_1.jpg

Or if you want to have 3 potd fishing from the same package you can do the above and create a third istance of both thumbs.php and index.php and substitute:

$today=date('d');

with

$today=date('d')+10;
if ($today > "31") {
$today='1';
}

and add

<a href="http://www.yoursite.com/potd/index.php><img src="http://www.yoursite.com/potd/thumbs.php" border=0 alt="WHATEVER ALTERNATE TEXT YOU WANNA PUT HERE"></a>
<br>
<a href="http://www.yoursite.com/potd/index1.php><img src="http://www.yoursite.com/potd/thumbs1.php" border=0 alt="WHATEVER ALTERNATE TEXT YOU WANNA PUT HERE">
<br>
<a href="http://www.yoursite.com/potd/index2.php><img src="http://www.yoursite.com/potd/thumbs2.php" border=0 alt="WHATEVER ALTERNATE TEXT YOU WANNA PUT HERE">

to your webpage where you wanna show the potd thumbs and so on. Which such system i would not encourage to add more than 4 potd fishing from the same package of pics, if you use the 31 pictures system. If you use the 365 pics ystem you can add many more.

Hope it's clear.

[fresh]

awesome tutorial thanks

[gelai18]

thanks for the tutorial sabrina im sure it will benefit for all who wanna have a POD on their site.

[CuriousToyBoy]

WOW... awesome help for many !

Thanks.

;-)

[scoopyu]

Amazing tutorial

i must try this

[joneze]

Great scripts there SabrinaDeep.

Thank You.

[docputer]

Great Tutorial...and also a thank you for that video of the day widget you brought out in the last week or so. I am sure you are seeing increased clicks and sales, I know I am.

[Auf Mauf]

Thanks for this helpful information i will check this out for sure.

[Rofl]

Hey that is simply AMAZING to take the time to put all that together and share.

Nice one

[fredicus]

Many thnx, I'm a lousy coder ( in any language ) but I may well give this a try

[MountainGoat]

Thanks Sabrina, I'm just firing up the Dreamweaver now, and going to have a play with this!

Nice tutorial!

[PornBlogger]

si, si.. gracias senorita!

PHP rocks, thanks for sharing!

[Pandaman]

Bookmarked... Thank You...

Randy

[micho]

great tutorial thanks for that!