How would I randomize 2 images per parent page in header?

17 Posts

denrou Reply #1, 19 years, 6 months ago

I tried a few different things and if one thing worked properly then it would not show up in IE ...

Here is a screenshot of that I want the header to look like:

Here is the progress of my website:

http://www.sentai.com/modx/index.php?id=9

So here is my problem and hope that someone with a fresh mind can help me with this.

Basically If you take a look at the image above, what I am trying to accomplish is have 2 images randomly appear in the header depending on the page. So if you navigate to the Home page there will be a preselected group of images that will be picked randomly to appear on the frontpage header. All other parent pages will also randomly pick images in a groups of images preselected for each parent page.

The thing I am having probs with is trying to figure how to bring in the images using css and divs and having it position itself accurately for all browsers.

So as shown on the image above, I need to have a random image for the background (image label #1) and I need to have another image to overlap the background image (image label #2). I will obviously have all images the exact same size for the randomizing method used.

I tried a few different MODx snippets but nothing worked for me and the fact that I need to float one of the image is beyond my understand at this point.

If anyone could point me in the right direction that would be greatly appreciated.

Thank you!

MODX Staff
12,272 Posts

Ryan Thrash Reply #2, 19 years, 6 months ago

In case you need a starter bit of code for the randomization, do the following (this only handles a single image):

1) Create a folder in your assets/images/ directory to contain all your random header images (random-image).
2) Create a snippet with the following code and call it like [!RandomImg?folder=`random-image`!] where you want the image to be placed
3) Drop as many images into that folder as you desire

<?php
$folder = (isset($folder)) ? $folder : 'assets/images';

$i = 0;
$imgDir = opendir ($folder);
	while ( $file = readdir( $imgDir ) )
	{	
		//checks that file is an image
		$file_type = strrchr( $file, "." );
		$is_image = eregi( "jpg|gif|png|jpeg",$file_type );
		
		if ( $file != '.' && $file != '..' && $is_image && strpos($file, '.') !== 0 )
		{ $images[$i++] = $file; }
	}
closedir ($imgDir);

srand( (double) microtime()*1000000 );
$image_name = $folder . '/' . $images[rand( 0,sizeof( $images ) -1 )];
$imgSize = GetImageSize( $image_name );

//ends script if no images found
if ( $i == 0 )
	die();
return( "<img src=\"" . $image_name . "\"" . $imgSize[3] . " alt=\"\" />\n" );
?>

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

17 Posts

denrou Reply #3, 19 years, 6 months ago

Thanks for your reply rthrash.

I tried what you have posted but I am getting this error:

« MODx Parse Error »
MODx encountered the following error while attempting to parse the requested resource:
« PHP Parse Error »

PHP error debug
Error: opendir(random-image): failed to open dir: No such file or directory
Error type/ Nr.: Warning - 2
File: /data/htdocs/www.sentai.com/modx/manager/includes/document.parser.class.inc.php(748) : eval()’d code
Line: 5

Parser timing
MySQL: 0.0268 s (11 Requests)
PHP: 0.2388 s
Total: 0.2657 s

This is what I have created:

A folder called "random-images" and the path is www.sentai.com/modx/assets/images/random-images with a few images in there
A snippet called "RandomImg" and basically copied and pasted your code information
Placed a call for snippet "[!RandomImg?folder=`random-image`!]" in my template

Could you tell me what I am doing wrong?
Thanks!

MODX Staff
12,272 Posts

Ryan Thrash Reply #4, 19 years, 6 months ago

Try using "assets/images/random-images" or "assets/images/random-images/".

Alternately, modify the first line of the snippet to:

$folder = (isset($folder)) ? 'assets/images/'.$folder : 'assets/images';

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

17 Posts

denrou Reply #5, 19 years, 6 months ago

Sweet!
That worked.

Thanks.

Does anyone know what the best way to go about have the random images float in a specific spot and this working for all browsers?

Thanks again guys.

MODX Staff
12,272 Posts

Ryan Thrash Reply #6, 19 years, 6 months ago

That’s just a CSS problem... what’s your markup and CSS look like?

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

17 Posts

denrou Reply #7, 19 years, 6 months ago

I only tried a few things but I was getting issues placing the image because for some reason my divs do not like to position it in the header.

I basically need the random image to appear right next to the navigation (The "guy" pic) but I think I need to make it float because it needs to overlap on the white content area a bit (Image fades into the content area).

Sorry my code is messy right now because of all the experimenting. I am waiting to complete the framework and then clean my documents.

Here is the HTML used for the template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>[(site_name)] - [*pagetitle*]</title>

