I'm trying to pull an image to show in a slider, using ACF. No matter what I try, it won't work. Here's the backend code:
<?php get_header();?>
<?php $banner = get_field('banner');?>
<!-- Carousel Start -->
<div class="container-fluid p-0 wow fadeIn" data-wow-delay="0.1s">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<?php $image = get_field('slider_image_1'); if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<h1 class="display-2 text-light mb-5 animated slideInDown"><?php echo $banner['headline_1'];?></h1>
Our Services
</div>
</div>
</div>
</div>
</div>
I've tried different codes. Image will not show.
Related
Can you please advise which is the most appropriate way to append classes dynamically to the 's below based on the ID of the post?
The goal is to add a class to some of the div's depending on the ID of the post being even or odd.
<div class="service__preview">
<div class="row mb-5">
<div class="col-4">
<div class="row">
<div class="col-5 // here I want to dynamically add order-2 if get_the_ID() is even">
<div class="service__preview service__preview-id">
<?php echo get_the_ID() + 1;?>
</div>
</div>
<div class="col-7 // here I want to dynamically add order-1 if get_the_ID() is even">
<div class="service__preview service__preview-icon">
<div class="icon__container icon__container-3x">
<div class="icon__container icon__container-2x">
<div class="icon__container icon__container-1x">
<i class="<?php echo get_post_meta($post->ID, 'service_icon', true); ?> fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<a class="service__preview service__preview-title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
<p class="service__preview service__preview-description"><?php the_content(); ?></p>
<a class="service__preview service__preview-link" href=" <?php the_permalink(); ?>"><p>Learn more</p></a>
</div>
</div>
Looking forward to your suggestions.
FYI: the project is a WordPress template.
So I'm converting bootstrap site to Wordpress and post cards don't want to stack horizontally... I know there should be foreach loop which will loop through posts but I don't know how to set it up...
<?php while(have_posts()) {
the_post();
?>
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
</div>
</section>
<?php } ?>
while is also a loop. Inside the loop, you can just put the repeated code. As I've understood your code than you need to something like this:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
?>
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
Also, better to move code for one block to another file for example partials/post.php:
<div class="col-md-4">
<div class="card-columns">
<div class="card">
<img src="<?php the_post_thumbnail_url('medium')?>" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
<?php the_title(); ?>
</h4>
<small class="text-muted">Written by <?php the_author_posts_link(); ?></small>
<hr>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</div>
And update your current file:
<section id="blog" class="py-3">
<div class="container">
<div class="row">
<?php while( have_posts() ) {
the_post();
get_template_part( 'partials/post' );
} ?>
</div>
</div>
</section>
I'm trying to display a custom post type ' products' here:
The issue is, in the close future they will have 7 products which will leave one on a row on its own.
Is there a way I can alter the number of columns dynamically, So if there are 6 and under product it displays the posts I 3 columns, but if there are 7 items, it will display the posts section in 4 columns etc etc...
Or, is there a way I can allow the user to choose how many columns it displays in manually from the backend? I guess using something like Advanced Custom fields.
Ill be using a bootstrap based grid with a layout like this:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
so if either needs to change this structure dynamically based on the number of posts OR based on the number a user selects from a dropdown in the backend, to:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
Can anyone point me in the right direction to achieve this? I'm wondering if I'm overthinking it or indeed under-thinking it!
Thanks so much for looking!
PS - Heres what's I'm trying currently but it's not working...
<div class="container-flex our-products-strip">
<div class="lines-background-overlay" style="background-image: url(<?php bloginfo('stylesheet_directory'); ?>/images/background-stripes2.png);"></div>
<div class="container strip-padding">
<h2>Our Products</h2>
<hr class="hr-blue-more-bottom-space">
<div class="row justify-content-center">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $data = new WP_Query(array( 'post_type' => 'products' ));?>
<?php if(count($data) < 6 ){?>
<div class="col-md-6 col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<a href="<?php the_permalink(); ?>">
<div class="click-overlay"></div>
</a>
<div class="logo">
<?php
$image = get_field('logo_light');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<?php }
else{ ?>
<div class="col-md-3 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<a href="<?php the_permalink(); ?>">
<div class="click-overlay"></div>
</a>
<div class="logo">
<?php
$image = get_field('logo_light');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<?php } ?>
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
</div>
</div>
If you are using php then definitely you can put if condition to perform the check
below is the example
<?php if(count($data) <= 6){?>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
<?php }
else{ ?>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
<? } >
I want to add the post thumbnail to the span but I am not to sure how to do that what is my best way to achieve the following i tried
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="single_service_item">
<div class="service_icon transition3s">
<div class="icon_border">
<?php the_post_thumbnail();?>
<span style=" background-image: url("/wp-content/uploads/2016/05/chrome_2017-11-09_10-46-33.png");"></span>
</div>
</div>
<div class="service_text">
<h5><?php the_title();?></h5>
<p><?php the_content();?></p>
</div>
</div>
</div>
But the following is the style of it
You can see the site here http://ubtanz.solitudesoftware.co.uk/ its the circle image i want to replace with the image of the post thumbnail
You can use get_the_post_thumbnail_url() to get post thumbnail url.
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="single_service_item">
<div class="service_icon transition3s">
<div class="icon_border">
<span style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>');"></span>
</div>
</div>
<div class="service_text">
<h5><?php the_title(); ?></h5>
<p><?php the_content(); ?></p>
</div>
</div>
</div>
I have custom post type of doctors. When the name is clicked it will take to the single page of the doctor. Below there is a small div which displays a number of posts. I dont want the post which is already displayed at the top to be at the bottom.
this is the code i have done:
<?php foreach($dr as $doc){ ?>
<div class="col-md-4">
<img src="<?php echo get_the_post_thumbnail_url($doc->ID);?>" class="img-reposive img-circle dc-img mb50" alt="" />
</div>
<div class="col-md-8">
<div class="dr-single-box">
<h3 class="dr-single-tile"><?php echo $doc->post_title; ?></h3>
<div class="sub-tile"><?php echo get_post_meta($doc->ID,'Department',true); ?></div>
<div class="dc-single-social">
<p><?php echo $doc->post_content; ?></p>
make an appointment
<div class="row">
<div class="col-md-4">
<h3 class="mb10">Qualifications</h3>
<p><?php echo get_post_meta($doc->ID,'Qualifications',true); ?></p>
</div>
the bottom portion looks like this :
<?php $arg=array('post_type'=>'doctors','post_status'=>'publish','posts_per_page'=>4,'offset'=>1) ;
$doctor_data=get_posts($arg);
/*var_dump($doctor_data);*/ ?>
<div class="lightbg ptb80">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1 class="heading-title">Doctors</h1>
</div>
</div>
<div class="row">
<?php foreach($doctor_data as $doctor) { ?>
<div class="col-lg-3 col-md-3">
<div class="dc-style-box">
<img src="<?php echo get_the_post_thumbnail_url($doctor->ID); ?>" class="img-responsive" alt="Doctor 1" />
<div class="dc-style-inner">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
<h5><?php echo $doctor->post_title; ?></h5>
<span><?php echo get_post_meta($doctor->ID,'Department',true);?></span>
</div>
</div>
</div>
can anyone shed some light to guide me ? ?
<?php
$cur = get_the_ID();
$arg=array('post_type'=>'doctors','post_status'=>'publish','posts_per_page'=>4,'offset'=>1, 'post__not_in' => $cur) ;
$doctor_data=get_posts($arg);
/*var_dump($doctor_data);*/ ?>
<div class="lightbg ptb80">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1 class="heading-title">Doctors</h1>
</div>
</div>
<div class="row">
<?php foreach($doctor_data as $doctor) { ?>
<div class="col-lg-3 col-md-3">
<div class="dc-style-box">
<img src="<?php echo get_the_post_thumbnail_url($doctor->ID); ?>" class="img-responsive" alt="Doctor 1" />
<div class="dc-style-inner">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
<h5><?php echo $doctor->post_title; ?></h5>
<span><?php echo get_post_meta($doctor->ID,'Department',true);?></span>
</div>
</div>
</div>
Hi, You should add 'post__not_in' to exclude current post to be fetched in second loop. Try this code. Let me know if you need any more assistance.
Thanks.
According to your comment you wish to display random posts therefore use below $arg instead of yours.
$arg = array('post_type'=>'doctors',
'post_status'=>'publish',
'posts_per_page'=>4,
'offset'=>1,
'orderby' => 'rand'
);