SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Dynamic Images + CSS

  1. May 26, 2005 08:24 #1
    NickToye
    NickToye is offline
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Images + CSS

    Say I have a news article page that generates an article dynamically from a database, I have also got some images loaded into the database that I would like to drop into the page.

    What is the best way to do this?

    I would like to have three places on a page that I would like the images to go, this can be in the text, so that the text would have to flow around the image. Obviously if I only have two images for an article, then only two image places will be used.

    Any advice, or any useful information/links would be most appreciated.
    Nick Toye Studios
  2. May 26, 2005 08:49 #2
    Buddy Bradley
    Buddy Bradley is offline
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm - I would probably do it with Javascript, and insert the images into the DOM at pre-set points (e.g. before the first, third and fifth paragraphs). That way you could also check how long the article is to see how many images to use.

    Float the images left or right to create a more interesting article layout.
    Digital Web Magazine | The Watchmaker Project
    Bite Size Standards | 29digital Design Studio
  3. May 26, 2005 11:35 #3
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Not that difficult to fill a container Dynamically with a Database, i did a tests with random text and floating text boxes.
    If you need more control you have to build in clear floats after each article.
    Show hide of small text boxes (or images) is controlled by css, see last line in my css sheet in CSS test page



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!-- <meta http-equiv="Refresh" content="5; URL="> -->
	<style type="text/css">
	html,body{/*html for FF Moz NS7 OP */
	text-align:center; /*IE 5 IE 5.5*/
	margin:0px;/* no margins body */
	padding:0px;/* no padding body */
	height:100%;
	}
	
	.con{margin:0 auto 0 auto;width:754px;}/* main container */
	
	/* c for color */
	.c{background:#fcfcfc}
	.cb{background:#eaeaea;}
	.cc{background:#d8d8d8;}
	.cd{background:#c6c6c6;}
	.ce{background:#b4b4b4;}
	.cf{background:#a2a2a2;}
	
	/* general */
	div,p,span,b,a,br{
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size:11px;
	color:#ffffff;
	margin:0px;
	padding:0px;
	text-align:left;/* to get text back to the left*/
	font-weight:100;
	}
	
	.fl{float:left;}
	.fr{float:right;}
	.fcl{
	clear:both;
	height:1px;
	overflow:hidden;
	/* margin-top:-1px; */
	}
	
	/* padding */
	.p{padding:10px;}
	.pb{padding:2px;}
	
	/* margin */
	.mt{margin-top:10px;} /* */
	.ml{margin-left:10px;}
	.mr{margin-right:10px;}
	.mb{margin-bottom:10px;}
	.mtx{margin-top:0px;} /* */
	
	.mtt{margin-top:3px;} /* */
	.mlt{margin-left:3px;}
	.mrt{margin-right:3px;}
	.mbt{margin-bottom:3px;}
	
	.mlin{margin-left:10px;}
	.mrin{margin-right:10px;}
	
	/* b general border color style */
	.b,.bu,.bf,.bn,.bx,.bo,.blr,.bt,.bl,.br,.bb{
	border-color:#f8f8f8; /* b general border color  */
	border-style: solid; /* b general border type  */
	}
	/* b  border size 1px */
	.bu{border-width: 0px 1px 1px 1px;}
	.bn{border-width: 1px 1px 0 1px;}
	.b{border-width: 1px 1px 1px 1px;}
	.bo{border-width: 1px 0 1px 0;}
	.bt{border-width: 1px 0px 0px 0px;}
	.bb{border-width: 0px 0px 1px 0px;}
	
	.w,.w .fl,.w .fr{width:120px;}
	
	.wcbc{width:756px;}
	.wconx{width:736px;}
	
	.dil{display:inline;}
	
	.flxl,.flxr{
	display:inline;
	width:120px;
	float:left;
	margin-top:10px;
	margin-right:10px;
	margin-bottom:10px;
	}
	.flxr{
	width:120px;
	float:right;
	margin-left:10px;
	margin-right:0px;
	}
	.mtx{margin-top:0px;} /* */
	
	/*.flha,.flhb,.flhc,.flhd,.flhe,.flhf,.flhg,.flhh{visibility:hidden;width:0px;height:0px;margin:0px;padding:0px;overflow:hidden;}  */
	
	</style>
	
	<!--[if IE]>
	<style type="text/css">
	</style>
	<![endif]-->
	
</head>
<body class="cf">
<div class="con mt bn">sub header<br /></div>
<div class="con ce bn">header<br /><br /><br /></div>
<div class="con wcbc cd bt">menu<br /><br /></div><!--  -->

<div class="con wconx bo cc p">

<div class="ce b p">
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text

<!--  -->
<div class="flxr flha">
<div class="cd p">left text text text text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>

center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text

<!--  -->
<div class="flxl flhb">
<div class="cf p">left text text text text<br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>


center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text

<!--  -->
<div class="flxl flhc">
<div class="cd p">text text text text<br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>

center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
<!--  -->
<div class="flxr flhd">
<div class="cd p">text text text text<br /><br /><br /><br /></div>
</div>


center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text

<!--  -->
<div class="flxl flhe">
<div class="cf p">text text text text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>


center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text

<!--  -->
<div class="flxr flhf">
<div class="cf p">text text text text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>

center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text

<!--  -->
<div class="flxr flhg">
<div class="cd p">text text text text<br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>

<!--  -->
<div class="flxr flhh">
<div class="cf p">text text text text<br /><br /><br /><br /><br /><br /><br /></div>
</div>

center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text
center text center text center text center text center text center text center text

<!--  -->
<div class="fcl"></div>
</div>
</div>
<div class="con wcbc cd">menu<br /><br /></div>
<div class="con ce mb b">footer<br /><br /><br /></div><!--  -->
<p class="x"><br /></p>
</body>
</html>
  4. May 26, 2005 14:52 #4
    NickToye
    NickToye is offline
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, so if I was to use the dom I could return the number of paragraphs and insert an img dynamically
    Nick Toye Studios
  5. May 26, 2005 16:08 #5
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Eheee . dom ? , Its just pulling data from a database to an html page. This can be very direct
    like I Am misses X looking for gentleman Y, just a strait for ward match by the right quarry from the data base ?
    The build up of the right quarry from a (quality) database is the bottleneck
    Last edited by all4nerds; May 27, 2005 at 01:05.
  6. May 27, 2005 00:59 #6
    Buddy Bradley
    Buddy Bradley is offline
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NickToye
    Ok, so if I was to use the dom I could return the number of paragraphs and insert an img dynamically
    Yes. You'd want something like this:
    Code:
    function insertImages() {
  if (!document.getElementById) return;
  var el = document.getElementById("article");
  var paras = el.getElementsByTagName("p");
  var img1 = document.createElement("img");
  img1.setAttribute("src","/images/picture.jpg");
  el.insertBefore(img1,paras[1]);
  if (paras.length > 3) {
    var img2 = document.createElement("img");
    img2.setAttribute("src","/images/picture2.jpg");
    el.insertBefore(img2,paras[3]);
  }
  if (paras.length > 5) {
    var img3 = document.createElement("img");
    img3.setAttribute("src","/images/picture3.jpg");
    el.insertBefore(img3,paras[5]);
  }
}

window.onload = insertImages;
    You should probably use setAttribute to also set the width, height, alt and class of the images too.
    Digital Web Magazine | The Watchmaker Project
    Bite Size Standards | 29digital Design Studio
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules