I’ve been working on this for two solid days now and I’m not making any progress. I’m using this carousel (bootstrap) slightly modified:
My repeater field is named “carousel” and the sub fields for the slides are:
-
- slider_image
- slide_headline
- sub_headline
- button_text
- button_url
Here is an example of the HTML markup for the carousel I’m suing (notice I added the sub fields in their places in the HTML for reference)
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="cslide" style="background: url(<?php get_sub_field($slider_image); ?>)"></div>
<div class="hero">
<hgroup>
<h1><?php get_sub_field($slide_headline); ?></h1>
<h3><?php get_sub_field($sub_headline); ?></h3>
</hgroup>
<a href="<?php get_sub_field($button_url); ?>"><button class="btn btn-hero btn-lg" role="button"><?php get_sub_field($button_text); ?></button></a>
</div>
</div>
<div class="item slides">
<div class="cslide" style="background: url(<?php get_sub_field($slider_image); ?>)"></div>
<div class="hero">
<hgroup>
<h1><?php get_sub_field($slide_headline); ?></h1>
<h3><?php get_sub_field($sub_headline); ?></h3>
</hgroup>
<a href="<?php get_sub_field($button_url); ?>"><button class="btn btn-hero btn-lg" role="button"><?php get_sub_field($button_text); ?></button></a>
</div>
</div>
<div class="item slides">
<div class="cslide" style="background: url(<?php get_sub_field($slider_image); ?>)"></div>
<div class="hero">
<hgroup>
<h1><?php get_sub_field($slide_headline); ?></h1>
<h3><?php get_sub_field($sub_headline); ?></h3>
</hgroup>
<a href="<?php get_sub_field($button_url); ?>"><button class="btn btn-hero btn-lg" role="button"><?php get_sub_field($button_text); ?></button></a>
</div>
</div>
</div>
</div>
Here is a screenshot of my repeater field settings:
If anyone could help with this I would appreciate it.
hi, i think the main part should look like this
<?php $carousel = get_field('carousel');
if($carousel):
while( have_rows('carousel') ): the_row();
$slider_image = "";
$slide_headline = "";
$sub_headline = "";
$button_url = "";
$button_text = "";
$slider_image = get_sub_field('slider_image');
$slide_headline = get_sub_field('slide_headline');
$sub_headline = get_sub_field('sub_headline');
$button_url = get_sub_field('button_url');
$button_text = get_sub_field('button_text');
?>
<div class="item slides">
<div class="cslide" style="background: url(<?php echo $slider_image; ?>)"></div>
<div class="hero">
<hgroup>
<h1><?php echo $slide_headline; ?></h1>
<h3><?php echo $sub_headline; ?></h3>
</hgroup>
<a href="<?php echo $button_url; ?>"><button class="btn btn-hero btn-lg" role="button"><?php echo $button_text; ?></button></a>
</div>
</div>
<?php endwhile; endif;?>
hope that help.
depends on what is required, and what your image output is, you may need to adjust your code. here a sample how to make a optional field and get image when use array
<php? if($my_teaserimage){
echo '<div class="teaserimage"><img src="'. $my_teaserimage['url'] .'" /></div>';
} ?>
Thanks MediaWerk but my problem is mostly with the code for adding a counter and applying a class of “active” to the first slide and indicator.
<?php
$count = 0;
while( have_rows('carousel') ): the_row();
if ($count == 0) {
echo '<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>';
} else {
echo '<li data-target="#bs-carousel" data-slide-to="'.$count.'"></li>';
}
$count++;
endwihle; ?>
try something like above.
and try to adapt it for slide too. (define counter outside of while, check for first counter add there the active. do else, and increase count before endwhile)
This reply has been marked as private.
I have the images and all text showing up using the repeater sub fields now.
The slider show’s only one slide (the first slide only).
I’m thinking it has something to do with the indicators and the counter for the indicators. I don’t know if I have that part properly formatted.
Here’s the code:
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<ol class="carousel-indicators">
<?php while(the_repeater_field('slideshow_images')): ?>
<?php $i = 0 ?>
<?php
if ($i == 0) {
echo '<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>';
} else {
echo '<li data-target="#bs-carousel" data-slide-to="'.$count.'"></li>';
}
$i++
?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $z = $z + 1; $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
<div class="<?php echo ($z==1) ? 'item slides active ' : ''; ?>item slides">
<div style="background: url(<?php the_sub_field('image'); ?>);max-height:500px;height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat;"></div>
<div class="hero" style="width:96%;">
<hgroup>
<h1><?php the_sub_field('title');?></h1>
<h3><?php the_sub_field('sub_title');?></h3>
</hgroup>
<a href="<?php the_sub_field('image_links_to'); ?>"<button class="btn btn-hero btn-lg" role="button"><?php the_sub_field('links_to_text'); ?></button></a>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<ol class="carousel-indicators">
<?php
$i=0;
while( have_rows('slideshow_images') ): the_row();
if ($i == 0) {
echo '<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>';
} else {
echo '<li data-target="#bs-carousel" data-slide-to="'.$i.'"></li>';
}
$i++;
endwhile; ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$z = 0;
while( have_rows('slideshow_images') ): the_row();
$image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
<div class="item slides <?php if ($z==0) { echo 'active';} ?>">
<div style="background: url(<?php the_sub_field('image'); ?>);max-height:500px;height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat;"></div>
<div class="hero" style="width:96%;">
<hgroup>
<h1><?php the_sub_field('title');?></h1>
<h3><?php the_sub_field('sub_title');?></h3>
</hgroup>
<a href="<?php the_sub_field('image_links_to'); ?>"<button class="btn btn-hero btn-lg" role="button"><?php the_sub_field('links_to_text'); ?></button></a>
</div>
</div>
<?php
$z++;
endwhile; ?>
</div>
</div>
try if this works.
PS: i cant see private post from 28feb, and please edit first post (look that every tag is closed “forum tags”, not inside php code, specially li and ul/ol to get rid of layout-prob inside this thread)
WOW! it works. You did it! Once again thank you Mediawerk. 🙂
PS: I tried editing the original post but the ‘Edit’ option does not show up so I could not fix the formatting. I emailed support asking them about it but did not receive anything back.
