ACF PRO Image in Repeater not showing - php

The images are not showing in front-end. ACF settings screenshot
<?php
if( have_rows('how_it_works_functions') ):
$counter = 0;
while( have_rows('how_it_works_functions') ) : the_row();
$counter++;
?>
<div class="step<?php echo $counter; ?>">
<div class="row section-content">
<?php if($counter == 2) { ?>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<div class="col-md-4 text">
<h3 data-aos="fade-left" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<?php } else { ?>
<div class="col-md-4 text">
<h3 data-aos="fade-right" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<?php } ?>
</div>
</div>
<?php
endwhile;
endif;
?>
I already check the var_dump and it is getting the correct url but I still have broken image in front-end.

You need to echo that field.
Like this based on your code:
<img class="skip-lazy" src="<?php echo get_sub_field( 'how_it_works_functions_image' )['url']; ?>" alt="<?php echo get_sub_field( 'how_it_works_functions_image' )['alt']; ?>">
Alternative effective way:
<?php
$image = get_sub_field( 'how_it_works_functions_image' );
?>
<img class="skip-lazy" src="<?php echo esc_attr( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
Try out the above solution and let me know if it works or not.

Related

ACF Flexible Content - Looping two layouts (parse error?)

Getting to grips with ACF and it's flexible content field.
I have two layouts as shown below but I can't seem to get the second part (image_block) working correctly as it keeps popping up with a (parse error) I'm probably missing something obvious but if anyone has some advice it would be very helpful.
<?php if( have_rows('content-h') ):?>
<?php while ( have_rows('content-h') ) : the_row();?>
<?php if( get_row_layout() == 'text_block' ):
$title = get_sub_field('title');
$description = get_sub_field('description');
$subheading = get_sub_field('subheading');
?>
<div class="col-lg-6">
<div class="section-title">
<span class="text-color"><?php echo $subheading; ?></span>
<h2 class="mt-3 content-title"><?php echo $title; ?></h2>
</div>
</div>
<div class="col-lg-6">
<p><?php echo $description; ?></p>
</div>
<?php endif; ?>
</div>
<div class="row justify-content-center">
<?php if( get_row_layout() == 'image_block' ):
$image = get_sub_field('image');
$title = get_sub_field('title');
$description = get_sub_field('description');
$link = get_sub_field('link');
?>
<div class="col-lg-3 col-md-6 col-12">
<div class="intro-item mb-5 mb-lg-0">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" alt="" class="img-fluid w-100">
<h4 class="mt-4 mb-3"><?php echo $title; ?></h4>
<p><?php echo $description; ?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
Any help is appreciated.
This is a straight PHP parsing error, nothing to do with ACF or flexible fields.
See the comment where I believe you are missing an endif. The best thing to do in these situations is to go through your code line by line noting where you are starting a conditional and whether you have ended it correctly (so the blocks are nested).
Also check that your HTML elements are formed correctly. There appears to be an extra closing div tag - see comments in the code.
<?php if( have_rows('content-h') ):?>
<?php while ( have_rows('content-h') ) : the_row();?>
<?php if( get_row_layout() == 'text_block' ):
$title = get_sub_field('title');
$description = get_sub_field('description');
$subheading = get_sub_field('subheading');
?>
<div class="col-lg-6">
<div class="section-title">
<span class="text-color"><?php echo $subheading; ?></span>
<h2 class="mt-3 content-title"><?php echo $title; ?></h2>
</div>
</div>
<div class="col-lg-6">
<p><?php echo $description; ?></p>
</div>
<?php endif; ?>
</div> <!-- THIS closing div tag seems to be spurious -->
<div class="row justify-content-center">
<?php if( get_row_layout() == 'image_block' ):
$image = get_sub_field('image');
$title = get_sub_field('title');
$description = get_sub_field('description');
$link = get_sub_field('link');
?>
<div class="col-lg-3 col-md-6 col-12">
<div class="intro-item mb-5 mb-lg-0">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" alt="" class="img-fluid w-100">
<h4 class="mt-4 mb-3"><?php echo $title; ?></h4>
<p><?php echo $description; ?></p>
</div>
</div>
<?php endif; //THIS IS WHAT NEEDS TO BE ADDED CHECK IT IS IN THE RIGHT PLACE ?>
<?php endwhile; ?>
<?php endif; ?>

