Issue with ACF fields showing up in WordPress template - php

Okay, I am having the most bizarre issue ever. I have a custom home page template for a WordPress site I am working on.
You can see a screenshot of how I have my ACF fields for this template setup on the backend here.
The issue I am having is that when I try to display the field
<img src="<?php the_field('slide_1_thumb'); ?>" alt="" />
the image doesn't show up at all. I have the Return Value set to 'Image URL', and the odd thing is that it shows the images for
<?php the_field('slide_1'); ?>
just fine with no issues at all.
I'm not sure what I am doing wrong here, but there are no spelling errors at all, for some reason those slide_1_thumb images won't show up. I want to think this is one of those Occam's Razor type of situations where I missed something so simple, but I've gone over this a million times with no luck.
Below you will find a copy of the PHP code for my home-page.php template.
<?php
/**
* Template Name: Home Page
*
* A custom template for the home page.
*
* The "Template Name:" bit above allows this to be selectable
* from a dropdown menu on the edit page screen.
*/
get_header(); ?>
<div id="slideshow-container">
<div id="slideshow" class="slideshow pcfcu-theme">
<div class="slideshow-img" style="background-image: url(<?php the_field('slide_1'); ?>);">
<div class="slideshow-img-inner">
<div class="slideshow-img-text">
<h1><?php the_field('slide_1_title'); ?></h1>
<p><?php the_field('slide_1_description'); ?></p>
</div>
</div>
</div>
<div class="slideshow-img" style="background-image: url(<?php the_field('slide_2'); ?>);">
<div class="slideshow-img-inner">
<div class="slideshow-img-text">
<h1><?php the_field('slide_2_title'); ?></h1>
<p><?php the_field('slide_2_description'); ?></p>
</div>
</div>
</div>
<div class="slideshow-img" style="background-image: url(<?php the_field('slide_3'); ?>);">
<div class="slideshow-img-inner">
<div class="slideshow-img-text">
<h1><?php the_field('slide_3_title'); ?></h1>
<p><?php the_field('slide_3_description'); ?></p>
</div>
</div>
</div>
</div>
</div>
<div id="content-container">
<div id="content-container-inner">
<div id="recent-blog-entries-container">
<div id="recent-blog-entries">
<header><h1>Recent Blog Entries</h1></header>
<?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date');
foreach ($postslist as $post) : setup_postdata($post);
?>
<h2 class="rbe-title"><?php the_title(); ?></h2>
<p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
<div class="rbe-excerpt"><?php the_excerpt(); ?></div>
<?php endforeach; ?>
</div>
</div>
<div id="features">
<header><h1>Features</h1></header>
<a class="goTo1"><div class="feature-thumb"><img src="<?php the_field('slide_1_thumb'); ?>" alt="" /></div></a>
<a class="goTo2"><div class="feature-thumb"><img src="<?php the_field('slide_2_thumb'); ?>" alt="" /></div></a>
<a class="goTo3"><div class="feature-thumb"><img src="<?php the_field('slide_3_thumb'); ?>" alt="" /></div></a>
</div>
</div>
</div>
<?php get_footer(); ?>
Another strange thing is that if you take one of the working ACF images such as
<?php the_field('slide_1'); ?>
it works perfectly and outputs the image, but when you move it down to the 'Features' section of the code to see if it will work in place of one of those small feature thumbnails, it won't work in that portion of the code. It's almost as if that bottom 'Features' portion of the page has some sort of error, but I don't see any errors at all in my code.
In other words, ALL of this code works perfect up until the very last portion of it with the 'feature' thumbnail images. You can see this live on the website here.

When making a new loop using get_posts(), you should end it with the wp_reset_postdata() function to reset your loop's data back to what it was before the get_posts(). So try this:
<div id="recent-blog-entries">
<header><h1>Recent Blog Entries</h1></header>
<?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date');
foreach ($postslist as $post) : setup_postdata($post); ?>
<h2 class="rbe-title"><?php the_title(); ?></h2>
<p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
<div class="rbe-excerpt"><?php the_excerpt(); ?></div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>
Adding the wp_reset_postdata() after your loop should fix this for you.

