Outputting multiple elements within <a> using CakePHP HTML Helper - cakephp

I'd like to know if this code...
echo $this->Html->link(
"<h3>test</h3>".$this->Html->image("image.jpg")."<p>Some text</p>",
"/link",
array('escape' => false)
);
...is the best way to generate this HTML in CakePHP...
<a href="/path/to/link">
<h3>test</h3>
<img alt="" src="/path/to/image.jpg">
<p>Some text</p>
</a>
Or, is there a more "correct" way of doing this? I want the and all to be within the tag so that I can set the to display: block; in CSS and have the whole area clickable with a hover effect.
Something tells me that having HTML echoed like this isn't the right way to go about it, but I can't see an alternative if I'm going to use the HTML Helper. Is there one?

Just use the URL method of the HTML helper instead of the link one,do the rest as static HTML, may as well keep the amount of PHP down to a minimum as far as I see it.
<a href="<?php echo $this->Html->url($params); ?>">
<h3>test</h3>
<?php echo $this->Html->image($params); ?>
<p>Some text</p>
</a>
This would be the most efficient way of doing this task. But maybe you should think about your markup structure and what you want to achieve...

I use
$this->Html->tag('li',
$this->Html->link(
'<i class="entypo-book"></i>'.
$this->Html->tag('span', $nom
.$this->Html->tag('span', '32', array('class' => 'badge'))
),
array('controller' => 'Pages', 'action' => 'index'),
array('class' => 'active', 'title' => 'Pages', 'escape' => false)
)
);

Related

Form element inside html element not working in cakephp