<base href="[(site_url)]" />
<link rel="stylesheet" href="[(base_url)]assets//templates/sentai/css/modxmenu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="[(base_url)]assets//templates/sentai/css/form.css" type="text/css" media="screen" />
<link rel="stylesheet" href="[(base_url)]assets//templates/sentai/css/modx.css" type="text/css" media="screen" />
<link rel="stylesheet" href="[(base_url)]assets//templates/sentai/css/print.css" type="text/css" media="print" />
<script src="[(base_url)]manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="[(base_url)]manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript" src="[(base_url)]assets//templates/js/sentai/moo.fx.js"></script>
<script src="[(base_url)]assets//templates/sentai/js/drop_down_menu.js" type="text/javascript"></script>
<script type="text/javascript">
image1 = new Image();
image1.src = "[(base_url)]assets//templates/sentai/images/array_332x28_roll.jpg";
function setActiveStyleSheet() {
new Effect.Appear('modxhost', {duration:0.5});
}</script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
<link rel="stylesheet" href="[(base_url)]assets/templates/sentai/css/style.css" type="text/css" media="screen" />

</head>
<body>
<div id="container-page">
  
  <div class="container-header">
	<div class="searchf">
		<form id="searchform" method="get" action=""><p>
		Search: <input class="search" type="text" name="s" id="s" size="20"/></p>
		</form>
	</div>
	<div class="logo"></div>
  </div>
  
  <div id="container-mainnav">
    <div id="tabs">
      <div id="ajaxmenu"> [[Wayfinder?startId=`0` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &rowTpl=`mh.RowTpl` &innerRowTpl=`mh.InnerRowTpl` &firstClass=`first` &hereClass=``]] </div>
    </div>
  </div>

  <div id="container-content">
    <div id="content-pri">
       <p><h1>[*longtitle*]</h1></p>
      [*introtext*]
      <p>[*content*]</p>
    </div>
<!-- Start #sidebar -->
	
    <div id="content-subnav">
 <!-- <h2>News:</h2>
            [[Ditto? &startID=`2` &summarize=`2` &total=`20` &commentschunk=`Comments` &tpl=`nl_sidebar` &showarch=`0` &truncLen=`100` &truncSplit=`0`]]
            <div id="recentdocsctnr">
              <h2>Most Recent:</h2>
              <a name="recentdocs"></a>[[ListIndexer?LIn_root=0]] </div> -->
<p></p><br>
{{SubMenu-Sidebar}}
<p>{{Login-Sidebar}}</p>
<p>{{Support-Sidebar}}</p>
<p>{{Demo-Sidebar}}</p>
<p>{{Download-Sidebar}}</p>
 </div>
		  
 <!-- End #sidebar -->
  </div>
  <div id="container-footer">
    <div id="footer" align="center">Copyright © 2007 Sentai.com - All Rights Reserved</div>
  </div>
</div>
</body>
</html>

Here is the main CSS used for the template:

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%; /* Required */
}

body {
	color: #000000;
	font: 11px Verdana, sans-serif;
	text-align: center;
	background:#8b8989;
	background-image:url(../images/main_bg.gif);
	background-repeat: repeat-x;
}

h1 {
  font: bold 20px Arial, sans-serif;
  color: #4d4d4d;
}

h2 {
  padding: 1em 0 .2em 0;
  font: bold 18px/1.5em Arial, sans-serif;
  color: #4d4d4d;
}

h3 {
  padding: 1em 0 .2em 0;
  font: bold 16px/1.5em Arial, sans-serif;
  color: #4d4d4d;
}

h3 {
  padding: 1em 0 .2em 0;
  font: bold 14px/1.5em Arial, sans-serif;
  color: #4d4d4d;
}

h4 {
  padding: 1em 0 .2em 0;
  font: bold 12px/1.5em Verdana, sans-serif;
  color: #4d4d4d;
}

p {
  margin: 2em 0;
  line-height: 1.5em;
}

a {
  color: #666;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #999;
  text-decoration: underline overline;
}

#container-page {
  margin: 0 auto;
  width: 938px;
  background: #fff;
  text-align: left;
  position: relative;
  min-height: 100%; /* For Modern Browsers */
  height: auto !important; /* For Modern Browsers */
  height: 100%; /* For IE */
}

.container-header { 
	color: #000; 
	width: 938px; 
	height: 95px; 
	margin: 0 auto; 
	padding: 0;
	background-image:url(../images/header_bg.gif);
	background-repeat: repeat-x;
}

.container-header .logo {
	width: 192px;
	height: 96px; 
	float: left;
	margin-left: 1em;
	margin-top: 0;
	margin-bottom: 0;
	background-image:url(../images/logo.gif);
	background-repeat: no-repeat;  
}

