Merging Terms with Bootstrap Carousel WordPress
- SOLVED
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.
<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>
Answers (2)
John Cotton answers:
I've left out the surrounding parts of the carousel (I'm sure you can handle those), but is what you mean?
<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>
streetfire comments:
Wellll I should be able to figure out where the rest of the carousel pieces go, but I can't seem to get it working. I put the carousel surroundings outside the PHP code and also inside just around the carousel-inner, but neither work right. Hmmmm
streetfire comments:
Based on Luis suggestion, I have switched out the carousel code but nothing displays on my page. I can see the divs for the carousel in the code, but no terms.
John Cotton comments:
Can you give us a link to your page - it will help show what's wrong fairly quickly.
John Cotton comments:
I've put all the carousel code in for your.
Providing your header/footer links to the correct js/css this should work:
<?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 );
$final_html = '';
foreach( $cats as $cat ) {
$final_html .= '<div class="item"><div class="row">'. implode( '', $cat ).'</div></div>';
}
?>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<?php echo $final_html; ?>
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
$('#Carousel').carousel({
interval: 5000
});
});
</script>
</div>
streetfire comments:
Sure John, It looks like it's working, but not displaying? Here is a link: http://www.runningalpha.com/
I have placed the code directly under the slideshow and above the plan tables.
John Cotton comments:
Assuming you've updated to my second set of code, modify the last few lines of the PHP to this:
// Split to chunks of 4
$cats = array_chunk( $cats, 4 );
$final_html = '';
$active = ' active';
foreach( $cats as $cat ) {
$final_html .= sprintf( '<div class="item%s"><div class="row">%s</div></div>', $active, implode( '', $cat ) );
$active = '';
}
There was no active item.
streetfire comments:
Ok, that helped! It's working, BUT it's not displaying the term image properly. When I assign a term an image via custom field, it is using the same image for all terms. Also it's not showing the default image I have set to show in case one is not added.
Something amiss in this section I believe?
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.runningalpha.com/wp-content/uploads/2014/08/RA-logo-300px-groups.jpg" alt="%s" />', get_the_title() );
}
}
John Cotton comments:
Change that code to
$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() );
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] );
}
}
streetfire comments:
Aha! Most excellent sir :) This appears to be working great. Thank you for helping me.
John Cotton comments:
No problem.
You might want to change the split to 3 so that you don't end up with that spare term on it's own.
$cats = array_chunk( $cats, 3 );
streetfire comments:
Yes, good point. I think I'm going to put them in a smaller area now that it's working and change the # displaying. :)
Luis Abarca answers:
Just change this (From Jhon code)
<div class="carousel-inner">
<?php
foreach( $cats as $cat ) {
echo '<div class="item"><div class="row">'. implode( '', $cat ).'</div></div>';
}
?>
</div>
into this
<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
<script language="javascript">
$('.carousel').carousel()
</script>
streetfire comments:
Thank You. I have switched that out but nothing displays on my page. I can see the divs for the carousel in the code, but no terms.