• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 237
  • Last Modified:

place link around each banner

I have the following code that loops through and displays banners.  I now need to place a hyperlink around each banner.  Each link will be different though.  How would I do that?
<?php $imgArray = array('New-Sales-Banner-$395.png','New-Sales-Banner-$395.png','DPR-local-sales-banner-b.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png');
	if (true /*have_posts()*/) { $counter = -1;
	while ($counter < 8 /*have_posts()*/) { /*the_post();*/  $counter++;
		if ( $counter == 2 ) { ?>		
		<div style="margin-bottom: 20px;margin-top: -10px; float:left;">		
		<a href="/"><img src="/images/<?php echo $imgArray[$counter]; ?>" alt="" title="" width="619" height="160" class="noflashbanner" /></a>		
		</div>		
		
			<?php continue;} ?>
		<div class="post<?php if (($counter % 2) == 0) { echo ' last'; } ?>">

		<img src="/images/<?php echo $imgArray[$counter]; ?>" width="289px;" height="347px;" alt="" title="" align="center" border="0" />
			
		<div class="dotted-line"></div>
			
		</div><!-- /.post -->
                                                
<?php } ?>            
        
<?php } $counter = 0; ?>

Open in new window

0
COwebmaster
Asked:
COwebmaster
  • 8
  • 7
  • 2
1 Solution
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
To get this straight in my head, you have say 6 images that rotate as the banner. Each of these images have a corresponding web page that is different for each. You want to click on an image and it goes to the individual link. Is that accurate?

There are several ways to do this. With your own code you can create a link hotspot with a variable target around the banner. Then create some if statements to test what image is being displayed and then set the link variable to one that matches.
You can also set up an array that states the image and the corresponding link.

But I believe all this is moot. Wordpress has many plug-ins for rotating banners that do this for you. Several are for Ads, but they can easily be re-purposed to direct to locations on your site.
I'd recommend AdRotate
http://wordpress.org/extend/plugins/adrotate/
http://adrotateplugin.com/

Another decent option is http://www.fmsseo.com/2408/wordpress-banner-rotator-plugin/
But this presents images in a square so may not be what you are after.
0
 
COwebmasterAuthor Commented:
I think I'm more interested in the first approach using the array.  Any idea on how to do that using the above code?
0
 
Ray PaseurCommented:
Set up a numbered array of objects.  Each object will contain the URL of the image you want to display, the URL of the link you want to visit, the CSS, etc.

Set the current object number in the session.  On each page load, grab the object number from the session and add one to the array index (object number) and take the modulo value of that number.  Store the new value into the session and create the advertisement using the data in the object that was found from the number in the session at page load time.

It's easier to code than explain in English, but I hope you get the idea.  Best of luck with it, ~Ray
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
COwebmasterAuthor Commented:
Thanks Ray.  As you can see, it's the code you gave me above :)

I'm a little lost though on the explanation.  Any chance you could provide a code example?
0
 
Ray PaseurCommented:
http://www.laprbass.com/RAY_temp_cowebmaster.php

Click refresh a few times to cause new page loads.  You will be able to see how it works.
<?php // RAY_temp_cowebmaster.php
error_reporting(E_ALL);


// DEMONSTRATE HOW TO ROTATE ADVERISTEMENTS


// DEFINE THE AD CLASS - WILL CONTAIN IMAGES URLS, LINK URLS, CSS, ETC.
Class Advert
{
    public function __construct() { $this->adname = NULL; }
    public function setAdName($n) { $this->adname = $n; }
    public function getAdName()   { return $this->adname; }
}


// ALWAYS THE FIRST INSTRUCTION ON EVERY PAGE
session_start();

// CREATE AN ARRAY OF advert OBJECTS (MAYBE FROM A DATA BASE)
$arr[0] = new Advert;
$arr[0]->setAdName('Apples');

$arr[1] = new Advert;
$arr[1]->setAdName('Oranges');

$arr[2] = new Advert;
$arr[2]->setAdName('Bananas');


// IF THERE IS NOTHING IN SESSION YET, PUT IN THE STARTING NUMBER
if (!isset($_SESSION["adnum"])) $_SESSION["adnum"] = count($arr) - 1;

// INCREMENT THE AD NUMBER
$_SESSION["adnum"]++;

// COMPUTE THE INDEX OF THE NEXT OBJECT IN THE ARRAY
$_SESSION["adnum"] = $_SESSION["adnum"] % count($arr);

// GET THE AD INFORMATION FROM THE OBJECT
$current_ad = $arr[$_SESSION["adnum"]]->getAdName();


// DISPLAY THE ADVERT
var_dump($current_ad);

Open in new window

0
 
COwebmasterAuthor Commented:
okay thanks but I still don't see how I can wrap a url around each of my banners using the code above.
0
 
Ray PaseurCommented:
You have a lot of moving parts to this question, and you will need to integrate the parts.

If a banner is an image, it will be presented in the HTML via an <img> tag.  The src attribute of the <img> tag is the URL of the image.

When a link is presented in HTML, it shows up in the <a> tag.  The href attribute of the <a> tag is the URL of the linked resource (probably a web page).

You can wrap any <img> inside <a> and that will give you a picture that is a clickable link.  The information about the image and the associated link would need to be put into the Advert objects.  You may have other information you want to put into those objects, for example, CSS to style the HTML, or an identification number to be passed to the linked resource, etc.  It's a wide-open topic limited only by your creativity.

This is what the HTML for an image link looks like:
<a href="/path/to/resource"><img src="path/to/image" /></a>
0
 
