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"> </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"> </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.