Code shows nothing on wordpress: while (have_posts()) {the_post();?>

I've put this code to the index.php on wordpress, but it doesn't show up anything. I thought it should shows all the posts latest to newest. Anyone can solve this?
<div class="card">
<div class="card-image">
<a href="<?php echo the_permalink(); ?>">
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID); ?>" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
<div class="card-meta">
Đăng bởi <?php the_author(); ?> vào <?php the_time('j F, Y') ?> trong <?php echo get_the_category_list(',') ?>
</div>
<p>
<?php echo wp_trim_words(get_the_excerpt(), 30); ?>
</p>
Tìm hiểu thêm
</div>
</div>
<?php }
wp_reset_query();
?>
Thank you very much.
You're missing half of a loop pretty much ...
If you want to use the post template that you have in you question, then you can do something like this:
<?php if ( have_posts() ):
$i = 0;
while ( have_posts() ):
$i++;
if ( $i > 1 ):
echo '<hr>';
endif; ?>
<div class="card">
<div class="card-image">
<a href="<?php echo the_permalink(); ?>">
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID); ?>" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
<div class="card-meta">
Đăng bởi <?php the_author(); ?> vào <?php the_time('j F, Y') ?> trong <?php echo get_the_category_list(',') ?>
</div>
<p>
<?php echo wp_trim_words(get_the_excerpt(), 30); ?>
</p>
Tìm hiểu thêm
</div>
</div>
<?php
endwhile;
endif; ?>
Should be working.

Every second post in different div block in WordPress

