I am using the ACF purely so the user can upload images to a predefined location and have assigned the page rules accordingly. Everything seems to be fine on the WP back-end, with the three images uploaded to the fields. However, on the font end, nothing apart from blank box is appearing at all where the images should be. Looking at the source that WP is outputting, there is only blank code:
<img src="" class="middle" alt="image1"/>
This is the loop I am using:
<?php query_posts("posts_per_page=1&post_type=page&page_id=168"); if (have_posts()) :
while ( have_posts() ) :
the_post(); ?>
<!--If you want to refer to the child of parent page, use "post_parent=" -->
<li>
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
<img src="<?php the_field('image_1'); ?>" class="middle" alt="image1"/>
View More
</li>
<?php endwhile; ?>
<!-- post navigation -->
<?php else: ?>
<!-- no posts found -->
<?php endif; ?>
<?php wp_reset_query(); ?>
It is important to note that I am not pulling the images from another page. I just want the images to relate to the template & page I am working on.
Make sure the image field is outputting the id or url of the image link.
<?php if(get_field('YOUR FIELD NAME')): while(has_sub_field('YOUR FIELD NAME')): ?>
<img class="logo" src="<?php the_sub_field('image_1'); ?>" />
<?php endwhile; endif; ?>
I just needed to nominate the home page id the function:
<img src="<?php the_field('image_2', '245'); ?>" class="middle" alt="image2"/>
you can use get_the_field() to get the right value of the field,
<img src="<?php get_the_field('image_1'); ?>" class="middle" alt="image1"/>
Related
We are using your Advanced Custom Fields plug-in which by default provides a custom field group called Flexible Content Template. I'm trying to develop a new webpage with a new group of custom fields that is created only for this page named B2B landing page. A couple of sections in this page can be created by using an existing layouts called "Icon Columns" and "text and full image" from Flexible Content Template custom fields group. Question is how can I access the contents of these two layouts separately in the template file so that they are displayed when I need them to? Why I'm asking this is because in our project I see that we display flexible content field data with this line <?php get_template_part('template-parts/fields/field--flex-content'); ?> This brings contents from the Flexible Content field everywhere you call this function, not just the specific layout data meant for the section. I need to be able to display contents selectively. Below is the code for you to have a look and see if you can suggest some solution.
<!-- START HERO -->
<?php
$hero = get_field('hero');
$hero_h1 = $hero['hero_-_h1'];
$hero_h2 = $hero['hero_-_h2'];
$background = $hero['hero_-_background_options'];
$image = $background['background_-_image'];
$link = $hero['cta'];
?>
<?php get_header(); ?>
<div class="corp-hero relative mb-row">
<?php if($image): ?>
<div class="corp-hero-img relative no-touch select-none">
<picture>
<source media="(max-width: 480px)" srcset="<?php echo($image['sizes']['small']); ?>">
<source media="(max-width: 1024px)" srcset="<?php echo($image['sizes']['medium']); ?>">
<source media="(max-width: 1280px)" srcset="<?php echo($image['sizes']['large']); ?>">
<source srcset="<?php echo($image['sizes']['xlarge']); ?>">
<img src="<?php echo($image['sizes']['xlarge']); ?>" alt="<?php echo $image['alt']; ?>" />
</picture>
</div>
<?php endif; ?>
<div class="wrap-x">
<div class="inside">
<?php if(stripos($hero_h1, "Do Not Display") === FALSE): ?>
<h1 class="mb0 color-tan-dark">
<?php if( $hero_h1 ): echo $hero_h1; else: echo get_the_title(); endif; ?>
</h1>
<?php endif; ?>
<?php if( $hero_h2 ): ?>
<h2 class="mb0 mt2 alt-heading h4">
<?php echo $hero_h2; ?>
</h2>
<?php endif; ?>
</div>
</div>
<?php if ( $link ) : ?>
<div class="inside mt2x">
<div class="center-xs">
<a href="<?php echo $link['url']; ?>" class="btn cta-btn-purple" role="button" target="<?php echo $link['target']; ?>" title="<?php echo $link['title']; ?>">
<?php echo $link['title']; ?>
</a>
</div>
</div>
<?php endif; ?>
</div>
<!-- END HERO -->
<!-- START FAST, EASY ORDERING SECTION -->
// I need to only display contents from 'icon-columns' layout
<?php get_template_part('template-parts/fields/field--flex-content'); ?>
<!-- END FAST, EASY ORDERING SECTION -->
<!-- START HOW OUR GIFTS MAKE A SIGNIFICANT IMPACT Section -->
// I need to only display contents from 'text and full image' layout
<?php get_template_part('template-parts/fields/field--flex-content'); ?>
<!-- END HOW OUR GIFTS MAKE A SIGNIFICANT IMPACT Section -->
I created a pop-up lightbox gallery in WordPress using Advanced Custom Fields and while all of the base functionality works, for some reason the lightbox appears to be showing all photos attached to the gallery_photos field across multiple posts instead of just the photos attached to the single post.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery" id="post-gallery-<?php echo get_the_ID(); ?>">
<?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; ?>
You can see a sample of how this is working at the following link to the dev site. There's a list of products, defined as a custom post type, and each product has an associated lightbox gallery of photos accessible via the camera icon at the end of each row.
However, if you click the icon you'll actually see photos for all products, not just the one you clicked. Any idea what I'm doing wrong?
I have ACF set up in WP with a Gallery field. Currently I am displaying my images as follows:
<p><?php echo get_the_content(); ?></p>
<?php $images = get_field('gallery_images');
if( $images ): ?>
<div>
<ul>
<?php foreach( $images as $image ): ?>
<li class="portrait float">
<img src="<?php echo $image['url']; ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif;
?>
I have also installed the Simple Lightbox Plugin but have been unsuccessful so far. How do I add the URL link of my ACF Gallery images. I have tried wrapping my image tag in a link tag with rel="lightbox" and several other variations including:
<img rel="lightbox[gallery_images] src="<?php echo $image['url']; ?>" />
Is there any way I can enable Attachment Display Settings for my ACF Gallery images in my WP post. I think this might be handy to have?
Any help is much appreciated :)
I used the following which worked.
<img rel="lightbox[gallery_images]" src="<?php echo $image['url']; ?>" />
All my images are full size so didn't need the following at all:
echo $image_large[0];
I have added pages on my wordpress.com blog and I want the main page should appear like
is there any widget or way to do this?
Here's I suggest you do:
Create a category. E.G "secondary-pages "
Create your secondary pages as posts and assign the category to all of them.
Call the category on the home page as shown below and have them display in grids.
$query = new WP_Query('category_name=secondary-pages');
if($query->have_posts()) : while($query->have_posts()) : $query->the_post(); ?>
<div id="content">
<?php the_title('<h2 class="post-title">','</h2>') ?>
<?php echo excerpt(35); ?>...
<span class="link">
<a href="<?php echo get_permalink(); ?>">
continue Reading → </a>
</span><!-- End link -->
</div>
<!-- End Content -->
<?php endwhile; ?>
<?php endif; ?>
<?php } ?>
Note: you can use different category names for the pages but that will increase your page size because you's have to call em individually.
On Wordpress, how can I show the latest post (one only) on the homepage with full text, comments and all?
I basically would like the homepage to be the latest post as if I clicked it and got the post url (like: domain/wordpress/?p=18 for example).
Here's what I would do:
In your WordPress admin panel, under
Settings in the sidebar, click
Reading.
Make sure the top radio button under
Front Page Displays ("Your latest
posts") is selected.
Now change the number in the box next
to "Blog pages show at most" to 1.
Now, make sure that the "Full text"
radio button next to "For each
article in a feed, show" is selected.
That should do the trick, but let me know if it doesn't work for you. :)
Thanks guys for the reply. I did what you've suggested TheLibzter :-)
windyjonas, your answer was partial right. What eventually did the trick is:
<?php query_posts(); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div class="entry"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
<?php
global $withcomments; $withcomments = true;
comments_template( '', true );
?>
Redirect from home.php:
if (have_posts()):
while (have_posts()):
the_post();
wp_redirect(get_permalink());
endwhile;
endif;