Hi all. I have a code which shows a list of terms in a grid format using bootstrap. The counter is currently set to break to the next line after four terms are shown on a line. I would like to take this same list of terms and implement it into a Bootstrap carousel like this: [[LINK href="http://bootsnipp.com/snippets/featured/simple-carousel"]]http://bootsnipp.com/snippets/featured/simple-carousel[[/LINK]]
I have the CSS styles and base carousel working, but I'm having trouble merging my term display with the carousel. I would like to keep all styling on my terms, but just want them to slide across the screen line the carousel does.
This is the code calling my terms. You can see the carousel code at the link above.
<![CDATA[
<div class="container">
<div class="row">
<?php
$libargs = array(
'orderby' => 'name',
'order' => 'ASC',
'include' => array(16, 20, 22,25, 27, 28, 30, 4, 33,), //* Enter ID's of parent categories to exclude from list
'hide_empty' => false,
);
$_libargs = wp_parse_args($term_args, $libargs);
$libcats = get_terms( '100list', $_libargs);
#fix
$i = 0;
foreach($libcats as $lc){
if( $i % 4 == 0 ) { ?>
<div class="clearfix"></div>
<?php }
$i++; ?>
<div class="col-lg-3">
<?php $termlink = get_term_link( $lc->slug, '100list' ); ?>
<div class="panel panel-default">
<div class="panel-image">
<div class="thumbnail">
<div class="caption">
<br/><br/>
<h1><span class="label label-info"><?php echo $lc->count ?></span></h1>
<p> Symbols </p>
<h4> <a class="label label-default" href="<?php echo $termlink; ?>"> View Group</a> </h4>
</div>
<!-- Get Image by Attachment ID Start-->
<?php
$attachment_id = get_field('taximage', '100list_'.$lc->term_id);
if ($attachment_id) {
$image = wp_get_attachment_image_src($attachment_id, 'industrygroup-img');
if ($image) {
?>
<img class="img-responsive" src="<?php echo $image[0]; ?>" />
<?php
}
}
else { ?>
<img class="img-responsive" src="http://www.MYSITE.com/wp-content/uploads/2014/08/RA-logo-300px-groups.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
</div>
<!-- Get Image by Attachment ID End-->
</div>
<div class="panel-footer text-center"><a href="<?php echo $termlink; ?>"><?php echo $lc->name; ?></a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
]]>
Solution - 1
I've left out the surrounding parts of the carousel (I'm sure you can handle those), but is what you mean?
<![CDATA[
<div class="container">
<div class="row">
<?php
$libargs = array(
'orderby' => 'name',
'order' => 'ASC',
'include' => array(16, 20, 22,25, 27, 28, 30, 4, 33,), //* Enter ID's of parent categories to exclude from list
'hide_empty' => false,
);
$_libargs = wp_parse_args($term_args, $libargs);
$libcats = get_terms( '100list', $_libargs);
$cats = array();
foreach( $libcats as $lc ) {
$termlink = get_term_link( $lc->slug, '100list' );
$count = $lc->count;
$name = $lc->name;
if ( $attachment_id = get_field('taximage', '100list_'.$lc->term_id) ) {
if ( $image = wp_get_attachment_image_src($attachment_id, 'industrygroup-img') ) {
$img = sprintf( '<img class="img-responsive" src="%s" />', $image[0] );
} else {
$img = sprintf( '<img class="img-responsive" src="http://www.MYSITE.com/wp-content/uploads/2014/08/RA-logo-300px-groups.jpg" alt="%s" />', get_the_title() );
}
}
$html = <<< EOT
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-image">
<div class="thumbnail">
<div class="caption">
<br/><br/>
<h1><span class="label label-info">$count</span></h1>
<p> Symbols </p>
<h4><a class="label label-default" href="$termlink"> View Group</a> </h4>
</div>
$img
</div>
</div>
<div class="panel-footer text-center"><a href="$termlink">$name</a></div>
</div>
</div>
EOT;
$cats[] = $html;
}
// Split to chunks of 4
$cats = array_chunk( $cats, 4 );
?>
<div class="carousel-inner">
<?php
foreach( $cats as $cat ) {
echo '<div class="item"><div class="row">'. implode( '', $cat ).'</div></div>';
}
?>
</div>
</div>
</div>
]]>
Solution - 2
Just change this (From Jhon code)
<![CDATA[
<div class="carousel-inner">
<?php
foreach( $cats as $cat ) {
echo '<div class="item"><div class="row">'. implode( '', $cat ).'</div></div>';
}
?>
</div>
]]>
into this
<![CDATA[
<div id="carousel-terms" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
foreach( $cats as $cat ) {
echo '<div class="item"><div class="row">'. implode( '', $cat ).'</div></div>';
}
?>
</div>
</div>
]]>
Dont forget to call the javascript on the footer
<![CDATA[
<script language="javascript">
$('.carousel').carousel()
</script>
]]>
|
