Can someone explain me how to add an incrementing to class?
I would like to have:
div class="slide1"
div class="slide2"
div class="slide3"
...
Here's the code:
<?php if( have_rows('repeater_field_name') ): ?>
<ul class="slides">
<?php while( have_rows('afbeeldingen') ): the_row();
// vars
$image = get_sub_field('afbeelding');
?>
<li class="slide<?php echo $i; ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
Use the increment operator...
<?php $i = 0; /* define $i ... */ while( have_rows('afbeeldingen') ): the_row();
// vars
$image = get_sub_field('afbeelding');
?>
<li class="slide<?php echo $++i; // increment it! ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
</li>
<?php endwhile; ?>
You are not incrementing your counter.
<?php if( have_rows('repeater_field_name') ): ?>
<ul class="slides">
<?php while( have_rows('afbeeldingen') ): the_row();
// vars
$image = get_sub_field('afbeelding');
?>
<li class="slide<?php echo $i++; ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
You need to define $i outside the while loop, something like $i = 0;. Then inside the loop increment $i after each loop iteration with something like $i++.
Related
I am trying to output all client logos, but limit each section <section> to 16 logos. At the moment, the HTML outputted isn't correct but for the life of me I cannot figure our where my code is wrong.
Any help would be greatly appreciated:
<?php $logototal = count( get_sub_field('bp_client_logos') ); //Get a total count of the logos ?>
<?php
$count = "0";
if( have_rows('bp_client_logos') ) :
$i = 1;
while ( have_rows('bp_client_logos') ) : the_row(); ?>
<?php
$clientindex = $i;
if( $clientindex == "1" || ($clientindex-1) %16 == "0" ) :
?>
<div class="section general-section section-<?php echo $title; ?> section-count-<?php echo $count; ?>" data-anchor="section-<?php echo $count; ?>" style="<?php echo $bg_background; ?>">
<div class="row small-up-4 medium-up-8 large-up-8 align-middle">
<?php endif; ?>
<div class="column client-logo-grid">
<?php
$image = get_sub_field('bp_client_logo');
// Vars
$url = $image['url'];
$thistitle = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
$size = 'ClientLogo' ;
$thumb = $image['sizes'][ $size ];
?>
<?php if ( get_sub_field('bp_client_link') ) : ?>
<a target="_blank" href="<?php the_sub_field('bp_client_link'); ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
</a>
<?php else: ?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
<?php endif; ?>
</div><!-- .column -->
<?php if( ($clientindex) %16 == "0") : $count = $count+1; ?>
<?php if($logototal > ($count*16)) : ?>
<div class="show-for-medium more-down-icon">
<span class="more-text">More</span> <span class="more-arrow"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/arrow-down.png" alt="arrow-down-icon" /></span>
</div>
<?php endif; ?>
</div><!-- .row -->
</div><!-- .section -->
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
<?php endif; ?>
I have some code here that outputs the following:
Essentially I want to use same page anchor tags so a user can click on the small logo and be taken to the larger logo and info.
As it's a Wordpress site, I have used the ACF repeater field to achieve this. This repeater field enables the user in the back end to add more clients, for each client they can add an image a company name and the paragraph text.
Then I have just repeated the repeater field above and shown only the images but made them much smaller.
As you will see in the code below, I have assigned around each smaller photo and then this: <a name="anchor1"></a> just above every larger photo..
But I need a way of the numbers counting up so when they come out they aren't all anchor1 they become anchor2, anchor3 and so on.
Any ideas?
<div class="container client-page-logos-small" >
<div class="row">
<h3>Click company to see more</h3>
<?php if( have_rows('client_page_logos', 123456) ): ?>
<ul class="client-page-logos-small">
<?php while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
?>
<a href="#anchor1">
<li class="client-page-logos-small">
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
</li>
</a>
<?php endwhile; ?>
</ul>
<div style="clear: both;"></div>
<?php endif; ?>
<hr>
</div>
</div>
<div class="container client-page-logos" >
<div class="row">
<?php if( have_rows('client_page_logos', 123456) ): ?>
<ul class="client-page-logos">
<?php while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
$name = get_sub_field('client_name');
$text = get_sub_field('client_text');
?>
<li class="client-page-logos">
<a name="anchor1"></a>
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
<h3><?php echo $name; ?></h3>
<p><?php echo $text; ?></p>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
</div>
You need to add counter like below:-
<?php
$i = 1;
while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
?>
<a href="#anchor<?php echo $i;?>">
<li class="client-page-logos-small">
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
</li>
</a>
<?php $i++;endwhile; ?>
And
<?php
$j = 1;
while( have_rows('client_page_logos', 123456) ): the_row();
// vars
$logo = get_sub_field('client_page_logo');
$name = get_sub_field('client_name');
$text = get_sub_field('client_text');
?>
<li class="client-page-logos">
<a name="anchor<?php echo $j;?>"></a>
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
<h3><?php echo $name; ?></h3>
<p><?php echo $text; ?></p>
</li>
<?php $j++ ;endwhile; ?>
I am struggling to retrieve the intro image of articles, within a custom module that echoes article titles with the selected tags.
But it seems as if $item->images doesn't recall the image info. My code is the following:
Can anyone help me?
<?php
defined('_JEXEC') or die;
$images = json_decode($item->images);
?>
<?php JLoader::register('TagsHelperRoute', JPATH_BASE . '/components/com_tags/helpers/route.php'); ?>
<div class="tagsselected<?php echo $moduleclass_sfx; ?>">
<?php if ($list) : ?>
<ul>
<?php foreach ($list as $i => $item) : ?>
<li>
<?php $item->route = new JHelperRoute; ?>
<a href="<?php echo JRoute::_(TagsHelperRoute::getItemRoute($item->content_item_id, $item->core_alias, $item->core_catid, $item->core_language, $item->type_alias, $item->router)); ?>">
<?php if (!empty($item->core_title)) :
echo htmlspecialchars($item->core_title);
endif; ?>
</a>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php else : ?>
<span><?php echo JText::_('MOD_TAGS_SIMILAR_NO_MATCHING_TAGS'); ?></span>
<?php endif; ?>
</div>
Try to get Article images in for loop
<?php foreach ($list as $i => $item) :
// images for each article
$images = json_decode($item->images); ?>
<li>
// your code/ other stuff
// display image
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
</li>
<?php endforeach; ?>
<li class="tag_title_custom">
<?php $item->route = new JHelperRoute; ?>
<a href="<?php echo JRoute::_(TagsHelperRoute::getItemRoute($item->content_item_id, $item->core_alias, $item->core_catid, $item->core_language, $item->type_alias, $item->router)); ?>">
<?php if (!empty($item->core_title)) :
echo htmlspecialchars($item->core_title);
endif; ?>
<?php $images = json_decode($item->core_images);?>
<img src="<?php echo htmlspecialchars($images->image_intro);?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>">
</a>
</li>
I am trying to build a Flexible Content which contains 4 possible Layouts (a description, a hero image, a gallery 1col and a gallery 2col). So far I can get the Description and Hero Image subfields to display just fine but the Gallery subfield wont show up on the page. Don't know what I'm doing wrong. Here's the code:
<?php
while(the_flexible_field("flexible_content")): ?>
<?php if(get_row_layout() == "description"): // layout: Description ?>
<div class="proy-desc">
<h2><?php the_sub_field("text"); ?></h2>
</div>
<?php elseif(get_row_layout() == "hero_image"): // layout: Hero Image ?>
<div class="proy-img">
<?php
$image = get_sub_field('image');
elseif( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php ?>
</div>
<?php elseif(get_row_layout() == "gallery_50p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_50p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php ?>
</div>
<?php endif; ?>
<?php elseif(get_row_layout() == "gallery_100p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_100p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php ?>
</div>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
You did not close your if statement. See below:
<?php elseif(get_row_layout() == "gallery_50p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_50p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php ?>
</div>
<?php endif; ?>
Change your section to this:
<?php elseif(get_row_layout() == "gallery_50p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_50p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
Your endif; was in the wrong spot. Everything else looks right, so give this a try.
Trying get an increasing number for each image which has to start at 0, its currently outputting from 1 and I don't know why!
Any help is appreciated, thanks in advance!
<div id="carousel">
<ul class="thumbs">
<?php $counts = 0 ; ?>
<?php foreach( $images as $image ): $counts++; ?>
<li>
<a data-slide-index="<?php echo $counts ;?>" href="">
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
You increment $counts before you use it. You start it at 0 but as soon as you start the foreach and run $counts++; it becomes 1.
Move $counts++; to the end of the foreach loop.
<?php $counts = 0 ; ?>
<?php foreach( $images as $image ) : ?>
<li>
<a data-slide-index="<?php echo $counts; ?>" href="">
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
</li>
<?php $counts++; ?>
<?php endforeach; ?>
foreach( $images as $image ): $counts++;
Is run on the first iteration. Thus
$counts = 0;
foreach( $images as $image ): $counts++;
$counts == 1 // true on first iteteration
You can either do
$counts = -1 // Code smell!
Or
<?php
$counts = 0 ;
foreach( $images as $i => $image )?>
<li>
<a data-slide-index="<?php echo $i ?>" href="#">
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</li>
<?php endforeach; ?>
because you are increamenting $counts before echo
so just do this :
<?php $counts = -1 ; ?>
or this:
foreach( $images as $image )
{
echo '<li>
<a data-slide-index="' . $counts . '" href="">
<img src="' . $image['sizes']['thumbnail'] . '" alt="' . $image['alt'] . '" /></a>
</li>';
$counts++;
}
Instead of
<?php foreach( $images as $image ): $counts++; ?>
do
<?php $counts++; endforeach; ?>
to increment after the text is printed.
Write your code like this :
<div id="carousel">
<ul class="thumbs">
<?php $counts = 0 ; ?>
<?php foreach( $images as $image ) { ?>
<li>
<a data-slide-index="<?php echo $counts ;?>" href="">
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</li>
<?php $counts++; } ?>
</ul>
</div>
<?php endif; ?>
Try This Code
<div id="carousel">
<ul class="thumbs">
<?php $counts = 0 ; ?>
<?php foreach( $images as $image ): $counts++; ?>
<li>
<a data-slide-index="<?php if($counts == 1){echo '0';}else {echo $counts
;} ?>" href="">
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>