.container-header .searchf {
	float: right;
	margin-right: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	clear: both;	
}

.searchpad { 
	padding-top: 15px; 
}

#container-mainnav {
	width: 938px; 
	height: 196px; 
	margin: 0 auto; 
	padding: 0;
	background-image:url(../images/menu_bg.gif);
	background-repeat: no-repeat;
}

#container-content {
  padding: 0 1em 40px 1em;
  top: 362px;
}

#container-content:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

#content-pri {
  width: 80%;
  float: right;
  margin-top: 2em; 
}

#content-subnav {
  width: 160px;
  height: 100px; 
  float: left;
  margin-top: 1em;
  margin-bottom: 1em;
  background-image:url(../images/);
  background-repeat: no-repeat;
}

#content-subnav ul,#content-subnav ul li {
  list-style: none none;
}

#container-footer {
  width: 100%;
  background: #CCC;
  position: absolute;
  bottom: 0 !important;
  bottom: -1px; /* For Certain IE widths */
  height: 40px;
}

#footer {
  padding: 0 1em;
  line-height: 40px;
}


#tabs {
	width:100%;
	text-align:center;
	background: url(icon/top.gif);
	margin:0 0 0 0;
	position:absolute;
	z-index:500;
	left: 0px;
	top: 262px;
}

div.float {
  float: right;
  position: inherit;
	z-index:2000;
	margin-right: 9em;
	margin-top: 9em;
  }
  
div.float p {
   text-align: center;
   }
   
/* 1st Level Boxes */

.roundedcornr_box_818178 {
	background: url(../images/roundedcornr_818178_tl.png) no-repeat top left;
}
.roundedcornr_top_818178 {
	background: url(../images/roundedcornr_818178_tr.png) no-repeat top right;
}
.roundedcornr_bottom_818178 {
	background: url(../images/roundedcornr_818178_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_818178 div {
	background: url(../images/roundedcornr_818178_br.png) no-repeat bottom right;
}
.roundedcornr_content_818178 {
	background: url(../images/roundedcornr_818178_r.png) top right repeat-y;
}

.roundedcornr_top_818178 div,.roundedcornr_top_818178,
.roundedcornr_bottom_818178 div, .roundedcornr_bottom_818178 {
	width: 100%;
	height: 15px;
	font-size: 1px;
}
.roundedcornr_content_818178, .roundedcornr_bottom_818178 {
	margin-top: 0px;
}
.roundedcornr_content_818178 { padding: 0 15px; }

/* 2nd level boxes */

.roundedcornr_box_563469 {
	background: url(../images/roundedcornr_563469_tl.png) no-repeat top left;
}
.roundedcornr_top_563469 {
	background: url(../images/roundedcornr_563469_tr.png) no-repeat top right;
}
.roundedcornr_bottom_563469 {
	background: url(../images/roundedcornr_563469_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_563469 div {
	background: url(../images/roundedcornr_563469_br.png) no-repeat bottom right;
}
.roundedcornr_content_563469 {
	background: url(../images/roundedcornr_563469_r.png) top right repeat-y;
}

.roundedcornr_top_563469 div,.roundedcornr_top_563469,
.roundedcornr_bottom_563469 div, .roundedcornr_bottom_563469 {
	width: 100%;
	height: 15px;
	font-size: 1px;
}
.roundedcornr_content_563469, .roundedcornr_bottom_563469 {
	margin-top: 0px;
}
.roundedcornr_content_563469 { padding: 0 15px; }

#sidebox {
	color: #797777;
	font: 10px Verdana, sans-serif;
  }



#subnav ul li {
background: url(../images/submenu_arrow.gif) left center no-repeat;
padding-left: 15px;
margin-bottom: 0px;
}

MODX Staff
12,272 Posts

Ryan Thrash Reply #8, 19 years, 6 months ago

Actually, try absolutely positioning it in the header ... should be much easier. (I’m not seeing the item in question you’re having trouble with?)

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

MODX Staff
12,272 Posts

Ryan Thrash Reply #9, 19 years, 6 months ago

That’s the top stickied thread in the tutorial forum laugh

http://modxcms.com/forums/index.php/topic,5258.0.html

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

17 Posts

denrou Reply #10, 19 years, 6 months ago

Ok, it worked.
The header is now randomizing between 5 images for the header.

Now all i need to figure out is to duplicate this and have another random image (image #2) overlap the current header image (image #1).

I will have another group of 5 images (people) to randomly overlap image #1. The way I have the images #2 is I cut around them, saved them as png’s with a shadow effect so it blends in well with any of the background images (image #1).

Should I be floating image #2 overtop of image #1?
I saw that I might be able to use TV ... is that correct?

Thanks for all your help!

Denis