Hello everyone, this is my first add-on for Chevereto (i hope i can make more soon 😛 )
it really simple, it will display 4 random images from thumbs folder (default) or you can create a new folder to upload your featured images.
Files to edit:
- index.php
- estilo.css
first make sure you backup this 2 files then continue reading..
Screenshot (demo):
Open index.php and after the first "?>" in the line 19 paste this code:
NOTE: if you want to use different folder for featured images just search for "thumbs" in this code and change it with the name of your featured images folder.
Next, search for "</form>" (there is three in index.php) after the first one in line 187 paste this code:
Now open estilo.css and search for "body, html" (its in line 6) and add to it "height:100%;" should look like this:
And in the end of the file (estilo.css), add this:
Enjoy, i hope you like it 🙂
it really simple, it will display 4 random images from thumbs folder (default) or you can create a new folder to upload your featured images.
Files to edit:
- index.php
- estilo.css
first make sure you backup this 2 files then continue reading..
Screenshot (demo):
Open index.php and after the first "?>" in the line 19 paste this code:
NOTE: if you want to use different folder for featured images just search for "thumbs" in this code and change it with the name of your featured images folder.
Code:
<?php function RandomFile($folder='' ,$extensions = 'jpg|jpeg|png|gif|bmp'){
// fix path:
$folder = trim($folder);
$folder = ($folder == '') ? './' : $folder;
// check folder:
if (!is_dir($folder)){ die('invalid folder given!'); }
// create files array
$files = array();
// open directory
if ($dir = @opendir($folder)){
// go trough all files:
while($file = readdir($dir)){
if (!preg_match('/^\.+$/', $file) and
preg_match('/\.('.$extensions.')$/', $file)){
// feed the array:
$files[] = $file;
}
}
// close directory
closedir($dir);
}
else {
die('Could not open the folder "'.$folder.'"');
}
if (count($files) == 0){
die('No files where found :-(');
}
// seed random function:
mt_srand((double)microtime()*1000000);
// get an random index:
$rand = mt_rand(0, count($files)-1);
// check again:
if (!isset($files[$rand])){
die('Array index was not found! very strange!');
}
// return the random file:
return $folder . "/" . $files[$rand];
}
$random1 = RandomFile("thumbs");
while (!$random2 || $random2 == $random1) {
$random2 = RandomFile("thumbs");
}
while (!$random3 || $random3 == $random1 || $random3 == $random2) {
$random3 = RandomFile("thumbs");
}
while (!$random4 || $random4 == $random1 || $random4 == $random2 || $random4 == $random3) {
$random4 = RandomFile("thumbs");
}
?>Next, search for "</form>" (there is three in index.php) after the first one in line 187 paste this code:
Code:
<!-- FEATURED IMAGES -->
<div id="i_home">
<h2>Featured images!</h2>
<img src="site-img/foot_bkg.png" alt="" border="0">
<ul class="box"><li><img src="<?php echo $random1; ?>" width="190px" height="143px" /></li><li><img src="<?php echo $random2; ?>" width="190px" height="143px" /></li><li><img src="<?php echo $random3; ?>" width="190px" height="143px" /></li><li><img src="<?php echo $random4; ?>" width="190px" height="143px" /></li></ul>
</div>
<!-- FEATURED IMAGES END -->Now open estilo.css and search for "body, html" (its in line 6) and add to it "height:100%;" should look like this:
Code:
body, html {
background: #FFF url(site-img/body_bkg_default.png) repeat-x;
font-family: Helvetica, Arial, sans-serif;
padding: 0; margin: 0;
color: #333;
height:100%;
}And in the end of the file (estilo.css), add this:
Code:
/* Featured images */
#i_home{color:#808080;text-shadow:1px 1px #FFF,1px 1px #FFF,1px 1px #FFF;-webkit-transition:all .12s ease-out;-moz-transition:all .12s ease-out;-o-transition:all .12s ease-out;}#canvas_div p,#tips_1{font-size:80%;}#tips_1{color:#1c9105;}#tips_0{font-size:80%;color:#000;text-align:center;}
#i_home{width:930px;margin:20px auto 0 auto;padding:0;border:0 solid #000;}
#i_home{text-align:center;}
#i_home p{font-size:80%;}
#i_home div{margin:20px auto 0 auto;border:1px solid #000;color:#808080;text-shadow:1px 1px #FFF,1px 1px #FFF,1px 1px #FFF;-webkit-transition:all .12s ease-out;-moz-transition:all .12s ease-out;-o-transition:all .12s ease-out;}
ul.box{margin:0;padding:0;clear:both;overflow:hidden;}
li{text-align:center;}
ul.box li{list-style-type:none;margin:0 30px 30px 0;padding:5px 0 0 0;width:200px;height:150px;border:1px solid #efefef;position:relative;float:left;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;}
ul.box li:after{z-index:-1;position:absolute;background:transparent;width:70%;height:55%;content:'';right:10px;bottom:10px;transform:skew(15deg) rotate(6deg);-webkit-transform:skew(15deg) rotate(6deg);-moz-transform:skew(15deg) rotate(6deg);box-shadow:0 8px 16px rgba(0,0,0,0.3);-webkit-box-shadow:0 8px 16px rgba(0,0,0,0.3);-moz-box-shadow:0 8px 16px rgba(0,0,0,0.3);}
ul.box li:before{z-index:-2;position:absolute;background:transparent;width:70%;height:55%;content:'';left:10px;bottom:10px;transform:skew(-15deg) rotate(-6deg);-webkit-transform:skew(-15deg) rotate(-6deg);-moz-transform:skew(-15deg) rotate(-6deg);box-shadow:0 8px 16px rgba(0,0,0,0.3);-webkit-box-shadow:0 8px 16px rgba(0,0,0,0.3);-moz-box-shadow:0 8px 16px rgba(0,0,0,0.3);}Enjoy, i hope you like it 🙂
