Front end challenge.. insights needed.
Using acf to create custom landing pages > landing.php (works as expected)
function landing_do_acf_content() {
if( have_rows('landing_page_content') ) { ?>
<section class="landing-content">
<?php while ( have_rows('landing_page_content') ) : the_row();
if( get_row_layout() == 'intro_text' ) { ?>
<?php include('partials/blocks/intro_text.php');?>
<?php }
else if( get_row_layout() == 'highlights' ) { ?>
<?php include('partials/blocks/highlight.php');?>
<?php }
Most blocks are constructed to allow for some user customization.
including color and layout (most work as expected)
<?php include('color.php'); ?>
<section id="<?php the_sub_field( 'headline' ); ?>" class="">
<div class="container p-16 mx-auto flex flex-wrap <?php echo $c1; ?> <?php echo $bg1; ?>">
<?php if ( get_sub_field('headline') ) : ?>
<div class="block min-w-full">
<h3 class="my-10 mt-0 font-bold tracking-normal text-center is-all-caps <?php echo $c1; ?> "><?php the_sub_field( 'headline' ); ?></h3>
</div>
<?php endif; ?>
<div class="flex flex-wrap flex-grow -m-4">
<?php if ( have_rows( 'highlight' ) ) : ?>
<?php while ( have_rows( 'highlight' ) ) : the_row(); ?>
<div class="p-4 lg:w-1/2 md:w-full sm:w-full">
<p class="text-8xl font-black text-center <?php echo $c1; ?>"><?php echo get_sub_field('large_text'); ?>
<p class="text-4xl font-regular text-center <?php echo $c1; ?>"><?php echo get_sub_field('small_text'); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
</div>
</section>
Here’s the challenge.
I have a color.php which grabs the background choice
and adds a background and text color to the class=
<?php
$bg = get_sub_field('background_color');
if ($bg == '#000000') :
$bg1= 'white-c-bg';
$c1 = 'charcoal-c-t';
elseif ($bg == '#96c0ce'):
$bg1 = 'babyblue-c-bg';
$c1 = 'white-c-t';
elseif ($bg == '#000000'):
$bg1 = 'black-c-bg';
$c1 = 'white-c-t'; ?>
<?php else : ?>
<?php
$bg1 = 'transparent';
$c1 = 'charcoal-c-t'
;?>
<?php endif; ?>
The color.php works great on most of the blocks.
But I have a block that queries pages and the color.php doesn’t work as expected.
<?php
include('color.php');
$link = get_sub_field('site_link');
$linktext = get_sub_field('site_link_text');
global $post;
$position = get_sub_field('random_profile_type');
$args = array(
'post_type'=>'profile',
'showposts'=>'1',
'orderby'=>'rand',
'tax_query'=> array( array(
'taxonomy' => 'profile_type',
'field' => 'slug',
'terms' => $position,
'operator' => 'IN',
), ),
);
$testimonials=new WP_Query($args);
while ($testimonials->have_posts()) : $testimonials->the_post();
// Display post details here. Example: the_title(), the_permalink(), etc.
{
$affiliation = get_field( 'affiliation' );
$cred = get_field( 'credentials' );
$image = get_field( 'headshot' );
$snippet = get_field( 'testimonial-snippet' );
$testimonial = get_field( 'testimonial' );
$short = get_field( 'testimonial-short' );
$page = get_the_ID();
$title = get_the_title($page);
}
?>
<section>
<div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20 <?php echo $bg1; ?> <?php echo $c1; ?>">
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
<div>
<p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
<?php if($testimonial && !$short) { ?><p><?php echo $testimonial; ?></p>
<?php } ?>
<?php if($testimonial && $short) { ?><p><?php echo $short; ?></p>
<?php } ?>
</p>
</div>
</div>
<div class="max-w-lg mb-10 mx-auto md:mb-12">
<div class="flex">
<?php echo wp_get_attachment_image( $image, 'medium',null, array( 'class' => 'object-cover w-40 h-40 mr-4 rounded-full shadow' ) ); ?>
<div class="flex flex-col justify-center">
<p class="text-lg font-bold"><?php echo $title; ?></p>
<?php if( $cred && $affiliation ) { ?>
<p class="text-sm text-gray-800"><?php echo $cred; ?></p><p class="twnb-affiliation-2"><?php echo $affiliation; ?></p>
<?php } ?>
<?php if( $cred && !$affiliation ) { ?>
<p class="text-sm text-gray-800"><?php echo $cred; ?></p>
<?php } ?>
<?php if( $affiliation && !$cred ) { ?>
<p class="text-sm text-gray-800"><?php echo $affiliation; ?></p>
<?php } ?>
</div>
</div>
</div>
</div>
</section>
<?php
endwhile;
wp_reset_postdata();
?>
Pretty much a noob here. Am I trying to do something that isn’t possible to do?