COwebmasterAuthor Commented:
Ray, if you look at my original question, I'm only looking for a quick code adjustment to add links around what you've already given me in another thread which I've included below.

Here is my original question for this thread:

I have the following code that loops through and displays banners.  I now need to place a hyperlink around each banner.  Each link will be different though.  How would I do that?

What I need is an answer to my original question not a new methodology to displaying image banners.  Sorry if my question was confusing to you but I believe it's a pretty straight forward question.  Your new code above only displays a single array object at a time which is not what I want.

I just expert assistance with the code I've already provided in this thread but not necessarily looking to learn anything if that makes sense.
<?php $imgArray = array('New-Sales-Banner-$395.png','New-Sales-Banner-$395.png','DPR-local-sales-banner-b.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png');
	if (true /*have_posts()*/) { $counter = -1;
	while ($counter < 8 /*have_posts()*/) { /*the_post();*/  $counter++;
		if ( $counter == 2 ) { ?>		
		<div style="margin-bottom: 20px;margin-top: -10px; float:left;">		
		<a href="/"><img src="/images/<?php echo $imgArray[$counter]; ?>" alt="" title="" width="619" height="160" class="noflashbanner" /></a>		
		</div>		
		
			<?php continue;} ?>
		<div class="post<?php if (($counter % 2) == 0) { echo ' last'; } ?>">

		<img src="/images/<?php echo $imgArray[$counter]; ?>" width="289px;" height="347px;" alt="" title="" align="center" border="0" />
			
		<div class="dotted-line"></div>
			
		</div><!-- /.post -->
                                                
<?php } ?>            
        
<?php } $counter = 0; ?>

Open in new window

0
 
Ray PaseurCommented:
Sorry -- I do not recognize my code in the snippet above.

Let's go to this issue:
I now need to place a hyperlink around each banner.  Each link will be different though.  How would I do that?

It depends on the rules you have for associating the hyperlink with the banner.  Is this a one-to-one, one-to-many, many-to-one, or many-to-many relationship?  The designs you would use to place the "right" link around the "right" banner are dependent on these rules.
0
 
COwebmasterAuthor Commented:
Ray, sorry but all of this kibitzing back and forth is not solving my problem.  If you look at my code (which I've attached below again) you would quickly understand that I'm display 8 banners through the array.  I just need to place a single link around each banner.  This is not a sql question but a simple php question requiring a simple workaround to existing code.  Make sense?
0
 
COwebmasterAuthor Commented:
sorry, here is that code again.

So...using the code below... how can I wrap a hyperlink around each image as it loops through the array.. again, this is a very straight forward question :)
<?php $imgArray = array('New-Sales-Banner-$395.png','New-Sales-Banner-$395.png','DPR-local-sales-banner-b.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png');
	if (true /*have_posts()*/) { $counter = -1;
	while ($counter < 8 /*have_posts()*/) { /*the_post();*/  $counter++;
		if ( $counter == 2 ) { ?>		
		<div style="margin-bottom: 20px;margin-top: -10px; float:left;">		
		<a href="/"><img src="/images/<?php echo $imgArray[$counter]; ?>" alt="" title="" width="619" height="160" class="noflashbanner" /></a>		
		</div>		
		
			<?php continue;} ?>
		<div class="post<?php if (($counter % 2) == 0) { echo ' last'; } ?>">

		<img src="/images/<?php echo $imgArray[$counter]; ?>" width="289px;" height="347px;" alt="" title="" align="center" border="0" />
			
		<div class="dotted-line"></div>
			
		</div><!-- /.post -->
                                                
<?php } ?>            
        
<?php } $counter = 0; ?>

Open in new window

0
 
Ray PaseurCommented:
Please let me try this question again:
It depends on the rules you have for associating the hyperlink with the banner.  Is this a one-to-one, one-to-many, many-to-one, or many-to-many relationship?  The designs you would use to place the "right" link around the "right" banner are dependent on these rules.

Sorry if you think this information does not matter.  I do not think there is any way to help you without getting it.
0
 
COwebmasterAuthor Commented:
thanks!
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
In a very basic sense you would simple add an <a> tag around the <img> tag.
So with your code something like this
<a href=?php link variable><img src="/images/<?php echo $imgArray[$counter]; ?></a>
The ?php link variable code would link to the array with the image and the associated link.


What Ray Paseur is after is where you are getting the URL for the link from in regards to the image.
I would assume a one to one ie one image has one url link associated with it. So the array would be something like this:

Number      Image                     URL
0                img.jpg                  ../ink.html
1                img1.jpg                ../ink1.html
2                ../new/img1.jpg     ../ink2.html
etc

Is that correct?
0
 
Ray PaseurCommented:
@Rartemass: Yep! For some reason COwebmaster thought there was something about SQL here.  Go figure!
0
 
COwebmasterAuthor Commented:
so are you suggesting I place links around this?

array('New-Sales-Banner-$395.png','New-Sales-Banner-$395.png','DPR-local-sales-banner-b.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png','New-Sales-Banner-$295.png');
0
 
Ray PaseurCommented:
No, I am not suggesting that at all and I would probably fire a programmer who came up with that solution.  The correct answer will be accurate, durable and extensible.  If you want to see the OOP design please post a new question and I will show you how the professionals might go about it.  But just to be clear, I will really need to ask you a few questions to understand the correct choice of the design pattern, and the first clarifying question will be the same one from earlier:

It depends on the rules you have for associating the hyperlink with the banner.  Is this a one-to-one, one-to-many, many-to-one, or many-to-many relationship?  The designs you would use to place the "right" link around the "right" banner are dependent on these rules.

Best of luck with your project, ~Ray
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 8
  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now