Cakephp Paginator Custom Styling - cakephp

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.

Related

Cakephp 3. Image Radio Buttons

Regarding to Cakephp 3 Form Helper, for Radio Buttons with Images, i got a question need to ask for help.
From the forumn there's a question, but it was 10 years version earlier, which is not suitable for my codes.
originally the Add.ctp for this item is meant for Type=>Select
<?php echo $this->Form->control('product_image_id', array('label'
=> false, 'div' => false,
'class' => 'form-control', 'type' => 'select', 'empty' =>
'Choose Image')); ?>
in the Type select, the name of the images only shows out. not the images.
When i want to put the Form Control into the code for the add.ctp
<?php foreach ($product['product_images'] as $productImg) : ?>
<div class="container parent">
<div class="row">
<div class='col text-center'>
<?php echo $this->Form->control('product_image_id', ['type' =>
'radio', 'escape' =>
false, 'class' => 'form-control', 'id' =>$productImg->id,
'name'=>'imgbackground' ]); ?
>
<label for="<?= $productImg->id ?>">
<?php
echo $this->Html->image($imgPath, ['width' => '100']);
?>
<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>
</label>
</div>
</div>
</div>
<?php endforeach; ?>
Information regarding settings for Form Control for radio buttons is limited....
can anyone help to advise where i went disaligned?
thanks
You basically have two options, that is either manipulate the radio options for FormHelper::control() to include your custom label contents, or to manually create each label and radio button.
For the former you build an options array that holds nested arrays with text and value keys, where text is the label contents, and value the radio button value, eg
[
['text' => '<img src="..."> ...', 'value' => '1'],
['text' => '<img src="..."> ...', 'value' => '2'],
// etc ...
]
A quick and dirty example could look like this (I'm just guessing here that there's something like a path property on your product images, you'll most likely have to adjust this a bit according to your needs to build the proper web path to the image):
echo $this->Form->control('product_image_id', [
'type' => 'radio',
'templates' => [
'radioWrapper' => '{{input}}{{label}}',
'nestingLabel' => '{{hidden}}<label{{attrs}}>{{text}}</label>',
],
'labelOptions' => [
'escape' => false,
],
'options' => collection($product['product_images'])
->map(function ($productImage) {
return [
'text' =>
$this->Html->image($productImage->path, ['width' => '100']) .
'<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>',
'value' => $productImage->id,
];
}),
]);
Note that you need to define custom/modified templates for the label and the wrapper if you actually need the input to be rendered outside of the label. If you don't actually need it to be rendered that way, then you can drop this example's templates option, by default the form helper would render the input inside of the label, eg:
<label><input/>text</label>
See also
Cookbook > Views > Helper > Form > Creating Radio Buttons
Cookbook > Views > Helper > Form > Using Collections to build options

Cakephp span in Html link

I have this code
<li id="Tiempo">
<?= $this->Html->link(__('En Tiempo'), ['action' => 'index', 'Tiempo']) ?><span class="label label-success ml-10"><?php echo $entiempo ?></span>
</li>
But i want the span into a but I don't know how
You have to modify the content/title of the link. As the docs point out, this is the first parameter of HtmlHelper->link(). To add the span inside your a tag you have 2 options.
Add the Span in the Link
You could either modify it directly and set the escape options to false:
<li id="Tiempo">
<?= $this->Html->link('<span class="label label-success ml-10">' . $entiempo . '</span>', ['action' => 'index', 'Tiempo'], ['escape' => false]) ?>
</li>
Modify the template
Or you modify the template HtmlHelper uses.
$this->Html->setTemplates([
'link' => '{{content}}</span>',
]);
and use the link() method like this:
<?= $this->Html->link($entiempo, ['action' => 'index', 'Tiempo']) ?>
See Changing the Tags Output by HtmlHelper

How to add <i> and <span> tag inside a tag in cakephp 3?

My html code is given below:
<a href="/patients/index" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Add Medicines
</span>
</a>
and i want to convert it by using HtmlHelper in cakephp 3.
You want to use the 'escape' => false parameter in the link() method. This stops Cake from escaping the markup:-
<?= $this->Html->link(
'<i class="m-menu__link-bullet m-menu__link-bullet--dot"><span></span></i><span class="m-menu__link-text">' . h('Add Medicines') . '</span>',
'/patients/index',
[
'escape' => false,
'class' => 'm-menu__link'
]
) ?>
It's important to remember to still escape any user generated content using h(). I've shown this in the example above by escaping 'Add Medicines', but if this is hardcoded you wouldn't need to wrap it in the h() method.
The below code for add and tag inside a hyperlink in cakephp 3
<?php echo $this->Html->link(
$this->Html->tag("i", "<span></span>",array("class" => "m-menu__link-bullet m-menu__link-bullet--dot")).$this->Html->tag("span", "Add Medicine",
array("class" => "m-menu__link-text")),
["controller"=>"Medicines", "action"=>"index"],
["class"=>"m-menu__link",
"escape"=>false]
);
?>

CakePHP how to use the PaginatorHelper output follows the effect?

I hope the output effect:
<li class="prev"><i class="icon-previous"></i></li>
The Official Handbook:
You can change the wrapping tag using the tag option:
echo $this->Paginator->prev(__('previous'), array('tag' => 'li'));
Output:
<li class="prev">
<a rel="prev" href="/posts/index/page:1/sort:title/order:desc">
previous
</a>
</li>
I imitate the way it:
<?php
echo $this->Paginator->prev(__('<i class="icon-previous"></i>'), array('tag' => 'li'));
?>
But the output is:
<li class="prev"><i class="icon-previous"></i></li>
What should I do?
try:
echo $this->Paginator->prev(
__('previous'),
array('tag' => 'li', 'class' => 'icon-previous')
);
echo $this->Paginator->prev(__('<i class="icon-previous"></i>'),
array(
'tag' => 'li',
'escape'=>false
));
Also make sure there IS a previous record otherwise the tag is omitted anyway

Outputting multiple elements within <a> using CakePHP HTML Helper

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)
)
);

Resources