Assign html attributes to url link in CakePHP's HtmlHelper's image

Question

I am trying to find a way to set attributes to the link URL generated by the image method of CakePHP's HtmlHelper. I'm using CakePHP 2.2.1

For example, the following code:

echo $this->Html->image("recipes/6.jpg", array(
    "alt" => "Brownies",
    'url' => array('controller' => 'recipes', 'action' => 'view', 6)
));

generates:

<a href="/recipes/view/6">
    <img src="/img/recipes/6.jpg" alt="Brownies" />
</a>

How can I add attributes to the href tag. Say, for example, class='picture' to look like:

<a href="/recipes/view/6" class='picture'>
    <img src="/img/recipes/6.jpg" alt="Brownies" />
</a>

Raisen: Please ignore the -2 votes on my answer below. It is correct and has been tested. I use it regularly, and as of a year ago, I asked the same question you're asking. — Dave
– Dave, Commented Sep 7, 2012 at 13:22

Dave · Accepted Answer · 2012-09-06 09:53:37Z

4

You cannot add HTML attributes to the Anchor tag via the Html->image method - the way to do it is to put the Html->image within the Html->link method like so:

echo $this->Html->link(
    $this->Html->image("recipes/6.jpg", array('alt' => 'Brownies')),
    array('controller' => 'recipes', 'action' => 'view', 6, array('escape'=>false', 'class'=>'picture')
);

You must also include the 'escpape'=>false - otherwise your <img...> will be escaped, and it will show up like <img ... >

edited Sep 6, 2012 at 9:53

answered Sep 5, 2012 at 13:27

Dave

29.2k26 gold badges117 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun Jain · Accepted Answer · 2012-09-06 04:45:56Z

-1

If you want to add any attribute to HTML anchor tag using HtmlHelper, then you can use it via:

<?php echo $this->Html->link(
$this->Html->image("loading.gif", array('alt' => 'Brownies', 'border' => '0')),
array('controller' => 'recipes', 'action' => 'view', 6),  array('class' => 'picture', 'escape' => false));

edited Sep 6, 2012 at 4:45

answered Sep 5, 2012 at 6:17

Arun Jain

5,4642 gold badges33 silver badges53 bronze badges

Comments

bowlerae · Accepted Answer · 2013-02-25 16:51:38Z

-1

In case you are still looking for an answer, what you have to do is instead of using $this->Html->image with the optional URL attribute, you need to use $this->Html->link with the optional escape = false attribute where the title of the link is your image, utilizing $this->Html->image. What escape = false does is unescape special characters in the title of the link allowing you to use an image or other html element.

Here is an example

echo $this->Html->link(
    $this->Html->image($image['Image']['file'], 'class' => 'image', 'alt' => $image['Image']['title'])),
'path/to/image', // or an array('controller' => 'mycontroller', 'action' => 'myaction')
 array('escape' => false));

You can add more image attributes such as the class and alt I have listed as well as more link attribute such as the escape I have listed.

edited Feb 25, 2013 at 16:51

answered Feb 25, 2013 at 15:55

bowlerae

9441 gold badge14 silver badges38 bronze badges

8 Comments

mark Over a year ago

Why are you just duplicating Dave's answer?

bowlerae Over a year ago

because the answer was voted down and PHP Developer commented that there was an error

mark Over a year ago

It was before he fixed the mistake. You could easily see that by comparing your answer to his. They are identical (apart from the written part). Yours is even less correct as the class is attached to the wrong array. And you are using the wrong array keys for the url - they are not conventional.

bowlerae Over a year ago

the class is for the image, not the link so it is correctly attached. How are the url array keys wrong?

mark Over a year ago

check out the most correct answer on this page - the one from @Dave

|

Collectives™ on Stack Overflow

Assign html attributes to url link in CakePHP's HtmlHelper's image

3 Answers 3

Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related