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>
Related
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.
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>
How can I accomplish for Bootstrap to push a column on next line if doesn't fit? This is a link how it is right now: Link to current page
Image of current page:
This is an image how it is right now. I'd like that the third image to drop to the row below if it doesn't fit.
This is code below
<div class="row">
<?php
if($members):
?>
<ul class="team_members">
<li>
<?php foreach($members as $member): ?>
<div class="cl col-xs-12 col-sm-3 col-md-3 col-lg-3">
<?php if($member["member_avatar"]): ?>
<div class="animated">
<div class="member drivprojekt" style="border-radius: 50%; width: 100%; height: 100%; overflow: hidden;">
<img src="<?php echo $member["member_avatar"]["sizes"]["member_thumb"]; ?>" alt="" />
</div>
</div>
<?php endif; ?>
</div>
<div class="cl col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="member_info">
<h3><?php echo $member["member_name"]; ?></h3>
<h4><?php echo $member["member_position"]; ?></h4>
<p><?php echo do_shortcode(nl2br($member["member_description"])); ?></p>
</div>
</div>
<?php endforeach; ?>
</li>
</ul>
<?php endif; ?>
</div>
use flex-box
ul.team_members li{
display: flex;
flex-wrap: wrap;
}
you can use this kind of divs if you want. Its just a suggestion
<div class="cl col-xs-12 col-sm-3 col-md-2 col-lg-3"></div>
replace col-md-3 to col-md-2
how to retrieve data from mysql by id to another page?
Example:
<div class="col-md-12">
<div class="row">
<?php while($posts = mysqli_fetch_assoc($featured)): ?>
<div class="col-xs-12 col-md-6">
<div class="thumbnail">
<img src="<?=$posts['image']; ?>" alt="<?=$posts['title']; ?>">
<span class="pull-right"><?=$posts['date_info'];?></span>
<div class="caption">
<h3><?=$posts['title']; ?></h3>
<p><?php echo substr($posts['description'],0,300); ?></p>
<p>More..</p>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
When i click More button, it would be display more information in another page.