I need to edit my Wordpress child theme (based on Twenty Twenty One) archives.php template so that it grabs the first image added within any Post, not the Featured Image as that is being used by another plugin (and as such has to be different dimensions than what we want here). I've tried a few different solutions but nothing seems to work, I am guessing this may be to do with the fact I am using Gutenberg blocks.
I did however get the following code to work for the posts I had already uploaded (I have set out the most relevant line of code between two spaces within the archiveContainer div), but bizarrely after then creating some new test posts the code is no longer working and is just grabbing the Featured Images again, which is not what we want.
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<?php $attachment = array_values( get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'numberposts' => 1 ) ) ); ?>
<h2 class="archiveTitle" id="post-<?php the_ID(); ?>">
<?php the_title(); ?>
</h2>
<div class="archiveContainer">
<?php if( $attachment ) echo '<img src="' . wp_get_attachment_url($attachment[0]->ID) . '" class="post-attachment" />'; ?>
</div>
<?php get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) ); ?>
<?php endwhile; ?>
It could well be that I have inadvertently changed or deleted something of course - but, any ideas how I can get this working consistently?
Related
I am having trouble getting the image attachment to show by the title & excerpt on a Wordpress page in a list. I am using a new WP_Query to generate the list, consisting of 3 posts, from certain categories. Inside the loop, I'm trying to get the first image of each post, retrieving their image IDs with a 'get_children' array (the posts do not have featured images, so I can't use the_post_thumbnail). Using console.log, I can see that I am at least getting the image url for the first item in the list, but not for the others. And even with the one I am getting, I can't get it to display using wp_get_attachment_thumb_file(). Here's the code I have so far:
<div class="inner-left">
<ul class="blog-posts-ul">
<?php
global $wp_query;
$wp_query = new WP_Query(array('order' => 'DESC', 'posts_per_page' => 3, 'cat' => '21,23,689,741,1589'));
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<?php $attachment = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image' ) );
if ( $attachment ) {
$attachment = current( $attachment );
$image_url = wp_get_attachment_thumb_url( $attachment->ID );
$attachment_id = attachment_url_to_postid( $image_url );
echo '<script>console.log("thumb: "' . $image_url . ')</script>';
}; ?>
<?php the_title(); ?><?php the_excerpt(); ?>
<?php wp_get_attachment_thumb_file( $attachment->ID ); ?>
</li>
<?php endwhile; endif; ?>
</ul>
<?php // Reset Query
wp_reset_query(); ?>
</div><!-- inner-left -->
The test site is at http://testsite.humortimes.com/ if you want to have a look. Scroll down, it's formatted as 3 squares, below the 'Latest Humor Times Faux News Headlines' section. Right now, it's not formatted very well, I plan on having two columns, there's just one showing.
Any help would be appreciated. Thank you.
Stop using console log and start using var_dump ($image_url) ; that will print whatever you have directly on that element.
I dont quite get why you cant use post thumbnail?
After a lot of frustration, I found this nifty function that does just what I want. It queries the database to find the first image of the post, which I guess is the key I was missing. It also tests for a featured image first, so that's taken care of as well. I put the function in my child function file, and just call it when needed on a page.
If you use it, be aware you need to add $size = 'thumbnail'; because, although her description says it'll return a thumbnail, it was returning full size images. This variable is used throughout the function, though, so you just need to give it a value.
Thanks, Amberweinberg!
hopefully my description will be clear!
I'm basically trying to create an area for portfolio work to be displayed. I've created a custom post type in Wordpress and i'd like to bring it through to the front-page.php. I have designated areas for where i'd like the work to be displayed (see image). The dark grey areas are where i'd like to place the portfolio items ONLY. Each grey area should show 1 portfolio item
I'm using this script to pull in the custom post type:
<?php
$args = array( 'post_type' => 'Portfolio', 'posts_per_page' => 4 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="home-recent-thumb">'; the_post_thumbnail(); echo '</div>';
echo '<div class="home-recent-title">'; the_title(); echo '</div>';
echo '<div class="home-recent-copy">'; the_excerpt(); echo '</div>';
endwhile;
?>
How do I designate the areas in the php so that it shows 4 posts inside the correct element?
Since your layout isn't necessarily conducive to the traditional "loop" functionailty - meaning, you aren't placing the results next to each other - and you haven't mentioned any outside libraries (like masonry or isotope) - I would just do individual queries for each of the four squares.
For the first custom post type square - it would like:
$query = new WP_Query( 'post_type' => 'Portfolio', 'posts_per_page' => 1 );
And the second (to nth) would look like:
$query = new WP_Query( 'post_type' => 'Portfolio', 'posts_per_page' => 1, 'offset=1' );
Where your offset continues to increase. In my mind this continues to stay dynamic and is simple enough for four posts. Else your jumping into just a bunch of additional logic with the other squares.
<?php
$portfolioPosts = get_posts([
'post_type' => 'Portfolio',
'posts_per_page' => 4
]);
//first section
?>
<div class="home-recent-thumb"><?php the_post_thumbnail($portfolioPosts[0]->ID); ?></div>
<div class="home-recent-title"><?php echo $portfolioPosts[0]->post_title ?></div>
<div class="home-recent-copy"><?php echo $portfolioPosts[0]->post_excerpt; ?></div>
<?php
//later in code
//second section
?>
<div class="home-recent-thumb"><?php the_post_thumbnail($portfolioPosts[1]->ID); ?></div>
<div class="home-recent-title"><?php echo $portfolioPosts[1]->post_title ?></div>
<div class="home-recent-copy"><?php echo $portfolioPosts[1]->post_excerpt; ?></div>
//et cetera
I was trying to make a template to show all used image in wordpress blog, and link to the post which has the image attached, like a gallery or portfolio page, but I can not get the link nor title to the post single page.
I've made this far:
<?php
$post_parent = get_post($post->ID, ARRAY_A);
$parent = $post_parent['post_parent'];
$paged = ( get_query_var( 'paged' ) ) ? get_query_var('paged') : 1;
$attachments = get_children( array( 'post_parent' => $post_id, 'post_type' => 'attachment', 'orderby' => 'menu_order ASC, ID', 'order' => 'DESC', 'paged' => $paged, 'posts_per_page' =>9,) );
?>
And the foreach:
<?php foreach($attachments as $id => $attachment) :
$img_title = $attachment->post_title;
$img_caption = $attachment->post_excerpt;
$img_description = $attachment->post_content;
?>
So I looked up the codex and found how to get the img url like this:
<?php if ( have_posts() ) : ?>
<li>
<?php $image_attributes = wp_get_attachment_image_src( $id, full ); // returns an array
if( $image_attributes ) {?>
<img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo $img_alt; ?>" title="<?php echo $img_title; ?>" />
<?php
echo $post->post_parent;
?>
<p><a href="<?php
echo get_post($id)->post_parent; ?>">link</a></p>
<?php } ?>
</li>
<?php endif; ?>
<?php endforeach; ?>
These codes above works great, it shows all images attached in an ul li list.
Then I want to add a link to the parent POST in the loop, using something in the foreach like:
<p>Post link</p>
but it returns a link to nothing or returns a "0", if I "echo $id", it return the attachment id but not the Post ID (Post id is what I want).
Please how to get the parent post ID or simply get the post link and title in the loop above? Help!
Thank you!
Find the answer now.
I use the normal query to get all posts, and that query search for the img tag in content( or its featured image) then show that image in loop, optionally to show excerpt below that image, then this template is done.
I was thinking about getting attachments in media library but it is not the right way, some media are not even attached to any posts so it’s a dead end.
But to query post and make that query select posts with “<img” is somewhat way more better than query attachments, and easy to understand too.
I am creating a website that integrates a portfolio which uses custom post types, this was done based off of this tutorial.
So far it is exactly what I am looking for and works great except for one small detail. In order to fetch the posts from the new custom post type the author of the tutorial used the query_posts() codex. So the top of my portfolio page looks like this:
<?php
/* Template Name: Portfolio */
get_header();
query_posts('post_type=portfolio&posts_per_page=10');
?>
What I gather is that this declares "get posts from "post type" portfolio and show 10 per page". My problem is that I can't go get content from my portfolio page. It seems that now my portfolio page only fetches the content from the custom post type, and I can't use:
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; // end of the loop. ?>
to get content from the actual page.
This is what I am trying to do, I've replaced:
query_posts('post_type=portfolio&posts_per_page=10');
with:
add_action( 'pre_get_posts', 'add_my_post_types_to_query' );
function add_my_post_types_to_query( $query ) {
if ( is_page( 8 ) && $query->is_main_query() )
$query->set( 'post_type', array( 'portfolio' ) );
return $query;
}
This seems like the right track, but it stills doesn't work. I'm not getting the posts from my custom post type.
Any ideas how I could modify this? I am also still learning so being clear with explanations would be greatly appreciated.
Thank you!
Editing the pre_get_posts will replace the original query and you will not have the content for your page at all. I would only recommend going this approach if you only wanted to display the content of your portfolio post type and not the content of your portfolio page.
For general post queries it is recommended to use WP_Query or get_posts.
http://codex.wordpress.org/Class_Reference/WP_Query
http://codex.wordpress.org/Template_Tags/get_posts
If you use the WP_Query function the wp_reset_postdata() will restore the post data back to the original so you can get the content of your original page.
$args = array(
'posts_per_page' => 10,
'post_type' => 'portfolio',
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
Now you will be able to use the original loop to show the content of your page
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; // end of the loop. ?>
Usually, I stick my query posts in a variable, like so:
$catid = get_cat_ID('My Category Name');
$args = array(
'posts_per_page' => 5,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'category' => $catid
);
$posts_array = get_posts($args);
Then you can loop it like so:
<?php foreach ($posts_array as $post) : setup_postdata($post);?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<?php endforeach; ?>
Finally, to access your page content you can use the variable $post, it's automatically set by wordpress. No need to add any more code than this to access your page content.
<?php foreach( $posts as $post ) : setup_postdata($post); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<?php endforeach; ?>
The foreach loop for your page content is a little overkill, and there is a better way to do it (most likely at least), but I haven't been bothered to look into it further yet! It works though!
A site I made required the display of WordPress post information (title, tags, thumbnails). The PHP code which gets this information from published posts works on my localhost and the post data displays properly.
I just uploaded the site onto my host's server, configured the WP settings to be identical to my localhost WP install, and while 99% of the site works as expected, the information for posts does not display.
There are 3 test posts on the live site currently. I can see 3 article tags through the DOM inspector, so the WP loop to retrieve posts works fine. However, within each article tag, the entry-content tag, which should contain the data, is empty.
All other php code is executing but this little block. Anyone have some advice on resolving the issue?
Here are images (yellow highlight showing the article tags):
First one of the live server, the empty div:
http://imgur.com/rF229Wk
Second on of the localhost, data displaying fine:
http://imgur.com/tMCOg0S
Here is the relevant code:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php
$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
if ( $images ) :
$total_images = count( $images );
$image = array_shift( $images );
$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
?>
and just below that code is the PHP that displays the thumbnail...(the PHP display code for the other post data like title is omitted). None of the data displays on the site:
<figure class="gallery-thumb">
<span class="image-wrapper">
<?php echo $image_img_tag; ?>
All these divs and the figure tags are closed properly further below the page.
Thanks for any help.
Looks like the $images variable is empty (or false) and your if statement doesn't end before <figure>.
Images are attached to a post on upload only. If you use an image from the media center for featured image it won't be attached to the post. You can retrieve this image by getting the meta field using get_post_meta( $post->ID, 'featured_image' ) or if you are using the featured image you can also use get_the_post_thumbnail( $post->ID ).