Integrating web url into image output for a clickable image

This is the web url output in view.ctp

<?php { echo '

'; echo $this->Html->link(__('Visit website'), ''.$event['Event']['web'], array('rel'=>'nofollow')); echo '

'; } ?>

renders this html output:

Visit website

This is the image output in view.ctp

<?php if($event['Event']['logo']!='') { echo '
'; } ?>

renders this html:

How can I add the web url into the image code so it becomes a clickable link to the website output?

Hello

You can simply write

echo $this->Html->link($this->Html->image(‘your_logo_url’, array(‘logo image parameters’),‘link url’,array(‘link parameters’, ‘escape’ => false)));

Hi Jatlins, thanks for the reply but I can't follow your suggestion, I am not able to understand it. i just want to use this code in the following IMAGES_URL to make the image clickable to the webpage this line refers to, can you re-write what you think it should be so I can see if it works please?

echo $this->Html->link(__('Visit website'), ''.$event['Event']['web'], array('rel'=>'nofollow'));

into here:-

<?php
if($event['Event']['logo']!='') {
echo '<div id="event-view-header" style="background-image: url(' . Router::url('/') . IMAGES_URL
. 'logos/big/' . $event['Event']['logo'] . ')"></div>';
}
?>

This is the complete code for the web url:-

 <?php
echo sprintf(__('Posted by %s'), $this->Html->link($event['User']['username']
	, array('controller'=>'users', 'action'=>'view', $event['User']['slug']))) . '.';

if(!empty($event['Event']['web'])) {
	echo '<p>';
	echo $this->Html->link(__('Visit website'), ''.$event['Event']['web'], array('rel'=>'nofollow'));
	echo '</p>';
}
?>

HI

Gerronimo

How I understand it is you want to create clickable image right?

and image will redirect to a link you specify

OR do you want to give image url in background property of div

please let me know if understood it correct

Hi Jatlin,

Thank you for helping and your patience. There are two points.

  1. The ‘Visit Website’ code uses a database driven website url which is for a specific link.
  2. The ‘background-image’ code uses the same database for that specific website but does not click to go to the website.

So what I want to do is allow the specific ‘Visit website’ code to allow users to click the image as well as use the ‘Visit Website’ link. It gives the user the option to click the picture and go to the same destination that the ‘Visit Website’ link uses.

Does that make sense? I thought it would be quite straightforward to people that understand CakePhp, unfortunately for me I am only a novice with this.

If you can give me the code that would add the link to the web address into the background image code it would be much appreciated. I will test it out and see if it works and tell you if I have had any success with it.

Much appreciated if you can solve this little puzzle.

@Gerronimo: Pleasure is mine :slight_smile:

I understood your point. There are two ways:

1. If you want to keep logo as background to div element I think its better to use javascript to navigate user on click. For this you can add url in data-rel tag in div element and give a specific class to those div elements.

echo ‘div id=“event-view-header” class=“logo-holder” style="background-image: url(’ . Router::url(’/’) . IMAGES_URL
. ‘logos/big/’ . $event[‘Event’][‘logo’] . ‘)" data-rel="’.$event[‘Event’][‘web’].’">’;

And then in bottom use below script:

/*
jQuery(".logo-holder").on(‘click’, function(){

window.location.href = jQuery(this).attr(‘data-rel’);

})

2. Second way which I prefer is my first answer, where I have created a tag with image in it. so

<?php echo $this->Html->link($this->Html->image('logos/big/' . $event['Event']['logo']),$event['Event']['web'],array('rel'=>'nofollow', 'escape' => false)); ?>

will output like below

a href="" rel=“nofollow” >
img src="/logo/big/logo.png" />

  • above code are for reference for understanding the way how to do it. Please ignore if you find any error. :smiley:

With 1. above I am not sure how to do that. With 2. above it works great just what I was looking for except one thing.

I would like to keep the style format of the

#event-view-header {
text-align: center;
overflow: hidden;
background-color: #008080;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
width: 100%;
padding-top: 55%;
height: 100%;
}

Because the solution in 2. above doesn’t have the styling I use to make the picture responsive .

So solution 2 works fine but without the styling which is a problem and solution 1 I don’t know how to implement that.

If it’s possible to add the event-view-header in 2 maybe it will solve the issue.

On second thoughts it looks like it may need to use the div elements to keep the responsive nature.

So, it would need to add the event web link into the div for number 1. above I think. I don’t want to use javascript if I can help it as I already have a lot :slight_smile:

@Gerronimo:

with 2 you will need to work a little on style urself, however try adding event-view-header to a tag:

<?php echo $this->Html->link($this->Html->image('logos/big/' . $event['Event']['logo']),$event['Event']['web'],array('rel'=>'nofollow', 'escape' => false,'id' => 'event-view-header')); ?>

OR

<?php echo $this->Html->link($this->Html->image('logos/big/' . $event['Event']['logo']),$event['Event']['web'],array('rel'=>'nofollow', 'escape' => false)); ?>

If you do not want to change any design solution 1 will be good as you just need to add link URL in a new tag in DIV element like

and then use javascript :wink:

OK Jaitlin,

Can we try 1. above please. I need the exact PHP code so I can paste and replace mine and the exact javascript code that I attach to the bottom of the page. If I need to add more info somewhere please say because I am feeling very stupid toady.

These don’t work for me…:frowning:

I don’t understand why it not possible to add the web link in here, seems so complicated …

<?php
if($event['Event']['logo']!='') {
echo '<div id="event-view-header" style="background-image: url(' . Router::url('/') .     IMAGES_URL
. 'logos/big/' . $event['Event']['logo'] . ')"></div>';
}
?>

It would make everything else work fine…

this is a DIV element that is the reason you can’t simply add link to it.

Here you go with the code:

PHP :
if($event[‘Event’][‘logo’]!=’’) {
echo ‘div id=“event-view-header” style="background-image: url(’ . Router::url(’/’) . IMAGES_URL
. ‘logos/big/’ . $event[‘Event’][‘logo’] . ‘)" data-rel="’.$event[‘Event’][‘logo’].’">’;
}

Javascript:

jQuery("#event-view-header").on(‘click’, function(){

window.location.href = jQuery(this).attr(‘data-rel’);

})

Hi jatlins,

I tried doing your last suggestion but it only shows:

div id="event-view-header" class="logo-holder" style="background-image: url(/evento/img/logos/big/logo.jpg)" data-rel="https//www.example.com">

and with jquery I just added it to the view.ctp at the bottom but I don’t think I added it properly because it shows in the view.ctp

jQuery("#event-view-header").on('click', function(){ window.location.href = jQuery(this).attr('data-rel'); })

Sorry for the delayed response but having problems with a stepchild.

I did this:

<?php
echo 'div id="event-view-header" class="logo-holder" style="background-image: url(' .     Router::url('/') . IMAGES_URL
. 'logos/big/' . $event['Event']['logo'] . ')" data-rel="'.$event['Event']['web'].'">';
 ?>

and added this in the bottom after the final div…suffice to say it didn’t appear as proper code.

jQuery("#event-view-header").on('click', function(){

window.location.href = jQuery(this).attr('data-rel');

}):

This may help…it’s the bare bones of the view.ctp file with the relevant code.

<?php
if($event['Event']['logo']!='') {
echo '<div id="event-view-header" style="background-image: url(' . Router::url('/') . IMAGES_URL
. 'logos/big/' . $event['Event']['logo'] . ')"></div>';
}
?>


<?php
echo $this->Html->link(__('Visit website'), ''.$event['Event']['web'], array('rel'=>'nofollow'));
?>

If you can give me the same bare bones view.ctp file back with your suggested DIV code I may be able to just try it in a bare bones fashion and see if it behaves.

Hi Jaitlin,

In the end I decided that as it doesn’t have a straightforward fix and adding the javascript seems too complicated or it doesn’t work for me at least I will have to leave the code as is.

I only wanted a clickable image. Didn’t realise the code I have to work with was so complicated.

So thanks for your assistance, at least you tried. :slight_smile:

Fixed it with a little playing with your code…Great it now works…Thought you would like the adjustment I made to your code, just added and closed the DIV elements. It works repsonsive also now :grinning:

<?php
if($event['Event']['logo']!='') {
echo '<div id="event-view-header" style="background-image: url(' . Router::url('/') . IMAGES_URL
. 'logos/big/' . $event['Event']['logo'] . ')" data-rel="'.$event['Event']['web'].'"></div>';
}
?>

@Gerronimo

glad it worked. :slight_smile: sorry could not reply for long.

Sorry I missed that < before div

:slight_smile: