I am working with ACF Flexible content. I am trying to load an image in my flexible content. But Image doesn't show, just an broken icon. Why ? My sub field is named "photo"
<h4 class="titrage2"><?php the_field('titre_1'); ?></h4>
<?php
if( have_rows('ateliers') ): ?>
<?php while ( have_rows('ateliers') ) : the_row(); ?>
<?php if( get_row_layout() == 'atelieratelier' ):?>
<div id="article-atelier">
<h4 class="titrage"><?php the_sub_field('atelier_01');?></h4>
<div class="article-details"><?php the_sub_field('txtimg');?></div>
<div>
<img src="<?php the_sub_field('photo'); ?>" />
</div>
</div>
<?php endif;?>
<?php endwhile;?>
<?php else :?>
<?php endif;?>
Here is the solution
<?php
$image = get_sub_field('photo');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
Related
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; ?>
I have three separate fields in acf one for each image named slide_one, slide_two and slide_three. Now when I try to get the images to display using the code below nothing is being output. I am doing it this why and not using a loop like you usually as I'm wanting to have a separate text overlay for each image that I will have sliding in separately. This is the first step and it won't work. What an I doing wrong?
<div class="slider">
<ul class="slides">
<?php
$image_one = get_field('slide_one');
if( !empty($image_one ): ?>
<li>
<img src="<?php echo $image_one['url']; ?>" alt="<?php echo $image_one['alt']; ?>" />
</li>
<?php endif; ?>
<?php
$image_two = get_field('slide_two');
if( !empty($image_two ): ?>
<li>
<img src="<?php echo $image_two['url']; ?>" alt="<?php echo $image_two['alt']; ?>" />
</li>
<?php endif; ?>
<?php
$image_three = get_field('slide_three');
if( !empty($image_three ): ?>
<li>
<img src="<?php echo $image_three['url']; ?>" alt="<?php echo $image_three['alt']; ?>" />
</li>
<?php endif; ?>
</ul>
</div>
I am using Advanced Custom Fields to generate a slider for my site. Each of the images (attachments) also have a custom field attached to them using the 'Page Link' option, which allows me to associate a link with each image. The code below is pulling through a link, but it is the same for each image, regardless of which one is displayed in the slider (each image should have a different link)
<section class="slideshow">
<?php
$images = get_field('slideshow');
if( $images ):
?>
<?php foreach( $images as $image ): ?>
<figure>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<figcaption>
<h2><?php echo $image['caption']; ?></h2>
<h4>View Case Study</h4>
</figcaption>
</figure>
<?php endforeach; ?>
<?php endif; ?>
</section>
I have also tried making the url_link field specific to the image as below, but this doesn't pull any information.
<h4>View Case Study</h4>
Many thanks in advance.
It turns out that this isn't the best use of the 'Gallery' custom field. Instead, I've turned to using the 'Repeater' field which can have sub-fields in which I can hold image, caption and link information. Code amended as follows.
<section class="slideshow">
<?php if( have_rows('slideshow_slides') ): ?>
<?php while( have_rows('slideshow_slides') ): the_row();
// vars
$image = get_sub_field('image');
$caption = get_sub_field('caption');
$link = get_sub_field('link');
?>
<figure>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<figcaption>
<h2><?php echo $caption; ?></h2>
<?php if( $link ): ?>
<h4>View Case Study</h4>
<?php endif; ?>
</figcaption>
</figure>
<?php endwhile; ?>
<?php endif; ?>
</section>
I'm after a bit of help as I'm having a bit of difficulty trying to put php code in an IF statement:
I have the following code:
<aside class="sidebar top">
<?php if(get_field('quote-text')): ?>
<div id="sidebar-testimonials">
<div class="quote-image">
<?php
$image = get_field('quote_image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
<div id="quote-text">
"<?php the_field('quote-text'); ?>"
</div>
<span>
<?php the_field('quote-name'); ?>
</span>
</div>
<?php endif; ?>
</aside>
I'm trying to put the above code in the below code, where it says "Testimonial off" but not in the "Testimonial On" section.
<?php
$values = get_field( "display_testimonial" );
if ( $values ) {
echo "Testimonial Off";
} else {
echo "Testimonial On";
}
?>
Every time I try I'm getting PHP errors, can anyone help me out?
I have tried to merge the two codes together but I can get the sidebar to show in the else statement now:
<?php
$values = get_field( "display_testimonial" );
if ( $values ) {
?>
<aside class="sidebar top">
<?php dynamic_sidebar( 'About-Sidebar' ); ?>
<?php if(get_field('quote-text')): ?>
<div id="sidebar-testimonials">
<div class="quote-image">
<?php
$image = get_field('quote_image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
<div id="quote-text">
"<?php the_field('quote-text'); ?>"
</div>
<span>
<?php the_field('quote-name'); ?>
</span>
</div>
<?php endif; ?>
</aside>
<?php
} else {
("<?php dynamic_sidebar( 'About-Sidebar' ); ?>");
}
?>
Thanks for your help
You have to be aware of correct opening and closing php tags:
<?php
$values = get_field( "display_testimonial" );
if ( $values ) {
// ADDED CLOSING PHP TAG
?>
<aside class="sidebar top">
<?php if(get_field('quote-text')): ?>
<div id="sidebar-testimonials">
<div class="quote-image">
<?php
$image = get_field('quote_image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
<div id="quote-text">
"<?php the_field('quote-text'); ?>"
</div>
<span>
<?php the_field('quote-name'); ?>
</span>
</div>
<?php endif; ?>
</aside>
<?php
// ADDED OPENING PHP TAG
} else {
echo "Testimonial On";
}
?>
You have error in else part. Replace :
"Testimonial On"
to
echo "Testimonial On";
I managed to get it to work by doing the below:
<?php
$values = get_field( "display_testimonial" );
if ( $values ) {
?>
<aside class="sidebar top">
<?php dynamic_sidebar( 'About-Sidebar' ); ?>
<?php if(get_field('quote-text')): ?>
<div id="sidebar-testimonials">
<div class="quote-image">
<?php
$image = get_field('quote_image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
<div id="quote-text">
"<?php the_field('quote-text'); ?>"
</div>
<span>
<?php the_field('quote-name'); ?>
</span>
</div>
<?php endif; ?>
</aside>
<?php
} else {
echo "<aside class='sidebar top'>";
dynamic_sidebar( 'About-Sidebar' );
echo "</aside>";
}
?>
I am trying to build a Flexible Content which contains 4 possible Layouts (a description, a hero image, a gallery 1col and a gallery 2col). So far I can get the Description and Hero Image subfields to display just fine but the Gallery subfield wont show up on the page. Don't know what I'm doing wrong. Here's the code:
<?php
while(the_flexible_field("flexible_content")): ?>
<?php if(get_row_layout() == "description"): // layout: Description ?>
<div class="proy-desc">
<h2><?php the_sub_field("text"); ?></h2>
</div>
<?php elseif(get_row_layout() == "hero_image"): // layout: Hero Image ?>
<div class="proy-img">
<?php
$image = get_sub_field('image');
elseif( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php ?>
</div>
<?php elseif(get_row_layout() == "gallery_50p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_50p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php ?>
</div>
<?php endif; ?>
<?php elseif(get_row_layout() == "gallery_100p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_100p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php ?>
</div>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
You did not close your if statement. See below:
<?php elseif(get_row_layout() == "gallery_50p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_50p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php ?>
</div>
<?php endif; ?>
Change your section to this:
<?php elseif(get_row_layout() == "gallery_50p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_50p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
Your endif; was in the wrong spot. Everything else looks right, so give this a try.