i want to make categories gallery. so i have one category called gallery, i create some post with gallery images. in gallery category page i want to display each post 4 picture. picture will take from advancedcustomfields gallery field. bellow is my current category-gallery page code, image not coming but title and more link working fine. would guys tell me what how to do ?
<?php get_header(); ?>
<div class="contentarea">
<div class="wapper">
<div class="content clearfix">
<?php
while ( have_posts() ) :
the_post();
$images = get_field('gallery_picture');
?>
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h2>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /> Gallery </div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php get_footer(); ?>
i solve this problem. so want to share with other. this for category page. bellow is code
<?php
while ( have_posts() ) :
the_post();
?>
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h2>
<?php
$images = get_field('gallery_picture');
$max = 5;
$i = 0;
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): $i++; ?>
<?php if( $i > $max){ break; } ?>
<li> <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /> </li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Gallery </div>
<?php endwhile; ?>
Related
I am working on a website that has a section below the blog post that shows a marked featured post, the issue I am having is that on the featured page the card section is showing the 1st post on the post list instead of its own featured post.
This is setup in a component-card.php
<?php
$post_id = (get_query_var('post_id')) ? get_query_var('post_id') : $post->ID;
$type = get_query_var('type');
$pages = get_query_var('pages');
$col = get_query_var('col');
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'single-post-thumbnail');
$show_featured = get_field("featured_story", $post_id);
$link = get_the_permalink($post_id);
$title = get_the_title($post_id);
$excerpt = get_the_excerpt($post_id);
$count = 6;
$switch = '';
if ($col === '12') {
$count = 12;
$switch = 'switch';
}
?>
<?php if ($type !== 'page'): ?>
<?php if ($show_featured): ?>
<article class="component-article-cards featured">
<div class="row align-middle align-center">
<div class="col-12 col-md-<?php echo $count ?> <?php echo $switch ?>">
<div class="article-inner">
<h3><?php echo $title; ?></h3>
<hr />
<?php echo $excerpt; ?>
Read full article
</div>
</div>
<div class="col-12 col-md-<?php echo $count ?>">
<?php if ($image) : ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
</div>
</div>
</article>
<?php else: ?>
<article class="component-article-cards">
<?php if ($image) : ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
<div class="article-inner">
<h3><?php echo $title; ?></h3>
<hr />
<?php echo $excerpt; ?>
Read full article
</div>
</article>
<?php endif; ?>
<?php endif; ?>
Any help would be gratefully appreciated
I've been cobbling together bits and pieces of various examples together but can't seem to wrap my head around this.
I have regular blog posts (News) that I would like displayed with the most recent on top followed by a custom post type (Businesses) that I would like grouped below the News. I am using Sage and this is my first theme.
Here is my beginner code so far:
<?php get_template_part('templates/page', 'header'); ?>
<?php if (!have_posts()) : ?>
<div class="alert alert-warning">
<?php _e('Sorry, no results were found.', 'sage'); ?>
</div>
<?php get_search_form(); ?>
<?php endif; ?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php $post_type = get_post_type_object( get_post_type() ); ?>
<?php $type = get_post_type(); ?>
<?php if ($type == 'post') { ?>
<h2>News Results</h2>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div>
<a href="<?php the_permalink(); ?>">
<?php $cats=get_the_category(); ?>
<?php echo $cats[0]->cat_name; ?>
</a>
</div>
<div>
<h3><?php the_title(); ?></h3>
<div class="result-excerpt">
<?php if ( has_excerpt( $post->ID ) ) {
echo the_excerpt();
} else {
echo get_excerpt();
} ?>
</div>
</div>
</article>
<?php } elseif ($type == 'business') { ?>
<h2>Business Results</h2>
<article <?php post_class(); ?>>
<header>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if (get_post_type() === 'post') { get_template_part('templates/entry-meta'); } ?>
</header>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<?php $cats=get_the_category(); ?>
<?php echo $cats[0]->cat_name; ?> -
<?php the_title(); ?>
</a>
<h3><?php echo the_sub_field('title'); ?></h3>
<?php if( get_sub_field('content') ): ?>
<div class="result-excerpt">
<?php echo custom_field_excerpt(); ?>
</div>
<?php endif; ?>
</article>
<?php } ?>
<?php endwhile; ?>
<?php endif; ?>
I think the problem is that you're looping over every post, in order, and deciding what to do with it. This will result in the output, whatever it is, in the same order as the input.
I don't speak very fluent PHP, but I think what's happening is that the algorithm reads like this:
-for each post:
- if it's a 'post', display it like «this»
- otherwise, if it's a 'business', display it instead like «this»
I think you want to have two loops, like this:
-for each post:
- if it's a 'post', display it like «this»
-for each post:
- if it's a 'business', display it like «this»
Unfortunately, I don't see an obvious reference to store in an array and loop over. I really don't know how sage works, so I'll have to leave the implementation to you. My best guess - and I sincerely doubt this will work - is as follows:
<?php get_template_part('templates/page', 'header'); ?>
<?php if (!have_posts()) : ?>
<div class="alert alert-warning">
<?php _e('Sorry, no results were found.', 'sage'); ?>
</div>
<?php get_search_form(); ?>
<?php endif; ?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php $post_type = get_post_type_object( get_post_type() ); ?>
<?php $type = get_post_type(); ?>
<?php if ($type == 'post') { ?>
<h2>News Results</h2>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div>
<a href="<?php the_permalink(); ?>">
<?php $cats=get_the_category(); ?>
<?php echo $cats[0]->cat_name; ?>
</a>
</div>
<div>
<h3><?php the_title(); ?></h3>
<div class="result-excerpt">
<?php if ( has_excerpt( $post->ID ) ) {
echo the_excerpt();
} else {
echo get_excerpt();
} ?>
</div>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
<?php if (!have_posts()) : ?>
<div class="alert alert-warning">
<?php _e('Sorry, no results were found.', 'sage'); ?>
</div>
<?php get_search_form(); ?>
<?php endif; ?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php $post_type = get_post_type_object( get_post_type() ); ?>
<?php $type = get_post_type(); ?>
<?php if ($type == 'business') { ?>
<h2>Business Results</h2>
<article <?php post_class(); ?>>
<header>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if (get_post_type() === 'post') { get_template_part('templates/entry-meta'); } ?>
</header>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<?php $cats=get_the_category(); ?>
<?php echo $cats[0]->cat_name; ?> -
<?php the_title(); ?>
</a>
<h3><?php echo the_sub_field('title'); ?></h3>
<?php if( get_sub_field('content') ): ?>
<div class="result-excerpt">
<?php echo custom_field_excerpt(); ?>
</div>
<?php endif; ?>
</article>
<?php } ?>
<?php endwhile; ?>
<?php endif; ?>
Good luck!
I have tried to code my wordpress theme as simple as possible but I don't really understand why I can't display an image from Advanced Custom Field into a modal box using Featherlight.js (http://noelboss.github.io/featherlight/)
Here is my online page http://www.skuar.com
This is my single.php code, which simply display the image custom field
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
and this is the wp loop content
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>" data-featherlight="image">
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</a>
</div>
I just would like to open the image in a lightbox...
Is that make sense?
Thanks!
In invalid double quotes in your code. Try this code:
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php $image = get_field('image');
if( !empty($image) ): ?>
<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>
<?php endif; ?>" data-featherlight="image">
</div>
</a>
</div>
Hi Guys my name is Fotis and i am a junior web developer.
The reason i need your help is because i am trying to create this gallery http://www.elliotcondon.com/creating-an-image-gallery-with-advanced-custom-fields/ and i am using custom fields and the add on repeater.
But i can’t see anything on my browser and in my home page.But when i create anotherpage template without beign declared as front page or page for posts it works fine. So the question is what should i include in my code to make this happen.?
Please anyone who know to help me
Thank you for reading my request!
<?php get_header(); ?>
<div id="content">
<div id="main">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; else: endif; ?>
<?php query_posts('category_name='.get_the_title().'&post_status=publish,future');?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?>
<?php endwhile; else: endif; ?>
<!-- Slider -->
<?php if(get_field('images')): ?>
<div id="slider">
<?php while(the_repeater_field('images')): ?>
<?php $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
<?php $thumb = wp_get_attachment_image_src(get_sub_field('image'), 'thumbnail'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_sub_field('title');?>" rel="<?php echo $thumb[0]; ?>" />
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>
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; ?>