Okay, I have NO idea what was going on, but all I had to do to fix this was delete the ACF fields on the backend and then recreate them with the EXACT same names as before. Sure enough that fixed it.
So, while I don't have a conclusive answer as to why this was happening, all I can say is that it must have been some sort of odd glitch.

Related

Toggle Show/Hide Configuration on Mobile - ACF Repeater

I am using the ACF Repeater to create rows of images/content and to show/hide when clicked. Everything looks good on desktop screens, with a row of 3 images, when an image is clicked, the hidden div shows up below and the background color toggles on so you know which image's content you are looking at.
My problem, is I am trying to get the same functionality on mobile, but when an image is clicked, the content shows up under the 3rd div. I want to be below the image that was clicked. Since I am using the ACF repeater, my php script creates the parent div (3 across) first and then the hidden divs below.
I don't mind creating a separate html markup for mobile, I just can't figure out how to make it work with the ACF repeater.
<div class="staff">
<?php if (have_rows('staff_rows')):
while (have_rows('staff_rows')): the_row(); ?>
<div class="staff-wrap">
<div class="staff_images">
<?php if (have_rows('staff_images')):
while (have_rows('staff_images')): the_row(); ?>
<a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box">
<img src="<?php the_sub_field('staff_image'); ?>"><div class="image-box"><h3>
<?php the_sub_field('staff_name'); ?></h3>
<h3><?php the_sub_field('staff_position'); ?></h3></div>
</a>
<?php endwhile;
endif; ?>
<?php if (have_rows('staff_bios')):
while (have_rows('staff_bios')): the_row(); ?>
<div class="bios">
<div class="wrap">
<div class="<?php the_sub_field('bio_class'); ?> row"><?php
the_sub_field('bio_text'); ?></div>
</div>
</div>
<?php endwhile;
endif; ?>
</div>
http://toolboxdevmachine.com/TechNiche/about-us
Thanks for your help
I'm guessing you've already figured this out by now, in 2019. It looks like you are missing a few closing <div> tags, as well as ending your while loop and the primary conditional. I broke out the code, indented it and wrote it with the correct closing tags:
<div class="staff">
<?php if (have_rows('staff_rows')):
while (have_rows('staff_rows')): the_row(); ?>
<div class="staff-wrap">
<div class="staff_images">
<?php if (have_rows('staff_images')):
while (have_rows('staff_images')): the_row(); ?>
<a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box">
<img src="<?php the_sub_field('staff_image'); ?>">
<div class="image-box">
<h3><?php the_sub_field('staff_name'); ?></h3>
<h3><?php the_sub_field('staff_position'); ?></h3>
</div>
</a>
<?php endwhile;
endif; ?>
<?php if (have_rows('staff_bios')):
while (have_rows('staff_bios')): the_row(); ?>
<div class="bios">
<div class="wrap">
<div class="<?php the_sub_field('bio_class'); ?> row">
<?php the_sub_field('bio_text'); ?>
</div>
</div>
</div>
<?php endwhile;
endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>

CSS Code Structure with PHP Loops Round 2

Round 2: Trying to figure out why my content looks fine when screen size is under 992px but not when it is over. Everything looks fine in the lower screens but hardly anything is in the right place in full screen size. I have a feeling it's because of the containers inside the loop, but I'm not sure how to properly take them out without it forcing everything into a narrow column from the .col-md-1 container.
<?php get_header(); ?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Blog</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-md-1 text-center">
<p><?php the_time('l, F jS, Y'); ?></p>
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="col-md-5">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive img-hover' ) ); ?>
</a>
</div>
<?php endif; ?>
<div class="col-md-6">
<h3>
<?php the_title(); ?>
</h3>
<p>by <?php the_author_posts_link(); ?>
</p>
<p><?php the_excerpt(); ?></p>
<a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
</div>
<hr>
<?php endwhile; ?>
<div class="navigation"><p><?php posts_nav_link('','« Newer Posts','Older Posts »'); ?></p></div>
</div>
<?php include 'include.php'; ?>
</div>
<?php else: ?>
<p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
Any insight is greatly appreciated :)
As has been mentioned by others, you need to use some additional grid classes.
For your 8 | 4 grid to work on medium and large devices, you would need to use col-md-8 col-lg-8 on your content area and col-md-4 col-lg-4 on your sidebar.
You'll also want to make sure that your blog posts grids have col-lg-* classes alongside their col-md-* classes.
For your layout to work properly on mobile and tablet devices you'll also want to add some col-xs-* and col-sm-* classes.
For more information on the Bootstrap grid system, I would recommend you view: https://getbootstrap.com/css/#grid
My guess is that its because you are using
<div class="col-lg-8">
but not filling the remaining 4 columns at the lg size (and all contained elements are of the-md class so display fine) and also not clearing the float - so at lg size your elements will be floating next to each other and out of position at the large size but not at smaller sizes where they will display as full rows.
you need to rethink your layout (and either have it go full screen) or add a clearfix class to the parent rows to ensure that the floats are cleared before adding the next row.
Always remember that 12 is the magic number - you don't have to use all the columns (and having col-lg-8 is absolutely fine) but if you dont fill the row you need to clear the float from it - Bootstrapp adds a float:left to the column classes - hence giving your dodgy layout only at the lg size.
Just give it a try with
col-xs-
col-md-
col-lg-
col-xl-
if you need any other info just see the bootstrap "grid system"
http://getbootstrap.com/css/#grid-options

Php filtering content wrong way

I am trying to filter content depending on if a field has the value of 'copyclearance'. It is filtering but instead of showing the content with a value of 'copyclearance' it is hiding it and displaying the others. How do I alternate this so that it only displays the content with a value of 'copyclearance'.
<?php while(has_sub_field('team_profile')):
$category = get_sub_field('category');
if($category!='copyclearance'){ ?>
<li class="col-lg-3 teamProfile">
<img src="<?php the_sub_field('user_image'); ?>" class="img-responsive"/>
<h2><?php the_sub_field('profile_name'); ?></h2>
<p class="jobTitle"><?php the_sub_field('category'); ?></p>
<p><?php the_sub_field('bio'); ?></p>
</li>
<?php }
endwhile; ?>
Simply change
if($category!='copyclearance')
to
if($category=='copyclearance')

Wordpress: Retrieve post views in loop?

I have a loop which displays blog post Titles, Excerpts and a Read More link.
I want to also include the amount of views each blog post has in the loop.
I have tried using various view count plugins but none seem to work within a loop.
Would anyone know if there is a way to, say, retrieve this info directly from the database, pairing views with post IDs?
My loop is:
<div id="bloglist">
<?php query_posts('category_name=blog&showposts=6'); while (have_posts()) : the_post(); ?>
<div class="panel">
<div class="panel-wrapper">
<div class="blogstats">
<div>ID: <?php $postid = the_ID(); echo $postid; ?></div>
<div>Views: <?php echo_post_views($postid); ?> </div>
</div><!--BLOGSTATS--->
<div class="excerpt"><?php the_excerpt(); ?></div>
<a class="readmore" href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div><!--BLOGLIST-->
I am currently unsuccessfully using the WP-post-view plugin
I suggest using this plugin
WP-PostViews
i attached a picture for change plugin setting
image WP-PostViews setting
good luck.

Getting the post title in index php in a while loop

I have
<?php while ( have_posts() ) : the_post(); ?>
<div class="boxes-third boxes-first">
<div class="latestthree">
<div class="title">
<?php get_the_title($id); ?> // I am trying to get the post title here but doesn't work
<span class="titlearrow"></span>
</div>
<div class="latestthreeimage">
<a rel="prettyPhoto" title="<?php get_the_title($id); ?>"> /same here
<?php the_post_thumbnail(array(300,133)); ?>
</a></div>
<div class="text">
Here i would like to get the excerpt of the post that is no longer than 25 words
<span class="textarrow"></span>
</div>
</div>
</div>
<?php endwhile; ?>
I am trying to do the above mentioned, but did not worked and on the last one did not find related info. I am using wp 3.7.1. Please help me.
You have used get_the_title() which does not print. To print out the title, add an extra echo:
<?php echo get_the_title(); ?>
Or you can use the_title(), which also prints:
<?php the_title();?>
Try just using,
the_title();
Reference.

Categories