I have read the documentation and tried all the possible solution but no gain.
This is my html code
<?php echo $this->Html->link(
$this->Form->button("Continue", ["type" => "button", "class"=>"btn btn-dark btn-theme-colored btn-flat mr-5"]),
array(
'controller' => 'my_controller',
'action' => 'my_action'
));?>
I want to have a button inside <a> tag but it is outputting the button in '' " tags.
This is what i want
<i>
<button></button>
</i>
All special chars will be converted to html entities, unless you disable this behavior, using escape option. Code below should output what you want:
<?php echo $this->Html->link(
$this->Form->button("Continue", ["type" => "button", "class"=>"btn btn-dark
btn-theme-colored btn-flat mr-5"]),
array(
'controller' => 'my_controller',
'action' => 'my_action'
),
array(
'escape' => false
));?>
More about HTML helper can be found here: https://book.cakephp.org/3.0/en/views/helpers/html.html#creating-links

In my <a> tag, there are lots of code HTML. How to add Html link (CakePHP)

My code:
<a href="#">
<div class="list_content">
<p class="title"><?php echo $note['Note']['title']; ?></p>
<p class="create_at"><?php echo $note['Note']['create_at'] ?></p>
<p> <?php echo substr($note['Note']['content'], 0,100) . '...' ?></p>
</div>
</a>
How to add <?php echo $this->Html->link('...') ?> in CAKEPHP 2.x
If you want to insert HTML element in any HTML helper, you have to add 'escape' => false. Check the document https://book.cakephp.org/2.0/en/core-libraries/helpers/html.html#HtmlHelper::link
Simple Example:
$this->Html->link('<b>My Content</b>','#',[
'escape' => false
]);
For you case:
$this->Html->link(
$this->Html->div('list_content',
$this->Html->para('title',$note['Note']['title']).
$this->Html->para('create_at',$note['Note']['create_at']).
$this->Html->para(null,substr($note['Note']['content'], 0,100) . '...')
),
'#',
['escape' => false]
);
If you are going to use Aman's answer, remember that by setting 'escape' => false you are disabling a default security feature. So you probably want to make sure you then escape any user input using the h() method:-
$this->Html->link(
$this->Html->div('list_content',
$this->Html->para('title', h($note['Note']['title'])).
$this->Html->para('create_at', h($note['Note']['create_at'])).
$this->Html->para(null, substr(h($note['Note']['content']), 0,100) . '...')
),
'#',
['escape' => false]
);
If you've got a lot of markup you want inside your <a> tags it is sometimes simpler to use $this->Html->url() instead (and can lead to more readable code):-
<a href="<?= $this->Html->url('#') ?>">
<div class="list_content">
<p class="title"><?php echo $note['Note']['title']; ?></p>
<p class="create_at"><?php echo $note['Note']['create_at'] ?></p>
<p> <?php echo substr($note['Note']['content'], 0,100) . '...' ?></p>
</div>
</a>
The only real disadvantage I am aware of doing this second example is that you lose any functionality that you may add to $this->Html->link(), but I suspect this isn't a concern for the majority of users.

CakePHP - Trying to use an image instead of a text to link to somewhere else

I´m quite new to CakePHP ... I am using CakePHP 3 and want display an image in a <td>, that links to an URL or a Javascript function.
$this->Html->tag('td', $this->Html->link($this->Html->image('/img/do_something.png'), array('action' => 'do_something')))
My problem is, that the image isn´t displayed but instead it shows:
<img src="/img/do_something.png" alt=""/>
Any ideas ?
Reading the manual usually helps:
HTML special characters in $title will be converted to HTML entities.
To disable this conversion, set the escape option to false in the
$options array.
echo $this->Html->link(
$this->Html->image("recipes/6.jpg", ["alt" => "Brownies"]),
"recipes/view/6",
['escape' => false]
);
Will output:
<a href="/recipes/view/6">
<img src="/img/recipes/6.jpg" alt="Brownies" />
</a>
burzum's answer about using 'escape' => false on the link works great and gives you the ability to easily set attributes on both the link and image. However, if you just simply want to link an image you can do this by setting the url option on the image:-
$this->Html->image(
'/do_something.png',
[
'url' => ['action' => 'do_something']
]
);
Which will give you something like:-
<a href="/controller/do_something">
<img src="/img/do_something.png" alt="" />
</a>
As burzum mentioned, it's all clearly explained in the docs.
Simply Do :
$this->Html->image('image.jpg',['url' => ['action' => 'action_name']]
);

Cakephp Paginator Custom Styling

I am using the Paginator Component and Helper.
My Code block for Styling is as follows.
<!-- Pagination -->
<div class="pagination">
<ul class="pages">
<li class="prev"><</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="next">></li>
</ul>
</div>
When i try to create the pagination using the following
<!-- Pagination -->
<div class="pagination">
<ul class="pages">
<?php if($this->Paginator->hasPrev()) echo $this->Paginator->prev('<', array('tag' => 'li', 'escape' => false)); ?>
<?php echo $this->Paginator->numbers(array('separator' => false, 'tag' => 'li', 'currentClass' => 'active')); ?>
<?php if($this->Paginator->hasNext()) echo $this->Paginator->next('>', array('tag' => 'li', 'escape' => false)); ?>
</ul>
</div>
The Active class is given to the li tag but my template uses the active class to the a-href tag
is there any way i can make cake give it to the a tag?
You will have to extend and override the PaginatorHelper::number() method for that.
Then use your customized paginator helper app wide by using the aliasing feature to make it available as $this->Paginator in your views to replace it in all views.
public $helpers = array(
'Paginator' => array(
'className' => 'MyPaginator',
)
);
Instead of overwriting the whole method you could do this as well:
public function numbers($options = array()) {
$numbers = parent::numbers($options);
/* see explanation below */
return $numbers;
}
Explanation: Use DOM or regex to find, modify and replace the <li class="active"><a></a></li> active <li> element with your modification. This might be the better way because if the core behavior changes you just need to adept your replacement logic instead of having to figure out what has changed in the code and update your method. This bootstrap paginator helper does it this way.

Custom Submit button

How can I create submit button, and define custom title on it, together with custom class style?
You could use either submit() or button() methods of the Form helper instead of the end() method. For example:
echo $this->Form->submit(
'Send',
array('class' => 'custom-class', 'title' => 'Custom Title')
);
Don't forget to close the form. You can do it by calling the end() method without any arguments.
echo $this->Form->end();
Also remember, you can always do it old school
I prefer to use $this->Form->end( ); without arguments and build my own submit buttons and markup. It's easy
<div class="buttons clearfix">
<button type="submit" class="positive">
<span class="icon-wrapper"><img src="path/to/tickmark.png" alt="" title="" /></span>
Save Item
</button>
</div>
I would also tell you to experiment with the $this->Form->input('Model.field', 'options' => array( array('type' => 'button'))); - particularly the before, between, after, and class options. You can use the helper to create <input type="button" /> elements with a good amount of flexibility.
you can create costum submit by this code
echo $this->Form->submit(
'Submit',
array('div' => false,'class' => 'urclass', 'title' => 'Title')
);
This is enough:
echo $this->Form->submit("Custom message");
Also as #Mike suggest close the form with
echo $this->Form->end();
Or you can combine both with:
echo $this->Form->end("Custom Message");
I created a custom button using an image in my under app/webroot/img that uses inline style for specifying size and changing the position to center
$options=array('type'=>'Make secure payment', 'type'=>'image', 'style'=>'width:200px; height:80px; display:block; margin-left:auto; margin-right:auto;');
echo $this->Form->submit('/img/axiaepaysecurebuttongray_med.png', $options);
echo $this->Form->end();
For CakePHP 2.x, you can use
$options = array(
'label' => 'Update',
'div' => array(
'class' => 'glass-pill',
)
);
echo $this->Form->end($options);

Resources