Wrap every 3 divs in a divs - wordpress

This show 3 image at a time and move left 3 images at a time this is my problem. I want that show 3 images at a time and move left only one at a time. For Example, 4 image add it and three show at a time and when move one image then also show three image at a time. And then move one and than also show three images like http://wmh.github.io/jquery-scrollbox/ Example No 5 and 6...*
Note: $Cat_ID is categories..
<div class="cat-box-content">
<?php if($cat_query->have_posts()): ?>
<div id="slideshow<?php echo $Cat_ID ?>" class="group_items-box">
<?php while ( $cat_query->have_posts() ) : $cat_query->the_post()?>
<div <?php tie_post_class('scroll-item'); ?>>
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tie' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
<?php //the_post_thumbnail( 'thumbnail' ); ?>
<?php tie_thumb( 'tie-large' ); ?>
<span class="overlay-icon"></span>
</a>
</div><!-- post-thumbnail /-->
<?php endif; ?>
<h3 class="post-box-title"><?php the_title(); ?></h3>
<p class="post-meta">
<?php if( tie_get_option( 'box_meta_score' ) ) tie_get_score(); ?>
<?php if( tie_get_option( 'box_meta_date' ) ) tie_get_time() ?>
</p>
</div>
<?php endwhile;?>
<div class="clear"></div>
</div>
<div id="nav<?php echo $Cat_ID ?>" class="scroll-nav"></div>
<?php endif; ?>
</div>
JQuery Function :
<script type="text/javascript">
jQuery(document).ready(function() {
var vids = jQuery("#slideshow<?php echo $Cat_ID ?> .scroll-item");
for(var i = 0; i < vids.length; i+=3) {
vids.slice(i, i+3).wrapAll('<div class="group_items"></div>');
}
jQuery(function() {
jQuery('#slideshow<?php echo $Cat_ID ?>').cycle({
fx: 'scrollHorz',
timeout: 3000,
pager: '#nav<?php echo $Cat_ID ?>',
slideExpr: '.group_items',
speed: 1000,
pause: true
});
});
});
</script>

Related

Add image with Post url after content

I would like to add an image with the link to the post - <?php echo esc_url($theme_post['url']); in the bottom right corner of the class "blog-grid-content".
Could someone please guide me to the best approach?
Thank you
<div class="blog-grid grid-2<?php echo esc_attr( $blog_grid_class ); ?>" <?php echo esc_attr( $anim_attrs ); ?>>
<div class="blog-grid-content">
<?php if ( $theme_post['categories'] ) : ?>
<div class="tags">
<?php if ( in_array( 'sticky', get_post_class( '', $theme_post['post_id'] ) ) ) : ?>
<span class="tag tag-sticky"><?php esc_html_e( 'Featured', 'theme' ); ?></span>
<?php endif; ?>
<?php foreach ($theme_post['categories'] as $_category) : ?>
<a class="tag brand-bg-color" href="<?php echo esc_url( get_category_link( $_category->cat_ID ) ); ?>">
<?php echo esc_html( $_category->name ); ?>
</a>
<?php endforeach; ?>
</div>
</div>
</div>

ACF repeater field custom image size output

I'm trying to output custom image size in my code:
<?php if(get_field('repeater-field-name')) { ?>
<?php foreach (get_field('repeater-field-name') as $row) :?>
<div class="item" onclick="location.href='<?php print $row['link'] ?>';" style="cursor: pointer;">
<div class="sisseviskaja-title"><h2><?php print $row['title'] ?></h2></div>
<div class="sisseviskaja-pilt"><img src="<?php print $row['image'] ?>" alt="" /></div>
</div>
<?php endforeach; ?>
<?php } ?>
I have tried ACF tutorial codes but i'd like to keep foreach loop that i have. I'm no PHP guru so i havent got any good ideas to implement it.
Can someone, please, help me?
Here's the way to do with ACF codes. This is using array for the image (which you need to do if you want to pull out the dimensions). I'm not sure exactly if it can be done the way you want to do it.
<?php if (have_rows('project_listings')){ ?>
<?php while (have_rows('project_listings')){ the_row();
$link = get_sub_field('link_field');
$title = get_sub_field('title_field');
$image = get_sub_field('image');
//additional vars
$size = 'full';
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];
?>
<div class="item" onclick="location.href='<?php echo $link ?>';" style="cursor: pointer;">
<div class="sisseviskaja-title">
<h2><?php echo $title ?></h2>
</div>
<div class="sisseviskaja-pilt">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>"/>
</div>
</div>
<?php }; ?>
<?php }; ?>
I do it like this:
<?php if( have_rows('field-name') ): ?>
<?php while( have_rows('field-name') ): the_row(); ?>
<?php
$image = get_sub_field('picture');
$size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>
<?php endwhile; ?>
<?php endif; ?>

