In CakePHP 2.x, I can use the below code to output pagination in Bootstrap 3 perfectly:
<ul class="pagination">
<?php
echo $this->Paginator->prev(__('Previous'), array('tag' => 'li'), null, array('tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));
echo $this->Paginator->numbers(array('separator' => '', 'currentTag' => 'a', 'currentClass' => 'active', 'tag' => 'li', 'first' => 1, 'last' => 5, 'ellipsis' => '<li class="disabled"><a>...</a></li>'));
echo $this->Paginator->next(__('Next'), array('tag' => 'li'), null, array('tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));
?>
</ul>
The output is:
<ul class="pagination">
<li class="prev">
Previous
</li>
<li>
1
</li>
<li class="active">
<a>2</a>
</li>
<li>
3
</li>
<li class="next">
Next
</li>
</ul>
But now the Bootstrap 4 Beta is changed the structure with class inside each element like this:
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Please help to set options of Paginator in CakePHP 2.x for the above output.
You can do it using the following code
<ul class="pagination">
<?php
echo $this->Paginator->prev('< ' . __('Previous'), array('tag' => 'li', 'class'=>'page-item', ' class'=>'page-link'), null, array('class' => 'disabled page-item', 'tag' => 'li', 'disabledTag' => 'a', ' class' =>'page-link'));
echo $this->Paginator->numbers(array('separator' => '', 'currentTag' => 'a', 'tag' => 'li', 'class'=>'page-item', 'currentClass' => 'disabled page-link', ' class'=>'page-link'));
echo $this->Paginator->next(__('Next') . ' >', array('tag' => 'li', 'class'=>'page-item', ' class'=>'page-link'), null, array('class' => 'disabled page-item', 'tag' => 'li', 'disabledTag' => 'a', 'currentClass'=>'page-link', ' class' =>'page-link'));
?> </ul>
The key is to use an element of the array called ' class', and put the bootstrap classes there
Related
I have developed a custom taxonomy post type. I have displayed categories & inside categories posts (products).
I am getting the Post title & Image as they should be (which I add), but the descriptions of all the posts are same.
I have no idea why same desc keeps displaying, even though everything else is dynamic.
Here is the code I am using:
$taxID = get_queried_object()->term_id;
$args = array(
'post_type' => 'industrial_product',
'fields' => 'ids',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'industrial_product_cat',
'terms' => $taxID,
'field' => 'term_id',
'operator' => 'IN'
)
),
);
$query = new WP_Query($args);
if ($query->have_posts()):
$i=1;
foreach( $query->posts as $id ):?>
<div class="row mb-4">
<div class="col-md-4 col-12">
<?php
$image_palette = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'single-post-thumbnail' );
?>
<img src="<?php echo $image_palette[0]; ?>" alt="" class="img-fluid" style="max-width:100%;">
</div>
<div class="col-md-8 col-12">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item m-0" role="presentation">
<a class="nav-link active c-2" id="productInfo<?php echo $i;?>-tab" data-toggle="tab" href="#productInfo<?php echo $i;?>" role="tab" aria-controls="productInfo<?php echo $i;?>" aria-selected="true">Product Information</a>
</li>
<li class="nav-item m-0" role="presentation">
<a class="nav-link c-2" id="std_tds<?php echo $i;?>-tab" data-toggle="tab" href="#std_tds<?php echo $i;?>" role="tab" aria-controls="std_tds<?php echo $i;?>" aria-selected="false">STD / TDS</a>
</li>
</ul>
<div class="tab-content p-3" id="myTabContent<?php echo $i;?>">
<div class="tab-pane fade show active" id="productInfo<?php echo $i;?>" role="tabpanel" aria-labelledby="productInfo<?php echo $i;?>-tab">
<h5><?php echo get_the_title($id); ?></h5>
<p><?php echo get_the_content($id); ?></p>
</div>
<div class="tab-pane fade" id="std_tds<?php echo $i;?>" role="tabpanel" aria-labelledby="std_tds<?php echo $i;?>-tab">
<?php
if(get_field('std_tds_description', $id)){
the_field('std_tds_description', $id);
}
else{
echo "No, Content.";
}
?>
</div>
</div>
</div>
</div>
<?php
$i++;
endforeach;
endif;
//
}
?>
Here is a screenshot of the result:
Can somebody point out what is the problem here. I've tried all sort of stuff but It still shows same desc.
Thanks & Sorry If I'm doing something stupid, still learning!
I just changed the call
Old: <?php echo get_the_content( $id ); ?>
New: echo get_post_field('post_content', $id);
Don't know what was wrong but, It worked.
Recentrly we developred a custom theme for our Wordpress website,
and I've used native comment Wordpress system that the code is something like below.
the question is how could we protect comment form from xss attack? it seems that scripts like <script>alert('hi');</script> runs simply on comments form.
any idea?
thank you.
<section>
<main>
<div class="comment-area">
<h2 class="comment-title -pb-20">
number of comments: <span><?php echo get_comments_number(); ?></span>
</h2>
<div class="comment-form">
<h3>Insert you comment here please.</h3>
<?php
$arg = array(
'title_reply' => '',
'comment_notes_before' => '',
'label_submit' => 'submmit',
);
comment_form($arg);
?>
</div>
<?php if (have_comments()) : ?>
<div class="comment-list">
<h1>all comments</h1>
<ul>
<?php
$args = array(
'style' => 'ul',
'callback' => null,
'end-callback' => null,
'type' => 'comment',
'reply_text' => 'reply',
'page' => '',
'per_page' => '',
'avatar_size' => 32,
'reverse_top_level' => true,
'reverse_children' => '',
'format' => 'html5',
'echo' => true,
);
wp_list_comments($args);
?>
</ul>
</div>
<div class="comments-pagination">
<?php if(get_comment_pages_count() > 1 && get_option('page_comments')) : ?>
<div>
<?php previous_comments_link('prev'); ?>
</div>
<div>
<?php next_comments_link('next'); ?>
</div>
<?php endif; ?>
</div><!-- .comments-pagination -->
<?php endif; ?>
</div>
</main>
</section>
add_filter( 'comment_text', 'sanitize_comment' );
function sanitize_comment( $comment_text ) {
$comment_text = sanitize_text_field($comment_text);
return $comment_text;
}
How do I validate inside of a loop with v-show empty items with vuejs2. I was trying the following but without any results
<div v-for="user in $store.state.users.data">
<ul>
<li v-show="user.mobil !== null || user.mobil !== ''" >
<a v-bind:href="'tel://' + user.mobil"> <i class="fa fa-mobile-phone"></i> <span>{{ user.mobil }} </span></a>
</li>
</ul>
</div>
Compare like v-show="user.mobil":
new Vue({
el: '#app',
data: {
users: [{
mobil: '123',
name: 'Foo'
},
{
mobil: '',
name: 'Bar'
},
{
mobil: null,
name: 'Baz'
},
]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="user in users">
<ul>
<li v-show="user.mobil">
{{user.name}}
</li>
</ul>
</div>
</div>
How do you check for an empty string in JavaScript?
I am trying to work with nav section and newly discovering it
now i want to generate an menu like following :
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>about us</li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Products 1</li>
<li>Products 2</li>
<li>Products 3</li>
</ul>
</li>
<li>Product Support</li>
<li>Contact</li>
</ul>
</div>
With the code :
<?php echo $nav_arr = fuel_nav(array('depth'=>4
,'render_type' => 'basic'
, 'group_id' => 1
,'container_tag_attrs' => array('style' => '')
,'container_tag_class' => 'nav navbar-nav menuright'
,'order' => 'precedence'
,'subcontainer_tag_class'=>array('dropdown-menu', 'styles' => array(0 => array(1 => 'dropdown')))
)); ?>
but cant getting the way to do the changes specially in this section
<li class="dropdown">
Products <span class="caret"></span>
the out put i am getting as follow :
<div id="navbar" class="navbar-collapse collapse">
<ul style="" class="nav navbar-nav menuright">
<li class="first">Home</li>
<li>about us</li>
<li class="active"><a href="http://localhost/site/product" product-1>Product</a>
<ul style="" class="dropdown-menu">
<li class="first active">Product 1</li>
<li class="last">product-2</li>
</ul>
</li>
<li>Product Support</li>
<li class="last">Contact</li>
</ul>
</div>
can one please help me out ????please view the source code of those list
You can use array as render_type to manually generate desired tag.
Here is a example code:
<div class="collapse navbar-collapse">
<?php
$nav = fuel_nav(array('render_type' => 'array' ));
?>
<ul class="nav navbar-nav">
<?php foreach($nav as $uri=>$item):
$classes='';
$dropdown='';
if($item['nav_key'] == $page_code) $classes .=' active';
if(!empty($item['children'])) {
$classes .=' dropdown';
$dropdown ='class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"';
}
?>
<li class="<?=$classes?>">
<a href="<?=BASE_URL?><?=$item['location']?>" <?=$dropdown?> ><?=$item['label']?></a>
<?php if(!empty($item['children'])):?>
<ul class="dropdown-menu">
<?php foreach($item['children'] as $suburl=>$sub_item): ?>
<li>
<a href="<?=BASE_URL?><?=$sub_item['location']?>">
<?=$sub_item['label']?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
Does anyone know of a prettier way to output a class name to a list element (in this case) using EJS?
<% var active = "active"; %>
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="<% if(req.path == '/user') { %><%= active %><% } %>">Users</li>
<li class="<% if(req.path == '/about') { %><%= active %><% } %>">About</li>
<li class="<% if(req.path == '/contact') { %><%= active %><% } %>">Contact</li>
</ul>
<h3 class="text-muted">Sails Tutorial App</h3>
</div></li>
You can do it like this :)
<li class="<%= (req.path == '/user') ? 'active' : '' %>">Users</li>
It's a little bit prettier I guess...