Im having trouble displaying my background image.
I have created a loop to display my posts and then trying to set background image, however it's breaking somewhere? Below is my code within the loop.
<div class="artist-feed">
<?php
$artistloop = new WP_Query( array( 'post_type' => 'artist') );
if ( $artistloop->have_posts() ) :
while ( $artistloop->have_posts() ) : $artistloop->the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="single-artist" style="background-image: url(<?php echo the_post_thumbnail(); ?>);">
<div class="artist-info">
<h2><?php echo get_the_title(); ?></h2>
</div>
</div>
</a>
<?php endwhile;
endif;
wp_reset_postdata();
?>
</div>
Your issue is with the call to the_post_thumbnail(). This method actually displays the thumbnail, not the URL for it. See here:
https://developer.wordpress.org/reference/functions/the_post_thumbnail/
To get the URL to your thumbnail, try get_the_post_thumbnail_url(). This should be what you need. See here:
https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/
Related
Can Somebody Help how to pull alt text from wordpress images in the following code??
<?php $logos = get_field('upload_logos');
$size = 'full';
if( $logos ): ?>
<div>
<div>
<?php foreach( $logos as $logo ): ?>
<div>
<div class="ccrc-logo-box-inner"><img src="<?php echo wp_get_attachment_url( $logo['ID'], $size ); ?>" alt=""></div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
You are using get_field() function, so I guess you have 'Advanced Custom Fields' plugin. You want to get the data of a field with type of image. So looking at the documentation:
https://www.advancedcustomfields.com/resources/image/
You can access the alt text from the field object, the same way you already did it with $logo['ID'] before.
<img src="<?php echo wp_get_attachment_url( $logo['ID'], $size ); ?>" alt="<?php echo $logo['alt']; ?>">
You are using the wp_get_attachment_image() function to output your url
Documentation of wordpress tells us you can pass the alt as a parameter to fetch and output it:
https://developer.wordpress.org/reference/functions/wp_get_attachment_image/#parameters
I've seen plenty of articles in and around how to do this but after hours of trying to achieve this using transients, I don't seem to be any closer to the dream!
Essentially I want to use wordpress transients to get 3 random posts and display them in a 'featured' module for 24hrs on my homepage. The 3 posts need to be a mix of native and custom post types.
The code I have so far is:
<div class="container">
<div class="featured-wrapper">
<div class="section-title">featured</div>
<?php
if ( ( $my_query = get_transient('my_query_cached') ) === false ) :
global $wp_query;
$args = array_merge( $wp_query->query, array(
'post_type' => array('post', 'recipe'),
'posts_per_page' => 3,
'orderby' => 'rand'
)
);
$my_query = new WP_Query($args);
set_transient('my_query_cached', $my_query, 24 * HOUR_IN_SECONDS);
endif;
?>
<?php if ( $my_query->have_posts() ) :
while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<div class="card-wrapper">
<a href="<?php the_permalink(); ?>">
<div class="card-img">
<img src="<?php the_post_thumbnail(); ?>"/>
</div>
</a>
<div class="card-cut"></div>
<div class="card-content">
<span class="card-category">treats</span>
<h1><?php echo get_the_title(); ?></h1>
</div>
</div><!--END card wrapper 1-->
<?php endwhile; wp_reset_postdata(); wp_reset_query(); ?>
<?php else: ?>
<div>
<h1>Sorry...</h1>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
</div>
<?php endif; ?>
</div><!-- END featured wrapper-->
Currently this code is returning all posts in the database so I believe there's an issue in the first section of this but can't seem to put my finger in it.
Massive thank you in advance for any help.
UPDATE
Fixed. Code above it actually fine but worth keeping in mind that any edits WON'T show once the page has run once as the transient has already been set. Worth setting the refresh rate to 1 * MINUTE_IN_SECONDS for testing.
I pasted your code into one of my sites' frontpage.php and it worked fine straight away. Change your expiry on your transient to 5 or 10 seconds to test it.
I'm creating a home page that will pull in different posts to display them in a custom format. I can get most of the information I want but I haven't been able to to get the featured image for any of them. I set a featured image for all three posts and I'm using my own theme that's a child of the twentysixteen theme. I get has_post_thumbnail returning false on all of them even though I've uploaded a featured image for each post. I only have this on local right now but here's the code I'm using to get the posts:
<?php
global $post;
$myposts = get_posts('numberposts=3&category=1');
foreach($myposts as $post) :
setup_postdata( $post );?>
<div class="article-box">
<div class="article-box-image">
<?php if (has_post_thumbnail($post->ID)) { ?>
has one
<?php } else { ?>
not working
<?php } ?>
<img src="<?php the_post_thumbnail_url(); ?>">
</div>
<div class="article-box-title">
<?php the_title(); ?>
</div>
<div class="article-box-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="article-box-edit">
<?php edit_post_link('Edit'); ?>
</div>
</div>
<?php endforeach; ?>
Use a wp query:
<?php
$args = array(
'cat' => '1',
'posts_per_page' => '3',
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="article-box">
<div class="article-box-image">
<?php //check for thumbnail
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
//Give up and start new life picking apples
} ?>
</div>
<div class="article-box-title">
<?php the_title(); ?>
</div>
<div class="article-box-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="article-box-edit">
<?php edit_post_link('Edit'); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
And then double check that thumbnails are supported in your theme's functions.php
add_theme_support( 'post-thumbnails' );
I finally realized that the "preview" post parameters were the problem. I was viewing the page through preview page. I don't know why images won't work in preview mode but apparently it won't.
I'm building a page that is displaying a list of posts (potentially they will be randomly displayed) in a grid.
These posts are a custom post type, and each post is assigned to a single taxonomy for organization.
For each post I'd like to display an associated number. I don't mean the post ID, as that isn't specific enough. Basically, I'd like to treat the custom post type as its own list of posts. So the first post in that post type will be post #1, the second would be #2, and so on.
As well, if it's possible to do this by taxonomy, that would be even better. But I'd settle for just numbering the posts in the custom post type in general.
My solution so far is this: create a function in functions.php that loops through the custom post type, and assigns a number (starting at 1 for the first post) to each post as a custom field. This function runs whenever the page that displays the posts is loaded. So that function runs first in its own loop, and then the page does a normal loop and gets each number.
This solution works cosmetically. I'm getting the result that I want. However, it's not very efficient as it will run any time the page is loaded.
Is there a better way to do this? Perhaps a way to automatically assign a number to a post whenever a post is published? I understand that if a post is deleted, there'd be a skipped number. That's acceptable.
I hope this is clear.
I edited this for clarity, as well as updating the current solution which has changed. I also removed the block of code I have here because it's no longer necessary.
I added 2 lines below, one setting the post count, and one printing the number sequentially look for: $postNumber
<ul id="uselist">
<?php
query_posts( array(
'post_type' => 'use',
'order' => 'desc',
'posts_per_page' => 6
) );
if ( have_posts() ) :
$postNumber = 1; //add a sequential post number!
while ( have_posts() ) : the_post();
$usecategory = get_term_by('id', get_field('use_category'), 'usecategory');
?>
<li>
<div class="use" style="border-bottom:15px solid <?php the_field('category_colour', $usecategory); ?>;">
<div class="useimage" style="background-image:url(<?php the_field('image'); ?>);">
<?php if (get_field('display_vimeo_video') == 'yes') { ?>
<div class="playicon"><img src="<?php echo bloginfo('template_url'); ?>/images/playicon.png" /></div>
<?php } ?>
</div>
<div class="useinfo">
<div class="usecatimage">
<img src="<?php the_field('category_image', $usecategory); ?>" />
</div>
<div class="usecatandtitle">
<h2 class="usecat"><?php echo $usecategory->name; ?> / # <?php echo $postNumber++; ?> //POST NUMBER WILL INCREASE SEQUENTIALLY HERE</h2>
<h3 class="usetitle"><?php the_title(); ?></h3>
</div>
<div class="usename">
<?php the_field('name'); ?>, <?php the_time('M d'); ?>
</div>
</div>
</div>
</li>
<?php
endwhile;
else :
endif;
?>
</ul>
Try this code
EDITED CODE
Add the function in your functions.php file
function Get_Post_Number($postID){
$temp_query = $wp_query;
$postNumberQuery = new WP_Query('orderby=date&posts_per_page=-1');
$counter = 1;
$postCount = 0;
if($postNumberQuery->have_posts()) :
while ($postNumberQuery->have_posts()) : $postNumberQuery->the_post();
if ($postID == get_the_ID()){
$postCount = $counter;
} else {
$counter++;
}
endwhile; endif;
wp_reset_query();
$wp_query = $temp_query;
return $postCount;
}
This is your loop
<ul id="uselist">
<?php
query_posts( array(
'post_type' => 'use',
'order' => 'desc',
'posts_per_page' => 6
) );
if ( have_posts() ) :
while ( have_posts() ) : the_post();
$currentID = get_the_ID();
$currentNumber = Get_Post_Number($currentID);
$usecategory = get_term_by('id', get_field('use_category'), 'usecategory');
?>
<li>
<div class="use" style="border-bottom:15px solid <?php the_field('category_colour', $usecategory); ?>;">
<div class="useimage" style="background-image:url(<?php the_field('image'); ?>);">
<?php if (get_field('display_vimeo_video') == 'yes') { ?>
<div class="playicon"><img src="<?php echo bloginfo('template_url'); ?>/images/playicon.png" /></div>
<?php } ?>
</div>
<div class="useinfo">
<div class="usecatimage">
<img src="<?php the_field('category_image', $usecategory); ?>" />
</div>
<div class="usecatandtitle">
<h2 class="usecat"><?php echo $usecategory->name; ?> / Use <?php echo $currentNumber ; ?></h2>
<h3 class="usetitle"><?php the_title(); ?></h3>
</div>
<div class="usename">
<?php the_field('name'); ?>, <?php the_time('M d'); ?>
</div>
</div>
</div>
</li>
<?php
endwhile;
else :
endif;
?>
</ul>
I have not tried this code, but it should work.
I guess you could pull this off easily using Custom Fields. For each post in your custom post type, add a custom meta field, say post_number and manually enter the value for that field.
And, display the value in your page using get_post_meta().
<ul id="uselist">
<?php
query_posts( array(
'post_type' => 'use',
'order' => 'desc',
'posts_per_page' => 6
) );
if ( have_posts() ) :
while ( have_posts() ) : the_post();
$usecategory = get_term_by('id', get_field('use_category'), 'usecategory');
?>
<li>
<?php echo get_post_meta($post->ID, 'post_number', true); ?>
<div class="use" style="border-bottom:15px solid <?php the_field('category_colour', $usecategory); ?>;">
<div class="useimage" style="background-image:url(<?php the_field('image'); ?>);">
<?php if (get_field('display_vimeo_video') == 'yes') { ?>
<div class="playicon"><img src="<?php echo bloginfo('template_url'); ?>/images/playicon.png" /></div>
<?php } ?>
</div>
<div class="useinfo">
<div class="usecatimage">
<img src="<?php the_field('category_image', $usecategory); ?>" />
</div>
<div class="usecatandtitle">
<h2 class="usecat"><?php echo $usecategory->name; ?> / Use #</h2>
<h3 class="usetitle"><?php the_title(); ?></h3>
</div>
<div class="usename">
<?php the_field('name'); ?>, <?php the_time('M d'); ?>
</div>
</div>
</div>
</li>
<?php
endwhile;
else :
endif;
?>
</ul>
I would like to display a few post titles from a specific category on homepage. First one have to be with a small thumbnail and excerpt and rest of them just title. Below this section I would like to have a link clicking on which will show all the posts under this category.
like this http://i.stack.imgur.com/N5jUA.jpg
As arslaan ejaz said, you can use wp_query. But I think that answer is not enough for your question. You want to show first post with thumbnail and others with titles only right?. It can be done by php count. Here is what I am using on my site. check below code, it will show first post with thumbnail, title and excerpt, other three posts with title only from category ID 1.
<div class="main-div">
<div class="thumbnaildiv">
<?php $count=1; $query = new WP_Query('showposts=4&cat=1&offset=0'); if ($query->have_posts()) : ?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<?php if($count==1){ ?>
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a>
</h2>
<div class="thumb">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
<p><?php the_excerpt(); ?> ...</p>
</div>
</div><!--div with thumbnail, title, and excerpt end-->
<div style="clear:both"></div>
<div class="without-thumb">
<ul>
<?php } if($count>1){ ?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a>
</li>
<?php } if($count==4){ ?>
</ul>
<?php } ?>
<?php $count++; endwhile; else: endif; wp_reset_postdata(); ?>
</div><!--div without thumbnail end-->
</div><!--main div end-->
The div's I have used is for information purpose only. You can change and style it as desired.
Use WP-Query:
<?php
$args = array('cat'=>1);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
echo '<li>' . get_the_title() . '</li>';
echo '<li>' . the_permalink() . '</li>';
echo '<li>' . the_excerpt() . '</li>';
}
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
It will list all posts of category 1, with title, permalink, and excerpt
More info: wp_query
I can recommend you to add 'Elementor' plugin. With this plugin, you can add 'read more' and split your text. If you add 'read more' in the beginning of your text then there will be shown only title and under the title a 'read more' link.
Here is the Screenshot