I have a loop that gets the title, content, and link of all pages that are a child of the current page. Everything is working except I don't know how to get the featured image url for these pages so that I can use it as a background image. You can see in the code where I have commented where I am trying to get the url of the featured image.
Here is my code:
<?php
$mypages = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'menu_order', 'sort_order' => 'asc' ) );
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content ) // Check for empty page
continue;
$content = apply_filters( 'the_content', $content );
$trimmed_content = wp_trim_words( $content, 14, "..." );
?>
<div class="service-box block-grid-item">
<div class="row">
<div class="col-xs-6 col service-image">
<!-- This is where I am trying to get the featured image url -->
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<a href="<?php echo get_page_link( $page->ID ); ?>" style="background-image: url(<?php echo '$feat_image'; ?>)"</a>
</div>
<div class="col-xs-6 col service-body">
<a href="<?php echo get_page_link( $page->ID ); ?>">
<span class="service-title"><?php echo $page->post_title; ?></span>
<span class="service-text"><?php echo $trimmed_content; ?></span>
<span class="service-link">Read more</span>
</a>
</div>
</div>
</div>
<?php }
?>
You're close, but you should be using wp_get_attachment_image_src(), and should remove the quotes from your variable when you echo the source:
$feat_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
<a href="<?php echo get_permalink( $page->ID ); ?>"
style="background-image: url(<?php echo $feat_image; ?>)">
You should also take a look at your HTML markup and make sure it's valid.
on above answer some part of code is missing. here is the complete code.
<?php $feat_image = wp_get_attachment_image_src( get_post_thumbnail_id( 5 ), 'large' );
print_r($feat_image);
?>
<a href="<?php echo get_permalink( '5' ); ?>"
style="background-image: url(<?php echo $feat_image[0]; ?>)"> </a>
Related
Working on a WordPress theme issue, I have an archive page that has a featured post at the top that displays a featured image, post date, and excerpt along with other posts below it.
Running into an issue where the featured post has the correct title, correct image, but incorrect excerpt. It pulls in a different post's text instead.
Any clue as to what is incorrect with the code below?
<?php
$args = array(
'numberposts' => '1' ,
'post_type' => 'post',
'meta_key' => 'post_featured',
'meta_compare' => '=',
'meta_value' => 1
);
$recent_posts = wp_get_recent_posts( $args );
$fID = 0;
foreach( $recent_posts as $recent ) : ?>
<?php $fID = $recent["ID"]; ?>
<div class="blog-listing featured_post">
<a class="blog-image-lg" href="<?php echo get_permalink($recent["ID"]); ?>" style="background-image: url('<?php echo get_the_post_thumbnail_url( $recent["ID"], 'full' ); ?>');">
<span>FEATURED POST</span>
<?php echo get_the_post_thumbnail( $recent["ID"], 'post-thumbnails-big' ); ?>
</a>
<div class="blog-info pull-left">
<h3 class="blog-title"><?php echo $recent["post_title"]; ?></h3>
<span class="blog-date"><?php echo strtoupper(get_the_date('F j, Y')); ?></span>
<p><? echo the_excerpt(); ?></p>
<p class="readmore-wrapper"><a class="readmore" href="<?php echo get_permalink($recent["ID"]); ?>">READ MORE ยป</a></p>
</div>
</div>
Change <? echo the_excerpt(); ?> to <?php echo get_the_excerpt($recent["ID"]); ?>.
the_excerpt() does not work in your case as you are not inside a WP Loop, just a regular for loop.
I have a custom post type called projects and a custom taxonomy attached to that called sectors. I have also added the ability to add an image to each taxonomy using Advanced Custom Fields.
I'm displaying a list of the sectors on the homepage of my site which consists of the title of the taxonomy along with its image here:
So far, so good...
I'm struggling with surrounding either the image or title with the permalink for the taxonomy. I'd like to be able to click on it and it takes me to a page showing all of the projects inside that sector.
My loop is as follows:
<div class="container">
<div class="row no-gutters">
<?php
// loop through terms of the Sectors Taxonomy
$getArgs = array(
'parent' => 0,
'order' => 'DESC',
'orderby' => 'count',
'hide_empty' => false,
);
// get the taxonomy we are going to loop through.
$taxonomy = get_terms('sectors', $getArgs);
$terms = get_terms($taxonomy);
// Start the loop through the terms
foreach ($taxonomy as $term) {
// Get acf field Name
$image = get_field('sector_image', $term );
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
// which size?
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<div class="col-md-6">
<div class="sector-item-container" style="position: relative;">
<div class="box-overlay"><?php echo $term->name; ?></div><!-- box overlay -->
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
</a>
</div>
</div>
<?php } // end foreach ?>
</div>
</div>
I've tried adding tags like this around the elements I want to be clickable:
<a href="<?php the_permalink(); ?>">
</a>
or
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
</a>
But they don't seem to pull the links through...
Can anyone see what I'm doing wrong? I appreciate any insight at all :)
***** EDIT ***************
This seems to show a list of the taxonomies and also apply the link to them... so it's somehow a mix of both I need I think, this following code works but without the images!...
<?php
$taxonomy = 'sectors';
$terms = get_terms($taxonomy); // Get all terms of a taxonomy
if ( $terms && !is_wp_error( $terms ) ) :
?>
<div class="container-flex">
<div class="row no-gutters">
<?php foreach ( $terms as $term ) { ?>
<div class="col-md-6">
<div class="sector-item-container" style="position: relative;">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">
<div>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('page-thumb-mine');
}
?>
<?php
$image = get_field('sector_image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</a>
<div class="sector-item-title">
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
<h4><?php echo $term->name; ?></h4>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php endif;?>
<?php wp_reset_postdata(); ?>
This is from the codex on https://developer.wordpress.org/reference/functions/get_term_link/.
$terms = get_terms( 'species' );
echo '<ul>';
foreach ( $terms as $term ) {
// The $term is an object, so we don't need to specify the $taxonomy.
$term_link = get_term_link( $term );
// If there was an error, continue to the next term.
if ( is_wp_error( $term_link ) ) {
continue;
}
// We successfully got a link. Print it out.
echo '<li>' . $term->name . '</li>';
}
echo '</ul>';
For your specific case, try swapping the above with this: $terms = get_terms( 'sectors' );
Edit:
As for your images, retrieve them with get_field('sector_image', $id_of_term_or_post_or_whatever); Be sure to echo it.
$image = get_field('sector_image', id_of_term_or_post_or_whatever);
echo $image; //this might be $image['url'] or whatever, depending on how you set up ACF
Ok, I think I actually managed to combine the two bits of code like this and it seems to work!
<?php
$taxonomy = 'sectors';
$terms = get_terms($taxonomy); // Get all terms of a taxonomy
if ( $terms && !is_wp_error( $terms ) ) :
?>
<div class="container-flex">
<div class="row no-gutters">
<?php foreach ( $terms as $term ) {
$image = get_field('sector_image', $term );
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$size = 'large';
$thumb = $image['sizes'][ $size ];
?>
<div class="col-md-6">
<div class="sector-item-container" style="position: relative;">
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
<div>
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
</div>
</a>
<div class="sector-item-title">
<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
<h4><?php echo $term->name; ?></h4>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php endif;?>
<?php wp_reset_postdata(); ?>
Taxonomy image
page image
Here, I have categorized my page with different page. In that, I categorized with taxonomy and slug. All the title have different taxonomy as shown in the image. But here I am getting multiple image because it have multiple taxonomy.
So, I just want 8 images as the Business theme are as shown in images and have to display as per the taxonomy.
As you can see the taxonomy count that is 4,4 and 5, So I am getting record like that, but I want to get record as per Business theme, as they are eight but as per taxonomy.
Here what I have tried:
<div class="portfolio-items">
<?php
$terms = get_terms('portfolio_cat');
foreach($terms as $row)
{
$args = array('post_type' => 'portfolio','tax_query' => array(
array(
'taxonomy' => 'portfolio_cat',
'field' => 'slug',
'terms' => array( $row->slug ),
)
));
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
$i=1;
?>
<div class="portfolio-item <?php echo $row->slug; ?> col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>
<?php $large_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'large' ); ?>
<img class="img-responsive" src="<?php echo $url; ?>" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><?php the_title(); ?></h3>
<?php $content = get_the_content(); ?>
<p><?php echo $content; ?></p>
<a class="preview" href="<?php echo $large_url; ?>" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<?php
// End of the loop.
$i++;
endwhile;
endif;
WP_Reset_Query();
}
?>
</div>
I have a website that i'm working on where I need to generate a unique image in header.php for each individual post.
I have this in my index.php:
$pageposts = $wpdb->get_results($querystr, OBJECT);
foreach($pageposts as $ppost){
$ID = $ppost->post_id;
$title = get_the_title( $ID );
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $ID ), 'single_post_thumbnail' );
$t = $thumb[0];
$desc = get_post($ID)->post_content;
$out = get_post_meta($ID,'outbound',true);
$output = "
<div class='ph-sticky' id='phf'>
<span class='icon-x'><i class='fa fa-times icon-xy'></i></span>
<div class='row hunt-row-fp'>
<a class='title' href='$out' target='_blank' rel='nofollow'>$title</a>
<div class='img-featured'><img class='phsi' src='$t'/></div>
<span class='description'>$desc</span>
</div>
</div>";
}
echo $output;
wp_reset_query();
?>
This correctly generates a thumbnail for each post, however in my header.php my code only generates the image of the FIRST post on the page. Here it is:
<!-- post modal -->
<div class="show-post-modal">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' ); ?>
<div class="comments-bg-image" style="background-image: url('<?php echo $image[0]; ?>')" >
</div>
<?php endif; ?>
<div class="comments-header">
I've tried multiple solutions however I can only seem to pull in the first thumbnail, which becomes the background for all posts. Any help would be most appreciated!
i think this will help you a lot.
<?php
$page = get_post($post->ID);
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
if(!empty($post_thumbnail_id)) {
$img_ar = wp_get_attachment_image_src( $post_thumbnail_id, 'full' );?>
<style>
.comments-bg-image{ background-image: url(<?php echo $img_ar[0];?>); }
</style>
<?php } ?>
I'm creating a portfolio which needs to display and thumbnail, title and link to all other portfolio pages using a specific template.
This is what I have so far, which manages to retrieve the page title and the featured image just fine. I'm struggling to retrieve the link to that page as the_permalink() just returns the link of the page you're currently on.
<?php foreach ( $builtins as $page ) : ?>
<div class="fw-col-xs-6 fw-col-md-3 remove-column-padding ">
<div class="casestudy">
<?php if (has_post_thumbnail( $page->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'single-post-thumbnail' ); ?>
<div class="block" style="background: url('<?php echo $image[0]; ?>')">
<h3>
<a href="<?php echo apply_filters( 'the_permalink', $page->post_permalink, $page->ID ); ?>" title="<?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?>">
<?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?>
<span></span>
</a>
</h3>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
Thanks Junaid,
I figured out the answer, get_permalink($page->ID); did the trick!