Hi guys,
I need some help with images being re sized.
The Situation:
Currently I have a featured article chunk that features 1 article at a time and each featured article has 1 image. Below there is a chunk that gets the past 4 articles and is suppose to display a thumbnail of the image that was in the article and the title of the article. When the user clicks on it I want them to be taken to the news archive for the site and to that full article.
Code Thus far
The Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/trendy/style.css" />
</head>
<body>
<!-- Start topWrapper -->
<div id="topWrapper">
<!-- Start paperBg -->
<div id="paperBg">
<!-- Start topContainer -->
<div id="topContainer">
<!-- Start hello -->
<div id="hello">
<!-- End hello -->
</div>
<!-- Start userName -->
<div id="userName">
<p>Guest</p>
<!-- End userName -->
</div>
<!-- Start Login -->
<div id="userLogin">
<a href="#"></a> </div>
<!-- Start Register -->
<div id="userRegister">
<a href="#"></a> </div>
<!-- End Register -->
<!-- End topContainer -->
</div>
<!-- End paperBg -->
</div>
<!-- End topWrapper -->
</div>
<!-- Start mainWrapper -->
<div id="tanContainer">
<div id="bull-clip"></div>
<!-- Start Header -->
<div id="header">
<!-- Start Navigation -->
<div id="navBar">
[!Wayfinder?startId=`0`!]
<!-- End Navigation -->
</div>
<!-- End Header -->
</div>
<!-- Start lowerContent -->
<div id="lowerContent">
<!-- Start left-col -->
<div id="left-col">
<div id="featured-post">
<div class="featuredheader">
</div>
[[Ditto? &parents=`9` &tpl=`mainFeatureTpl` &display=`1`]]
<!-- Start Footer -->
<div class="featuredfooter">
<!-- Start Listen/Buy -->
<div id="listen-buy">
<a href="#"></a>
<!-- End Listen/Buy -->
</div>
<!-- End Footer -->
</div>
<!-- End Featured Story -->
</div>
<!-- Start Other Featured Artists -->
<div id="other-artist">
[[Ditto? &parents=`9` &tpl=`archiveFeatureTpl` &display=`4` &start=`1`]]
<!-- End Other Featured Artists -->
</div>
<!-- Start Horizontal Ad --->
<div id="horizontal-ad">
<a href="#"><img src="images/Horizontal-Ad.png" /></a> </div>
<!-- End Horizontal Ad -->
<!-- Start Video -->
<div id="video">
<!-- Start Video Player -->
<div id="player">
<object width="283" height="226"><param name="movie" value="http://www.youtube.com/v/0HFicKpZC7c&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/0HFicKpZC7c&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="283" height="226"></embed></object>
<!-- End Video Player -->
</div>
<div id="othervideos">
<img src="images/album.jpg" />
<img src="images/album.jpg" />
<img src="images/album.jpg" />
</div>
<!-- End Video -->
</div>
<!-- End Left Col -->
</div>
<!-- Start Right Col -->
<div id="right-col">
<!-- Start Search -->
<div id="searchform">
<form method="" action="">
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="" />
</form>
<!-- End Search -->
</div>
<!-- Start Top Albums -->
<div id="topalbums">
<div id="albumchart">
<div id="album">
<a href="#">
<img src="images/album.jpg" />
<h3>Artist Name</h3>
<br />
<h4>Album Name</h4></a></div>
<div id="album">
<a href="#">
<img src="images/album.jpg" />
<h3>Artist Name</h3>
<br />
<h4>Album Name</h4></a>
</div>
<div id="album">
<a href="#">
<img src="images/album.jpg" />
<h3>Artist Name</h3>
<br />
<h4>Album Name</h4></a>
</div>
<div id="album">
<a href="#">
<img src="images/album.jpg" />
<h3>Artist Name</h3>
<br />
<h4>Album Name</h4></a>
</div>
<div id="album">
<a href="#">
<img src="images/album.jpg" />
<h3>Artist Name</h3>
<br />
<h4>Album Name</h4></a>
</div>
</div>
<div id="viewall">
<a href="#"></a>
</div>
</div>
<!-- End Top Albums -->
</div>
<!-- Start news -->
<div id="news">
<ul>
<li><a href="#">This is a news title </a></li>
<li><a href="#">This is a news title </a></li>
<li><a href="#">This is a news title </a></li>
<li><a href="#">This is a news title </a></li>
<li><a href="#">This is a news title </a></li>
<li><a href="#">This is a news title that is longer than the others </a></li>
<li><a href="#">This is a news title that is longer than the others </a></li>
<li><a href="#">This is a news title that is longer than the others </a></li>
<li><a href="#">This is a news title that is longer than the others </a></li>
<li><a href="#">This is a news title that is longer than the others. This one is longer yet.</a></li>
<li class="morenews"><a href="#"> More News</a></li>
</ul>
<!-- End News -->
</div>
<!-- End Right Col -->
</div>
<!-- End lowerContent -->
</div>
</div>
</body>
</html>
CHUNKS
mainFeatureTpl
<div>
<h3><a href="[~[+id+]~]">[+title+]</a></h3>
<p>[+articleimg+][+content+]</p>
</div>
archiveFeatureTpl
<a href="[~[+id+]~]">[+articleimg+]<br />[+title+]</a>
Right now it is just displaying the original image from the article. I tried installing DirectResize but I’m not sure what happened but it didn’t work and my local server gave me a bunch of errors when I tried viewing the site.
Any help would be much appreciated.
