I have found this code for showing thumbnails as recent posts in a widget. It appears in a grid format which I like very much. I would like to add the title of the post below each thumbnail images. I can manage to get the title show by using the_title(); but then it does not stay as a grid but turns into a list. I would appreciate any help. Thanks
The css used is:
.attachment-thumbnail {
height:150px;
width:150px;
padding:5px;
background:#fff;
margin:5px 5px 0 0;
}
Code:
<?php
$my_query = new WP_Query('showposts=12&amp;amp;orderby=rand');
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
?>
<?php
$attachments = get_posts( array(
'post_type' => 'attachment',
'number_posts' => 1,
'post_status' => null,
'post_parent' => $my_query->post->ID,
) );
if ($attachments) {
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php
$thumbnail_id = $attachments[0]->ID;
echo wp_get_attachment_image( $thumbnail_id );
}
endwhile;
}
wp_reset_query();
?>
It'd be helpful to know the CSS attributes that are being assigned to the title text when it's introduced to the page you're creating as that's likely what's turning your grid into a list. I would think the best way forward here is to wrap the thumbnail/title pairs in a div and to make those divs have the attribute "display: inline" so that the divs appear side by side rather than on top of each other.
Related
I'd like to create a wordpress blog about sports, so I created a CPT in the functions.php, and used wp_query to display it on my frontpage. So I created 3 fake articles with random titles, texts and images.
What I'd like to do is something like this
I created a custom CSS, and here's my front-page.php and css file
.item-article-front {
background-color: black;
padding-bottom: 10px;
}
Above is the css, below is the php
<?php
echo '<div class="row" >';
$args = array( 'post_type' => 'sport', 'posts_per_page' => 3 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php echo '<div class="entry-content col-md-4 item-article-front">'; ?>
<?php the_post_thumbnail('medium'); ?>
<?php the_title(); ?>
<p><?php the_excerpt(); ?></p>
<?php
echo '</div>';
endwhile;
echo '</div>';
?>
As you can see I tried to background-color the .item-article-front, but even though the class is actually attributed to the proper div, it won't display as I want. It's probably something stupid, but I can't find what that is. Any idea ?
Thanks !
The code that I'm working on resides in a Twenty Seventeen's child theme, on content-front-page.php. I'm trying to get the most recent posts's featured image in each category (I have three categories) to display in a certain way. Shown below:
Originally, in each colored block. I had this in a php block: <?php
$recentport = new WP_Query(array('category_name' => 'ports-and-terminals', 'numberposts'=> 1, 'posts_per_page'=> 1));
while($recentport->have_posts()): $recentport->the_post();
$urlp = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
?>
<div style="height: 250px; position: relative">
<div style="height:inherit; background: url('<?php echo $urlp;?>'); background-size:cover; "> <!--i-->
<div id="img-overlay" style="height: inherit; background: linear-gradient(#0000ff, #000066); opacity: .7;">
</div>
<span class="feat-title-link">
<a href="<?php the_permalink(); ?>">
<?php the_title_limit(75, '...'); ?>
</a>
</span>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
The featured images populated with the above code. If I add a new post in wordpress and set it to a category with the code above, the new post appears underneath or above the set category, like:
That is not what I want. I want to keep the layout in the 1st picture. So...I changed the code in one color block to this to test: <?php
$args = array('category_name' => 'ebusiness', 'numberposts'=>'1');
$recentcust = wp_get_recent_posts($args);
foreach( $recentcust as $post ){
$linkid = get_permalink($post["ID"]);
$thumb_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
$thumb_url = $thumb_url[0];
echo '' .$post["post_title"].'';
echo (!empty($thumb_url)) ? $thumb_url : 'No thumb!';
}
wp_reset_query();
//$recentebiz = new WP_Query(array('category_name' => 'ebusiness', 'post_per_page'=>1));
//while($recentebiz->have_posts()): $recentebiz->the_post();
//$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
?>
<div id="recentebiz-tile" style="background: url('<?php echo $thumb_url;?>');">
</div>
The above code does not populate the featured image of the recent post in each category. Hence, my problem. Here's my logic:
$args = array();: $args variable holds the parameters for the next line.
$recentcust = wp_get_recent_posts($args): $recentcust variable holds the results of *wp_get_recent_posts* query with my set of parameters.
foreach( $recentcust as $post ){} loops through the results and separates them into $post.
Inside the foreach(){} loop: $linkid = get_permalink($post["ID"]): $linkid is the link with the $post's ID.
Inside the foreach(){} loop: $thumb_url = wp_get_attachment_image_src(
get_post_thumbnail_id($post->ID), 'thumbnail' ): gets the featured image that is associated with the $post's ID?
Inside the foreach(){} loop: $thumb_url = $thumb_url[0]: gets the 1st picture (with the array position at 0)?
Outside of the foreach(){} loop: echo $thumb_url[0] to display featured image.
But it's not displaying it. I want the featured image to display in each code block. I know I'm going about this the hard way, but I want to know how the code and Wordpress works. Am I missing something? Thanks in advance.
Resources I've used are to come up with this code:
Wordpress.org Codex: wp_get_recent_post
Wordpress.org Codex: wp_get_attachment_image_src
StackOverflow Question + Answers
And some others...
I've figured it out...somehow. For future reference, I got the code snippet from here. Then changed it to this:
<?php
$args = array('category_name' => 'ebusiness', 'numberposts'=>'1');
$posts = get_posts( $args );
foreach($posts as $post) {
$thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array('220','220'), true );
$thumbnail_url = $thumbnail_url[0];
echo ( !empty($thumbnail_url) ) ? $thumbnail_url : 'No thumb!';
}
wp_reset_query();
?>
Then I used another foreach loop to bring back the permalink and the post title with the same args parameters in a different query.
I just wanted get help in understanding the functions involved bringing back pictures. I know there's a better way of doing this. Just need help figuring that out now.
In this code of yours
$recentport = new WP_Query(array('category_name' => 'ports-and-terminals', 'numberposts'=> 1, 'posts_per_page'=> 1));
while($recentport->have_posts()): $recentport->the_post();
$urlp = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
?>
<div style="height: 250px; position: relative">
<div style="height:inherit; background: url('<?php echo $urlp;?>'); background-size:cover; "> <!--i-->
<div id="img-overlay" style="height: inherit; background: linear-gradient(#0000ff, #000066); opacity: .7;">
</div>
<span class="feat-title-link">
<a href="<?php the_permalink(); ?>">
<?php the_title_limit(75, '...'); ?>
</a>
</span>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
As what can I see, you are getting ports-and-terminals latest post then display it within HTML, and the while loop continues doing so.
What I think you should do is closing While loop after getting the recent post immediately.
You can do it all at once like so...
<?php
$args = array('category_name' => 'ebusiness', 'numberposts'=>'1');
$posts = get_posts( $args );
foreach($posts as $post) {
$thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array('220','220'), true );
?>
<div style="height: 250px; position: relative">
<div style="height:inherit; background: url('<?php echo $thumbnail_url[0];?>'); background-size:cover; "> <!--i-->
<div id="img-overlay" style="height: inherit; background: linear-gradient(#0000ff, #000066); opacity: .7;">
</div>
<span class="feat-title-link">
<a href="<?php get_permalink($post->ID); ?>">
<?php echo wp_trim_words( $post->post_title, 5, '...' );?>
</a>
</span>
</div>
</div>
<?php
}
?>
I'm new to php (' still struggle with syntax :-) ') and wordpress and I'm building a web-site where I am looping to my category page all the images tagged with that category. I need the images to be automatically linked to its parent post which should be a Clients page essentially. The code i'm using right now links me to the same category page instead of client page.
This is the code i'm using now to pull the images.
<?php
$query_images_args = array(
'cat' => 3,
'post_type' => 'attachment',
'post_mime_type' => 'image,video',//img & video files include
'post_status' => 'inherit',
'orderby' => 'ACS',
'posts_per_page' => 30,
);
$query_images = new WP_Query( $query_images_args );
if($query_images->have_posts()) :
while($query_images->have_posts()) :
$query_images->the_post();
?>
<a href="<?php get_permalink( $parent_id ); ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php echo $images = wp_get_attachment_image( $query_images->posts->ID, 'thumbnail' ); ?>
</a>
<?php endwhile; ?>
<?php else : ?>
<p>No media file yet</p>
<?php endif;
/* Restore original Post Data */
wp_reset_postdata(); ?>
I hoped that this part <a href="<?php get_permalink( $parent_id ); ?> will link me to the clients page but it still links me to category page.
I think that the I have something wrong with hierarchy or the way do the linking part.
I have also checked this resource but it does not seem to do anything :
https://wordpress.stackexchange.com/questions/188736/get-the-title-and-url-of-the-attachment-parent-post
I think that you are using a variable $parent_id that isn't set.
Try replacing:
<a href="<?php get_permalink( $parent_id ); ?>"
with:
<a href="<?php get_permalink( $post->post_parent ); ?>"
So I tried to make a custom post type called 'showcase' and created a few posts in this custom post type. The problem is that when I click on a 'product' it should showup in a lightbox instead of going to the thumbnail url.
This is the code I am using:
<section id="showcase">
<?php
$args = array( 'post_type' => 'showcase', 'posts_per_page' => -1 ); $the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
$it = 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$terms = get_the_terms( $post->ID , 'showcase_category');
$it ++;
if ($it == 6) {
echo '</section><div class="cta-block"><h2>Live model drawing</h2><p>Drawing from a live model, gives you the opportunity to draw what you see instead of drawing what you think about.</p>View courses</div><section id="showcase">';
}
?>
<a class="entry-showcase" href="<?php the_post_thumbnail_url(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php wp_reset_postdata();
endwhile; else :
endif; ?>
</section>
Also, I tried using a few plugins which automaticly detect jpg, gif etc but for some reason they are not working for thumbnail images.
Some plugins I tested:
Easy FancyBox,
Responsive Lightbox,
Simple Lightbox,
Also, I am not getting any errors it just goes straight to the media file in url instead of staying on the same page and showing the image in a lightbox.
Thanks in advance (:
You can maybe use the Fresco-Lightbox. After implementing you can add the "fresco"-class to any imagelink and open it in a lightbox:
<a class="entry-showcase fresco" href="<?php the_post_thumbnail_url(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
Also see the Fresco documentation.
I am trying to get the link from the database in WordPress and user should direct to that link on a single click.
I have almost achieved everything but there is one weird problem I am facing.
In my custom php file I have this code.
<div style =" margin-bottom: 40px; "><div><li><a href="<?php echo $array_var ?>">
<?php echo get_the_post_thumbnail( $post_id, 350,'' ); ?></br><h2><?php the_title(); ?></h2></a><?php echo get_the_excerpt();?></li></div></div>
Here ahref tag is coming as "website custom page link/database-link". Whereas at other places it is coming only as link from the database (which is the correct case for me.)
I will explain it little more.
<?php $query = new WP_Query( array(
'post_type' => 'post',
'category_name' => 'Trending',
'posts_per_page' => 8
) );
$i=0;
while ($query->have_posts()) : $query->the_post();
$post_id= $query->post->ID;
$array_var=$link_array[$i];
**echo $array_var;**
?>
<ul>
<div style =" margin-bottom: 40px; "><div><li>**<a href="<?php echo $array_var ?>">**
<?php echo get_the_post_thumbnail( $post_id, 350,'' ); ?></br><h2><?php the_title(); ?></h2></a><?php echo get_the_excerpt();?></li></div></div>
<?php
$i++;
endwhile; ?>
</ul>
I have marked two places in the code in asterisk. Both have same code but behaviour is different. At first place I am getting link as, say, www.google.com and at second place I am getting it as /www.google.com.
I want it to be www.google.com only.
For reference, the corresponding page is www.coolfuzz.com, you can see that in the first row above every thumbnail is the correct link(which is not clickable btw) but thumbnail has incorrect link.
Please tell me how to correct this?
You should add the http:// to the beginning