I am trying to apply a unique identifier to each item in my loop. below is the sample from my loop and I am using it to show the fancybox lightbox.
<?php function my_feed() {
$feed = fetch_feed( 'http://somewhere.com/feed' );
if ( ! is_wp_error( $feed) ):
// Get a maximum of 5 items
$maxitems = $feed->get_item_quantity( 5 );
$items = $feed->get_items( 0, $maxitems );
foreach ( $items as $item ):
?>
<div id="listing" class="twelve columns">
<div class="four columns">
<img src="#" height="200" width="200" /> <br/>
</div>
<div class="eight columns border">
<!-- need this to be #more-info1. #more-info2, and so on -->
<?php echo $item->get_title(); ?>
<span class="rss-date"><?php echo $item->get_date( 'F j, Y' ); ?></span>
</div>
</div>
<!-- this will coincide with the anchor so the id should be more-info1, more-info2, and so on -->
<div id="more-info" style="display:none;width:auto;">
<h3><?php echo $item->get_title(); ?></h3>
<p>
<?php echo $item->get_date( 'F j, Y' ); ?>
</p>
<p>
<?php echo $item->get_description(); ?>
<?php echo '<a href="'. $item->get_permalink().'>Link Here</a>'; ?>
</p>
</div>
<?php
endforeach;
else: // Returned WP_Error, unable to fetch the feed. ?>
<p>There was an error</p>
<?php endif; ?>
<?php
} ?>
So when I am looking to have a unique number after "#more-info" the href in the anchor tag like "#more-info1" and "#more-info2" and so on for the anchor tag. Then it will have a matching div with an id of "more-info1" and "more-info2" and so on. I know that it should run something like $myvariable++ but honestly I cant get it to work and have no idea on what to do.
Thanks for your help
Try this:
$i = 1;
foreach ( $items as $item ):
?>
<a href="#more-info<?php echo $i++; ?>" class="fancybox">
<?php
endforeach;
Related
I'm using Bootstrap, I have a list of posts and I want to wrap every 2 posts on a row. Each post is wrapped on a <div col>. You can see live here.
I tried with this but it wrap the row each one post:
<?php
$num = 0;
// Check if there are any posts to display
if ( have_posts() ) : ?>
<?php
// The Loop
while ( have_posts() ) : the_post();
if($num%2) {
echo "<div class='row' style='margin-bottom: 2.3em;''>";
}
?>
<div class="col-xs-12 col-sm-6 col-md-6">
<h2 class="category-encabezado">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace a <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<small>Hace
<?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ''; ?>
</small>
<div class="entry">
<p>
<?php the_excerpt(); ?>
</p>
<?php
$my_shortcode = get_field('audio-field');
echo do_shortcode( $my_shortcode );
?>
</div>
</div>
<?php
if($num %2) {
echo '</div>';
}
$num++
?>
<?php endwhile; // End Loop
?>
</div>
<?php
You have to put div.row Out of the Loop while
I have the following loop:
<?php
while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="card">
<div class="card__content">
<h3 class="title"><?php echo mb_strimwidth(get_the_title(), 0, 50, '...');?></h3>
<p><?php echo wp_trim_words( get_the_content(), 30, '...' ); ?></p>
</div>
</div>
</a>
<?php endwhile;
?>
And it's rendered markup looks like this:
<div class="card ">
<a href="#">
<div class="card__content ">
<h3 class="title">title</h3>
<p>content</p>
</div>
</a>
</div>
Why is this happening? What I'm expecting is a single anchor that wraps .card
When you wrap div structure in tag then its added multiple blank tags because this is not the block tag, if you want to achieve like this then you need to with jQuery wrap().
Here i add updated code of your, will you please try this.
<?php
$i = 1;
while ( have_posts() ) : the_post(); ?>
<div class="card" id="linkBox_<?php echo $i; ?>">
<div class="card__content">
<h3 class="title"><?php echo mb_strimwidth(get_the_title(), 0, 50, '...');?></h3>
<p><?php echo wp_trim_words( get_the_content(), 30, '...' ); ?></p>
</div>
</div>
<?php
$tc1 = '#linkBox_' . $i;
?>
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
t_ID = '<?php echo $tc1 ?>';
$(t_ID).wrap( '<a class="whole_box_link" href="<?php echo the_permalink(); ?>"></a>' );
});</script>
<?php $i++;
endwhile;
?>
You can use this code for removing blank p tag CODE:
$pattern = "/<p[^>]*><\\/p[^>]*>/";
preg_replace($pattern,'',get_the_content());
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; ?>
Tried several approaches but none of them work and can´t figure out what else to do. As part of a team page I have a repeater field with 4 subfields —image, title(caption),link(to trigger modal) and details(modal text content)— where some should open a modal with extra info when clicked. The modal works fine but when I try to insert a counter in the code to open the corresponding subfield for each team member, it stops working and nothing opens.
Here´s the bit of code. Any help is much appreciated.
<div class="team-block w4 clear" >
<?php
if( have_rows('team_member') ):
$counter = 1;
?>
<ul>
<?php
while( have_rows('team_member') ): the_row();
// vars
$image = get_sub_field('team_member_image');
$title = get_sub_field('team_member_title');
$link = get_sub_field('link_to_details');
$details = get_sub_field('team_member_details');
?>
<li class="team-member-box">
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img class="team-member-image" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<?php
echo $title;
if( $link ):
?>
</a>
<?php
endif;
if( $link ):
?>
<div class="remodal team-member-details" data-remodal-id="modal<?php echo $counter;?>">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p><?php echo $details; ?></p>
</div>
<?php endif; ?>
</li>
<?php
$counter++;
endwhile;
?>
</ul>
<?php endif; ?>
</div>
Check this out:
Modal №1
Modal №2
Modal №3
<div class="remodal team-member-details" data-remodal-id="modal1">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p>yeah</p>
</div>
<div class="remodal team-member-details" data-remodal-id="modal2">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p>yeah 2</p>
</div>
<div class="remodal team-member-details" data-remodal-id="modal3">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p>yeah 3</p>
</div>
This works as expected. When I look at your code, I assume that the click on the image shoukd trigger the modal, right? I so, try this:
<div class="team-block w4 clear" >
<?php if( have_rows('team_member') ): ?>
<?php $counter = 1; ?>
<ul>
<?php while( have_rows('team_member') ): the_row();
// vars
$image = get_sub_field('team_member_image');
$title = get_sub_field('team_member_title');
$link = get_sub_field('link_to_details');
$details = get_sub_field('team_member_details');
?>
<li class="team-member-box">
<a href="modal<?php echo $counter;?>">
<img class="team-member-image" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<?php echo $title; ?>
</a>
<?php if( $link ): ?>
<div class="remodal team-member-details" data-remodal-id="modal<?php echo $counter;?>">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p><?php echo $details; ?></p>
</div>
<?php endif; ?>
</li>
<?php $counter++; ?>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
I am not sure if this is right (dunno what to do with the $link var) but this should work.
I need to echo a unique id for every product box on the page as they have a modal window for each.
I know how to echo a unique id for each repeater field in a loop.
BUT.. I have a repeater within a repeater. So its just restarting the loop for each repeater field and i'm just getting the same numbers.
See the below image. (it should be going to 8) but its starting the loop again and so only reaching 4.
Here is my code:
<div class="container">
<?php while( have_rows('product_sections') ): the_row();
$intro = get_sub_field('section_intro');
$logo = get_sub_field('section_logo');
?>
<div class="sector-heading">
<img src="<?php echo $logo; ?>">
<div><?php echo $intro; ?></div>
</div>
<?php if( have_rows('products') ): ?>
<?php $counter = 1; //this sets up the counter starting at 0 ?>
<div class="grid-wrapper">
<?php while( have_rows('products') ): the_row();
$id = get_sub_field('id');
$name = get_sub_field('product_name');
$thumbnail = get_sub_field('thumbnail');
$size = get_sub_field('product_size');
$description = get_sub_field('product_description');
$stockist = get_sub_field('stockist_link');
$literature = get_sub_field('literature_link');
?>
<!--Start Single Product-->
<div class="grid-item">
<div class="image-hovers">
<img src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt'] ?>" title="<?php echo $thumbnail['title'] ?>"/>
<a class="js-open-modal" href="#" data-modal-id="<?php echo $id; ?>"><div class="product-hover"></div></a>
</div>
<div class="grid-title">
<h2><?php echo $counter; // Prints the number of counted row ?>
</h2>
</div>
</div>
<!--Start Single Product Modal-->
<div id="<?php echo $id; ?>" class="modal-box">
×
<div class="modal-wrap">
<div class="modal-img">
<img src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt'] ?>" title="<?php echo $thumbnail['title'] ?>" />
</div>
<div class="modal-content">
<h2><?php echo $name; ?></h2>
<p><strong><?php echo $size; ?></strong></p>
<hr>
<?php echo $description; ?>
<br>
<?php if( $stockist ): ?>
<div class="modal-stockist">Find a Stockist</div>
<?php endif; ?>
<?php if( $literature ): ?>
<div class="modal-literature">Literature</div>
<?php endif; ?>
<br></br>
</div>
</div>
</div>
<!--Close Single Product Modal-->
<?php $counter++; // add one per row ?>
<?php endwhile; // end of the loop. ?>
</div>
<!--End Grid Wrapper-->
<?php endif; ?>
<!-- Close product repeater field -->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Container-->
think like computer while you do the coding
in nested loop try to give id's to the items as nested
so change your nested modal starting line to
in your case you are using $counter for every product listing.
use it for every row or line of products.
for that move the $counter = 1; line before the start of first while loop.
<div id="<?php echo $id; ?>" class="modal-box">
to
<div id="<?php echo $counter.$id; ?>" class="modal-box">
as $counter tells which row and $id tells which product and they both tells the specific product from any row. it will be unique then...
don't forget to append $counter with $id where you are initializing the js for the modal