Agenda page listing last 6 posts, grouped by month(dsc)

Could I use some help? I'm worse than a rookie with PHP stuff.
I'm trying to create a loop that requests posts from an specific category(agenda). I'd need 6 posts from an specific month stacked in 2 rows by 3 columns, something like the image down below.
http://imageshack.us/scaled/landing/833/schemeq.jpg
I was trying to merge codes and make this work, but I don't know what I'm doing wrong.
Any help would be great.
<?php $count = 0; ?>
<?php for ($i=1; i<12; $i++)
{
$month=$i;
$nQuery = new WP_Query("monthnum=$month&order=DSC&posts_per_page=6" );
if (nQuery->have_posts()) : while (nQuery->have_posts()) : nQuery->the_post();
<div class="box<?php if( $count%3 == 0 ) { echo "'-1'; }; $count++; ?> post">
<a href="<?php the_permalink(); ?>" class="alignleft" >
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('postfeatured'); } else { ?> <img src="/wp/wp-content/uploads/2012/12/thumb_featured.jpg" alt="<?php the_title(); ?>" />
<?php } ?> </a>
<div class="entry-meta">
<?php twentyten_posted_on(); ?>
<span class="comments-link"><?php comments_popup_link( __( '0', 'twentyten' ), __( '1', 'twentyten' ), __( '%', 'twentyten' ) ); ?></span>
</div><!-- .entry-meta -->
<h2><span class="entry-title"><?php the_title(); ?></span></h2>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
</div>
}?>
What results are you getting now? Quite simply, you could handle the columns with CSS. Also, I do not see a cat argument in you query.

Wordpress post repeat twice at the last page

