The way I am trying to set this up is that if a link has not been chosen then only the image will be displayed, but if a link is chosen as well as an image then I want the link to be wrapped around the image, here is an example of what I have at the moment:
<?php if(get_field('block_repeater')): ?>
<ul>
<?php while(has_sub_field('block_repeater')): ?>
<li>
<!-- problem -->
<?php if( get_sub_field('block_link') ): ?>
<?php while(has_sub_field('block_image')): ?>
<a class="img" href="<?php the_sub_field('block_link'); ?>">
<img src="<?php the_sub_field('block_image'); ?>" alt="" />
<span class="square-arrow"></span>
</a>
<?php endwhile; ?>
<?php endif; ?>
<!--//problem -->
<?php if( get_sub_field('block_image') ): ?>
<img src="<?php the_sub_field('block_image'); ?>" alt="" />
<?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
The does not seem to be working correctly though as its rendering out about a hundred of these:
<a class="img" href="">
<img alt="" src="">
<span class="square-arrow"></span>
</a>
Don't suppose anyone knows what I have done wrong please?
It's because you are doing a loop and keeping that html block between while loop so this block is being printed until the loop ends.
<?php while(has_sub_field('block_image')): ?>
<!--
This part will be printed as long as
has_sub_field('block_image') returns true
-->
<?php endwhile; ?>
If you want to print out that part only once, then remove the loop, just comment out these lines, like
<?php //while(has_sub_field('block_image')): ?>
<!-- keep everything here as it is -->
<?php //endwhile; ?>
Related
I'm trying to make it so posts can be easily paginated in a custom theme, but I'm doing something wrong. I've included wp_link_pages(); in the while like which I believe is required, but maybe I have it in the wrong place or I'm missing something else?
<?php get_header(); ?>
<?php
while(have_posts()) {
the_post();
wp_link_pages();
?>
<div class="mainConent">
<div class="leftSidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('left_sidebar') ?>
</div>
</div>
<div class="recentBlogsWrapper">
<div class="blogWrapper">
<h2><?php the_title(); ?></h2>
<p><?php the_time('F j, Y') ?></p>
<?php if(has_post_thumbnail()) { ?>
<div class="card-image">
<img class="page-image" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
</div>
<?php } ?>
<div class="card-description">
<?php the_content(); ?>
<?php comments_template(); ?>
<?php } ?>
<div class="backarrowwrap">
<a class="backhomelink" href="<?php echo site_url(); ?>" <?php if(is_front_page()) echo 'class="active"' ?>>
<img class="backarrow" src="<?php echo get_template_directory_uri(); ?>/img/backarrow.png" alt="back arrow" />
Go Back Home
</a>
</div>
</div>
</div>
</div>
<div class="rightSidebar" id="sidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('right_sidebar') ?>
</div>
</div>
<?php get_footer(); ?>
Another odd thing that's happening is that the code block is showing the code on the page instead of hiding it like it should.
The wordpress editor
My blog post page which shows the code
Gutenburg was preventing me from writing the comment as code, even in a code box. Once I switched to the classic view the problem went away since I could write the comment in the html directly.
I'm trying to create an Advanced Custom Fields gallery in a lightbox that pops up when an icon is clicked. I've got it to the point where the lightbox finds all the images associated with the post and displays them properly when you click the icon, but the problem I'm having is it's also showing multiple icons for the gallery as well.
Sample Image
I assume this is because I have the gallery icon as part of the foreach loop, but I have no idea how to separate it. One idea I had was to simply assign unique CSS classes to the extra icons and then hide them but I was hoping for something more elegant. Can someone point me in the right direction? The code I've cobbled together is below.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
Modify your loop as below, it will run img tag only when $i=0, means only first time.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
I don't have much idea about wordpress. I have a blog in wordpress. In my blog page, i am showing the most recent post in top and rest of post will appear in bottom . I am getting the repitation of most recent blog in bottom as well. that means, it's appearing twice on page. I want to get rid it from bottom. Thanks
<?php if (have_posts()):?>
<!-- section -->
<section>
<div class="row justify-content-center">
<div class="col-md-5"><?php $image1 = get_field('main_image');?>
<img id="theImage" class="img-fluid" src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></div>
<div class="col-md-4 base">
<div class="hero_col">
<p class="blog_content"><?php the_time('F j, Y'); ?> </p>
<span class="head_blog_content">
<?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</span>
<div class="read_article py-3"><a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></div>
</div>
</div>
<div class="centered_cols"><span class="hero_text"><!-- post title -->
<?php the_title(); ?>
</span></div>
</div>
</section><!-- Gallery Section -->
<div class="product-container">
<div class="row justify-content-center">
<?php $Number = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-sm-12 col-md-3 blog-container mb-3"><a href="#">
<?php $image1 = get_field('main_image');?>
<img src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></a>
<!-- post details -->
<p class="blog_date"><?php the_time('F j, Y'); ?></p>
<span class="blog_caption"><?php the_title(); ?>
</span>
<p class="blog_content"><?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</p>
<div class="column-bottom"><span class="read_article">
<a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></span></div>
</div>
<!-- /post details -->
<!-- article -->
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(array(120,120)); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
<!-- /article -->
<?php $Number++; endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>
I guess, since you don't know much about wordpress, its easier to create a counter to skip output in first item, something like this:
while (have_posts()) : the_post();
$Number = 1; //initial value
if ($count != 1) : ?>
//all your post content here
<?php endif;
$Number++; // incrementing counter by 1
It seems you came up with the counting (I've set the var name as Number based on your code), you're just missing the conditional aparently.
I am trying to add a repeater field into a flexible content row but for some reason nothing is being output. I have checked the fields and they seem correct so could someone please point me out to where I am going wrong? Thanks
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(get_field('collection_images_grid')): ?>
<?php while(has_sub_field('collection_images_grid')): ?>
<div class="collections">
<span><strong><?php the_sub_field('collection_detail'); ?></strong></span>
<a href="<?php the_sub_field('product_link'); ?>">
<img src="<?php the_sub_field('collection_image'); ?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
your <?php if(get_field('collection_images_grid')): ?> statement should be <?php if(get_sub_field('collection_images_grid')): ?>
<?php
// check if the flexible content field has rows of data
if( have_rows('the_process') ){
// loop through the rows of data
while ( have_rows('the_process') ) : the_row();
if( get_row_layout() == 'content' ){
?>
<h1><?php the_sub_field('headline');?></h1>
<h2 class="tagLine paddingBottom80"><?php the_sub_field('sub_headline');?></h2>
<div class="steps clearAfter">
<?php if(get_sub_field('process_steps')): ?>
<?php
while(has_sub_field('process_steps')):
?>
<!--Step-->
<div class="processStep rel boxSizing">
<img src="images/ph.png" width="200" height="200" class="borderRadius50Perc imageBorder boxSizing" />
<div class="processBox border1 padding20 clearAfter">
<div class="third processNumber boxSizing font70 darkBlue">
<div class="border1 padding20">
<?php echo $i;?>
</div>
</div>
<div class="twothird boxSizing processContent">
<h3><?php the_sub_field('step_headline'); ?></h3>
<div class="processContentTxt grey">
<?php the_sub_field('step_content'); ?>
</div>
</div>
</div>
</div>
<!--Step-->
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php
}
endwhile;
}
?>
You should change one thing in your code. Change <?php if(get_field('collection_images_grid')): ?> to <?php if(get_sub_field('collection_images_grid')): ?> and it will works! I've simulate your issue and after change to sub_field it works. Your code will be like this:
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(get_sub_field('collection_images_grid')): ?>
<?php while(has_sub_field('collection_images_grid')): ?>
<div class="collections">
<span><strong><?php the_sub_field('collection_detail'); ?></strong></span>
<a href="<?php the_sub_field('product_link'); ?>">
<img src="<?php the_sub_field('collection_image'); ?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
I had a little problems to use repeaters inside acf flexible content. So if I could say something to help in this cases is to use a variable to print the elements of repeater array, like this:
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(get_sub_field('collection_images_grid')): ?> // considering that collections_images_grid are a repeater
<?php $collection_image = get_sub_field('collection_images_grid');?>
<?php echo $collection_image['url']; ?> <?php echo $collection_image['alt']; ?> //Or something that you would like to use [... and than the rest of code]
Assuming your repeater field is collection_images_grid, you should loop through the items with have_rows(), like this:
<?php if(get_row_layout() == "collection_title"): // layout: Collection Title ?>
<div>
<h4><?php the_sub_field("collection_title"); ?></h4>
</div>
<?php elseif(get_row_layout() == "collection_images"): // layout: Collection Images ?>
<?php if(have_rows('collection_images_grid')): ?>
<?php while(have_rows('collection_images_grid')): the_row(); ?>
<div class="collections">
<span><strong><?php the_sub_field('collection_detail'); ?></strong></span>
<a href="<?php the_sub_field('product_link'); ?>">
<img src="<?php the_sub_field('collection_image'); ?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
This essentially checks if the flexible content field has rows of data (<?php if(have_rows('collection_images_grid')): ?>), and then loops through / displays them (<?php while(have_rows('collection_images_grid')): the_row(); ?>).
More details about looping through fields with have_rows(): https://www.advancedcustomfields.com/resources/have_rows/
To debug all the Advanced Custom Fields on a page and get a better understanding of the structure, I often use the following PHP snippet:
echo '<pre>';
var_dump(get_fields());
echo '</pre>';
This helps to make sure the data is available, and figure out how to reach it in the nested structure.
I think something's wrong with my query I'm using below. I want to show multiple thumbnails with each its own like button. All works fine, but when you press 1 button, it will like all other images as well. Tried the reset query, but I guess it's not working or I got things wrong. Someone got a simular problem or knows how to fix this?
<?php query_posts('cat=1'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $thumb = get_post_meta($post->ID, 'thumb', $single = true); ?>
<ul>
<li>
<img src="<?php echo $thumb; ?>" alt="View <?php the_title_attribute(); ?>'s showcase" width="150" height="111" />
<div class="design"><?php the_title(); ?></div>
<div class="subtitle">view feature</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</div>
<!-- AddThis Button END -->
</li>
</ul>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query() ?>
Add a fbml href attribute to the like button.
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:href="<?php the_permalink(); ?>"></a>