Let's say I have 2 styles. Style 1 and Style 2
I would like to show every odd number post in the style 1 and even number posts in style 2
Below is my template file:
<?php /* Template Name: Home v2 */ get_header(); ?>
<main role="main">
<!-- section -->
<section>
<?php
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('showposts=' . $theme_options['blog-post-per-page'] . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="tiles-block w-clearfix">
<div class="float-left">
<div class="content-block w-clearfix">
<h5 class="black travel"><?php echo the_category();?></h5>
<h1 class="black mastheading"><?php the_title(); ?></h1>
<div class="date-block w-container">
<div class="black mini-date"> <?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">32</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a>
</div>
</div>
<div class="float-left natural-forest">
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" />
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
The code above works good. but it gives only style 1.
I already have html setup for style 2 but don't know how to implement in the code above.
This is my style2 block
<div class="tiles-block w-clearfix">
<div class="float-right">
<div class="content-block w-clearfix">
<h5 class="black photography">PHOTOGRAPHY</h5>
<h1 class="black mastheading">title test</h1>
<div class="date-block w-container">
<div class="black mini-date">October 26, 2016</div>
<img class="mini-icon" src="http://aa.com/aa.png">
<div class="black mini-date">15</div>
<img class="mini-icon" src="http://bb.com/bb.png">
<div class="black mini-date">13</div>
</div>
<div class="black iltalica">Lorem Ipsuim dolor....</div>
<a class="a8 cta w-button" href="#">continue reading</a></div>
</div>
<div class="float-left window-light">
<div class="thumb">
<img src="<?php echo get_template_directory_uri() . '/images/post2.png' ?>" />
</div>
</div>
<img class="left-arrow" src="http://cc.com/cc.png">
</div>
This will get a little messy in PHP because you'd need several if statements. You might consider naming some of the inner divs the same, and making only the outer divs different names, and doing more of the work in CSS. That said, here's how you would do it:
Set a flag that changes each time through the loop, and check the value of the flag before you output your HTML.
$style_flag = 1;
while ($wp_query->have_posts()) : $wp_query->the_post();
//check the value
if ($style_flag == 1){
// output style 1
} else {
// output style 2
}
// do everything else you need to do in the loop
// switch the value of the flag
$style_flag = $style_flag * -1;
end while;
Back to CSS for a moment, though. Check out the nth-child selector if you're not familiar with it already: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
I have found the solution to my problem.
<?php query_posts('showposts=0'); ?>
<?php
$i = 1;
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if(($i % 2) == 0) { ?>
<div class="tiles-block w-clearfix">
<div class="float-right">
<div class="content-block w-clearfix">
<h5 class="black photography"><?php echo the_category();?></h5>
<h1 class="black mastheading"><?php the_title(); ?></h1>
<div class="date-block w-container">
<div class="black mini-date"><?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">32</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a></div>
</div>
<div class="float-left window-light">
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<img class="left-arrow" src="<?php echo get_template_directory_uri() . '/images/left-arrow.png' ?>">
</div>
<?php } elseif (($i % 2) !== 0) { ?>
<div class="tiles-block w-clearfix">
<div class="float-left">
<div class="content-block w-clearfix">
<h5 class="black travel"><?php echo the_category();?></h5>
<h1 class="black mastheading"><?php the_title(); ?></h1>
<div class="date-block w-container">
<div class="black mini-date"><?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">32</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a>
</div>
</div>
<div class="float-left natural-forest">
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" />
</div>
<?php } ?>
<?php $i++; ?>
<?php endwhile; ?>
<?php endif; ?>

Shortcode is moving the_content outside of the article container in WordPress

I've made a shortcode function that returns some Advanced Custom Fields depending on which repeater field is chosen. It displays correctly and in the right order however any content typed underneath the shortcode is moved outside of its <article> container element.
Here is the code:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
</div>
</div>
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
Can anyone help solve this mystery? Many thanks.
You have two extra closing <div>'s in your code.
Try this:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
<!--/div>
</div-->
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');

Display Conditional Content in Wordpress Template

Alright, so I have this block of code in my current theme:
<div class="content_block">
<?php the_content(); ?>
<div class="<?php echo $left_block; ?>">
<?php $project_photos = get_post_meta( get_the_ID(), 'project_photo_photo' );
if ( $project_photos ) : ?>
<div class="grid_gallery clearfix">
<?php foreach( $project_photos as $project_photo ) { ?>
<figure class="gallery_item featured-thumbnail thumbnail single-gallery-item">
<a href="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" class="image-wrap" rel="prettyPhoto[gallery]">
<img class="project_photo_photo" width="260" src="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" alt="<?php the_title(); ?>" />
<span class="zoom-icon"></span>
</a>
</figure>
<?php } ?>
<!--END .slider -->
</div>
<?php endif; ?>
What I need to do is to add a DIV wrap around "the_content" if and only if the $project_photos selector is active, not being a PHP developer this is what I've come up with but it doesn't work:
<div class="content_block">
<?php if ( $project_photos() ) {
echo '<div class="project_description">';
the_content();
echo '</div>';
} else {
the_content();
} ?>
<div class="<?php echo $left_block; ?>">
<?php $project_photos = get_post_meta( get_the_ID(), 'project_photo_photo' );
if ( $project_photos ) : ?>
<div class="grid_gallery clearfix">
<?php foreach( $project_photos as $project_photo ) { ?>
<figure class="gallery_item featured-thumbnail thumbnail single-gallery-item">
<a href="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" class="image-wrap" rel="prettyPhoto[gallery]">
<img class="project_photo_photo" width="260" src="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" alt="<?php the_title(); ?>" />
<span class="zoom-icon"></span>
</a>
</figure>
<?php } ?>
<!--END .slider -->
</div>
<?php endif; ?>
If anyone could provide some guidance on how I might accomplish this I would be very grateful.
Thanks in advance.
Can you give this a try?
<div class="content_block">
<?php
$project_photos = get_post_meta( get_the_ID(), 'project_photo_photo' );
if ( $project_photos ) {
echo '<div class="project_description">';
the_content();
echo '</div>';
} else {
the_content();
} ?>
<div class="<?php echo $left_block; ?>">
<?php
if ( $project_photos ) : ?>
<div class="grid_gallery clearfix">
<?php foreach( $project_photos as $project_photo ) { ?>
<figure class="gallery_item featured-thumbnail thumbnail single-gallery-item">
<a href="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" class="image-wrap" rel="prettyPhoto[gallery]">
<img class="project_photo_photo" width="260" src="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" alt="<?php the_title(); ?>" />
<span class="zoom-icon"></span>
</a>
</figure>
<?php } ?>
<!--END .slider -->
</div>
<?php endif; ?>

Categories