I try to display my post using two column, to make sure the fit each other, I tried to create two vertical column, and display the post odd and even seperately. Odd on left side, and even on the right side. And im suing wp_pagenavi() to get navigation working, other page work fine, display the post as I intend it to be, but on the last page, one post will repeat twice.
Here my code for the looping part
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<div id="holder" class="left">
<?php while ( have_posts() ) : ?>
<?php
$postcount++;
if( ($postcount % 2) == 0 ) : // skip 'even' posts
$wp_query->next_post();
else :
?>
<?php the_post(); ?>
<div class="fpost">
<div class="fposttitle">
<h1 class="left"><?php the_title(); ?></h1>
<?php if ( comments_open() || ( '0' != get_comments_number() && ! comments_open() ) ) : ?>
<div class="combox right">
<?php $x = get_comments_number(); if ($x < 10) : ?>
<?php comments_popup_link( __( '00', 'toolbox' ), __( '01', 'toolbox' ), __( '0%', 'toolbox' ) ); ?>
<?php else : ?>
<?php comments_popup_link( __( '00', 'toolbox' ), __( '01', 'toolbox' ), __( '%', 'toolbox' ) ); ?>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="clear"></div>
</div>
<div class="fcontent">
<?php $thumbnail = get_post_meta(get_the_ID(), 'thumbnail', true);
if ($thumbnail) : ?>
<img src="<?php echo $thumbnail; ?>" alt="<?php the_permalink(); ?>" />
<?php else : ?>
<p><?php the_excerpt(); ?></p>
<?php endif; ?>
</div>
<div class="finfo">
<p class="left date"><?php the_time('F j, Y') ?></p>
<p class="left cat"><?php the_category(', ') ?></p>
<p class="right"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'toolbox' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark" >Read More</a></p>
<div class="clear"></div>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
</div><!-- #content -->
<div id="holder2" class="left">
<?php while ( have_posts() ) : ?>
<?php
$postcount++;
if( ($postcount % 2) != 0 ) : // skip 'odd' posts
$wp_query->next_post();
else :
?>
<?php the_post(); ?>
<div class="fpost">
<div class="fposttitle">
<h1 class="left"><?php the_title(); ?></h1>
<?php if ( comments_open() || ( '0' != get_comments_number() && ! comments_open() ) ) : ?>
<div class="combox right">
<?php $x = get_comments_number(); if ($x < 10) : ?>
<?php comments_popup_link( __( '00', 'toolbox' ), __( '01', 'toolbox' ), __( '0%', 'toolbox' ) ); ?>
<?php else : ?>
<?php comments_popup_link( __( '00', 'toolbox' ), __( '01', 'toolbox' ), __( '%', 'toolbox' ) ); ?>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="clear"></div>
</div>
<div class="fcontent">
<?php $thumbnail = get_post_meta(get_the_ID(), 'thumbnail', true);
if ($thumbnail) : ?>
<img src="<?php echo $thumbnail; ?>" alt="<?php the_permalink(); ?>" />
<?php else : ?>
<p><?php the_excerpt(); ?></p>
<?php endif; ?>
</div>
<div class="finfo">
<p class="left date"><?php the_time('F j, Y') ?></p>
<p class="left cat"><?php the_category(', ') ?></p>
<p class="right"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'toolbox' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark" >Read More</a></p>
<div class="clear"></div>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
</div><!-- #content -->
<?php else : ?>
no post
<?php endif; ?>
<div class="clear"></div>
<div id="nav"> <?php wp_pagenavi() ?> </div>
</div><!-- #primary -->
I thinking maybe because last page, there is not enough number post, but can't figure out why the post repeat.
update: I just tried to add one new post, and everything work fine. but when I add another post, it the last page repeat same post again.
Probably should have included this as an answer instead of a comment, in the case where you have an odd number of posts, you don't reset your $postcount variable to 0, so your 2nd loop doesn't necessarily start on the same condition that the first loop did. So on your last page you're able to notice this happening, but chances are on the other pages you're skipping certain posts altogether:
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<div id="holder" class="left">
<?php $postcount = 0; ?>
<?php while ( have_posts() ) : ?>
<?php
$postcount++;
if( ($postcount % 2) == 0 ) : // skip 'even' posts
$wp_query->next_post();
else :
?>
<?php the_post(); ?>
<?php endif; ?>
<?php endwhile; ?>
...
</div><!-- #content -->
<div id="holder2" class="left">
<?php $postcount = 0; ?>
<?php rewind_posts();//rewind the post counter so you can do another loop ?>
<?php while ( have_posts() ) : ?>
<?php
$postcount++;
if( ($postcount % 2) != 0 ) : // skip 'odd' posts
$wp_query->next_post();
else :
?>
<?php the_post(); ?>
...
<?php endif; ?>
<?php endwhile; ?>
</div><!-- #content -->

How do I set ACF repeater to only show X items per row

I'm using ACF pro repeater fields, which renders individual images per row. However it shows all images until it wraps to the next line:
<div class="client-logo-web-wrapper"><?php $logo_images = get_field( 'logo' ); ?>
<?php if ( $logo_images ) : ?>
<?php foreach ( $logo_images as $logo_image ): ?>
<a href="<?php echo $logo_image['url']; ?>">
<img src="<?php echo $logo_image['sizes']['thumbnail']; ?>" alt="<?php echo $logo_image['alt']; ?>" />
</a>
<p><?php echo $logo_image['caption']; ?></p>
<?php endforeach; ?>
<?php endif; ?>
<?php if ( have_rows( 'logo_gallery' ) ) : ?>
<?php while ( have_rows( 'logo_gallery' ) ) : the_row(); ?>
<?php $client_logo = get_sub_field( 'client_logo' ); ?>
<?php if ( $client_logo ) { ?>
<div class="client-logo"><img src="<?php echo $client_logo['url']; ?>" alt="<?php echo $client_logo['alt']; ?>" />
</div>
<?php } ?>
<?php endwhile; ?></div>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
Instead I would like to display a set number of images (for ex. 4) per row. Thanks!
You need to define the limit, and the break the loop once you reach that limit. Also, you can also set the max number of items in your ACF field definition.
Try the following with the limit set:
<?php
$show = 4;
$count = 0;
?>
<?php if ( $logo_images ) : ?>
<?php foreach ( $logo_images as $logo_image ): ?>
<?php $count++; ?>
<a href="<?php echo $logo_image['url']; ?>">
<img src="<?php echo $logo_image['sizes']['thumbnail']; ?>" alt="<?php echo $logo_image['alt']; ?>" />
</a>
<p><?php echo $logo_image['caption']; ?></p>
<?php if ($count > $show) { break; } ?>
<?php endforeach; ?>
<?php endif; ?>

Resources