Thumbnail for posts duplicates on front page - php

The featured thumbnail image is supposed to just show the single thumbnail image of the post but instead it pulls every post image and displays them instead for every post. Instead of just the post thumbnail. This is the code for it and also what it looks like on the page:
<?php $featured_image = new WP_Query('page_id=ID'); ?>
<?php while ($featured_image->have_posts()) : $featured_image->the_post(); ?>
<?php if (function_exists('has_post_thumbnail') && has_post_thumbnail()) { ?>
<?php $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(302, 170)); ?>
<div class="the-image">
<img src="<?php echo $img_src[0]; ?>" />
</div>
<?php }; ?>
<?php endwhile; ?>
thats the code for servering the image and heres what happens on the main page (I have 2 posts currently and a featured test image for both of them, the scaling works but as you can see, it puts both images, on both posts...)
I'm not sure if it needs to be inside my loop for the title and excerpt, or outside of it (currently inside).
Here is the full code for the recent posts sidebar:
<div class="col-lg-4 d-none d-lg-block">
<h3 style="text-align: center; font-weight: 700;">Recent Posts</h3>
<?php
$result = wp_get_recent_posts(array(
'numberposts' => 10,
'category' => '',
'post_status' => 'publish',
));
foreach( $result as $p ){
?>
<div class="paddingarea text-dark">
<?php if (function_exists('has_post_thumbnail') && has_post_thumbnail()) { ?>
<?php $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(302, 170)); ?>
<div class="the-image">
<img src="<?php echo $img_src[0]; ?>" />
</div>
<?php }; ?>
<a class="card-title" href="<?php echo get_permalink($p['ID']) ?>" style="font-weight: 600;"><?php echo $p['post_title']?></a><br />
<p class="card-text"><?php echo excerpt(10); ?></p>
</div>
<?php
}
?>
</div>

Try this, it's simple and it's working for me:
<?php
$result = wp_get_recent_posts(array(
'numberposts' => 10,
'category' => '',
'post_status' => 'publish',
));
foreach( $result as $p ){
?>
<div class="paddingarea text-dark">
<div class="the-image">
<img src="<?php echo get_the_post_thumbnail_url($p['ID'], array(302, 170)); ?>" />
</div>
<a class="card-title" href="<?php echo get_permalink($p['ID']) ?>" style="font-weight: 600;"><?php echo $p['post_title']?></a><br />
<p class="card-text"><?php //echo excerpt(10); ?></p>
</div>
<?php
}
?>

Related

Wordpress featured images won't display

I am creating a widget in wordpress that pulls through child pages content (thumbnail/Featured image, title and excerpt) from the 'About Page' and displays them on the 'Homepage'. All content except the thumbnail/featured displays correctly. The thumbnail/featured image displays in grey, is is viable in other post and in the back end. when I inspect the code the url for the image does not seem to be pulling through.
Can anyone assist with this issue?
$pgs = array(
'parent' => '344',
'post_type' => 'page',
'post_status' => 'publish',
'posts_per_page' => 99,
'orderby' => 'menu_order'
);
$pages = get_pages( $pgs );
echo $args['before_widget'];
?>
<div class="text-center">
<h2 class="blessed-widget-title">title</h2>
<div class="text-center" id="services">
<?php foreach( $pages as $page ) { ?>
<div class="our-services-post-box col-md-4 col-sm-6 col-xs-6" id="child-<?php the_ID(); ?>">
<a href="<?php echo get_permalink($page->ID); ?>" rel="bookmark" title="<?php echo $page->post_title; ?>">
<div class="service-thumbnail background-image" style="background-image: url(<?php echo blessed_get_attachment($page->ID) ?>) ">
<img class="image-invisible" src=" <?php echo blessed_get_attachment($page->ID); ?> ">
</div>
<h2><?php echo $page->post_title; ?></h2>
</a>
<p><?php echo get_the_excerpt($page->ID) ?></p>
</div><!--services-->
<?php } ?>
</div>
</div>
<?php
echo $args['after_widget'];
I found 2 missed semicolons.
1st was here:
<div class="service-thumbnail background-image" style="background-image: url(<?php echo blessed_get_attachment($page->ID) ?>) ">
2nd was here:
<p><?php echo get_the_excerpt($page->ID) ?></p>
Maybe it caused the problem. Also Quotes are not necessary in an url, but I added it to see what will be the result.
Try to use the following one instead.
$pgs = array(
'parent' => '344',
'post_type' => 'page',
'post_status' => 'publish',
'posts_per_page' => 99,
'orderby' => 'menu_order'
);
$pages = get_pages( $pgs );
echo $args['before_widget'];
?>
<div class="text-center">
<h2 class="blessed-widget-title">title</h2>
<div class="text-center" id="services">
<?php foreach( $pages as $page ) { ?>
<div class="our-services-post-box col-md-4 col-sm-6 col-xs-6" id="child-<?php the_ID(); ?>">
<a href="<?php echo get_permalink($page->ID); ?>" rel="bookmark" title="<?php echo $page->post_title; ?>">
<div class="service-thumbnail background-image" style="background-image: url('<?php echo blessed_get_attachment($page->ID); ?>') ">
<img class="image-invisible" src=" <?php echo blessed_get_attachment($page->ID); ?> ">
</div>
<h2><?php echo $page->post_title; ?></h2>
</a>
<p><?php echo get_the_excerpt($page->ID); ?></p>
</div><!--services-->
<?php } ?>
</div>
</div>
<?php
echo $args['after_widget'];
Also try to review your CSS Classes related to Featured images.

php template code - all properties page display issue

My page: http://kevinkang.ca/en_US/all-properties/ was broken yesterday.
But I can't find any problem on these. Can anyone help me to find out the problem?
<div class="grid-x all-properties-page">
<?php
$args = array( 'category__not_in' => array( 4, 8, 9, 10 ) , 'posts_per_page' => -1 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $i=0; ?>
<div class="medium-12 cell padding-top-page">
<div class="home-data description-title-price">
<div class="grid-container">
<div class="grid-x">
<div class="medium-6 cell">
<?php the_title(); ?>
</div>
<div class="medium-6 cell text-right">
<?php the_field('price'); ?>
</div>
</div>
</div>
</div>
<a href="<?php the_permalink(); ?>"><div class="grid-x">
<ul class="images3">
<?php
//Get the images ids from the post_metadata
$images = acf_photo_gallery('3-images', $post->ID);
$img3=0;
if( count($images) ):
//Cool, we got some data so now let's loop over it
foreach($images as $image):
$id = $image['id']; // The attachment id of the media
$title = $image['title']; //The title
$caption= $image['caption']; //The caption
$full_image_url= $image['full_image_url']; //Full size image url
$full_image_url = acf_photo_gallery_resize_image($full_image_url, 1562, 760); //Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id);
$img3++;
?>
<?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
<li style="background-image: url(<?php echo $full_image_url; ?>);" class="img-list<?php echo $img3; ?>">
<?php if( !empty($url) ){ ?></a><?php } ?></li>
<?php endforeach; endif; ?>
</ul>
<?php foreach ( get_the_category() as $value) {
$i++; ?> <h3 class="cat<?php echo $i; ?> <?php echo $value->name; ?>"><?php echo $value->name;} ?></h3>
</div></a>
<div class="grid-container pr-address-bg">
<div class="address-cont price-address">
<?php the_field('price'); ?>
<?php the_field('address_first_line'); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
I see you have a lot of problems in your HTML ( inside , multiple tags. First check your HTML with https://validator.w3.org/. It looks the main parts of the problems come from header.php. I would have a look.

CPT output on page breaks other fields

Not sure what i have done wrong here but i noticed that everything dissapears below my code.
If i take fields and put them in top of template then everything works fine.
Code
<?php
$blacklabelpost = array( 'post_type' => 'black-label', );
$loop = new WP_Query( $blacklabelpost );
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php
$images = get_field('photos_of_product'); // get gallery
$image = $images[0]; // get first image in the gallery [1] for second, [2] for third, and so on.
if( $image ) : // only show the image if it exists ?>
<div class="col-sm-3 col-md-4 col-lg-3 product-col">
<a href="<?php the_permalink() ?>">
<img src="<?php echo $image['url']; ?>" class="img-responsive"/>
</a>
<div class="row text-center">
<div class="col-xs-12">
<h3 class="UC sTitle"><?php the_title()?></h3>
<div class="border-line center"></div>
<div class="subtitle about_product_short UC"><?php the_field('about_product_short'); ?></div>
</div>
<div class="col-xs-12">
Läs mer
</div>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
Below i just have couple of if get field.
Example
<?php if( get_field('full_width_photo_footer') ): ?>
<div class="F-W sida archive">
<?php
$image = get_field('full_width_photo_footer');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" class="img-responsive footer-fullwidth-img"/>
<?php endif; ?>
</div>
<?php endif; ?>
As soon as i delete this 'full_width_photo_footer' starts to work again:
<?php
$mypost = array( 'post_type' => 'white-label', );
$loop = new WP_Query( $mypost );
?>
What am i doing wrong ?

Get Post / Page URL - Wordpress

I have the following code
<div id="featured-posts" class="container_12">
<?php
global $post;
$myposts = get_posts('numberposts=3&category=12');
foreach($myposts as $post) :
?>
<?php global $post; ?>
<?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
<?php
$colors = array("#000000", "#949c51", "#571c1e", "#f36533", "#782a80", "#f6a41d", "#ed1b24");
$randomColor = $colors[array_rand($colors)];
?>
<a href="LINK OF THE POST"><div class="grid_4 featured-home" style="background: url(<?php echo $src[0]; ?> ) !important;">
<div class="featured-details" style="border-color: <?php echo $randomColor; ?>;">
<h2 style="color: <?php echo $randomColor; ?>;"><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</div>
<div class="featured-lower" style="border-color: <?php echo $randomColor; ?>;"></div>
</div></a>
<?php endforeach; ?>
</div>
This takes the most recent 3 posts, in category 12 and displays them in a div. I want this whole div to link to the post. You'll see where it says LINK OF THE POST. Can anyone help me get the URL in here?
Thanks
dvent
Wordpress provides a method for that : the_permalink();
Look at http://codex.wordpress.org/The_Loop.
You can also use the get_permalink($id) method.
http://codex.wordpress.org/Function_Reference/get_permalink

Adding 'Featured Imgs' to my Wordpress Slider / rotate through?

I'm trying to finish 'themeing' my Wordpress / jQuery / JS slider; I currently have it where it successfully grabs the most recent Wordpress posts, but doesn't fully cycle through them in the main 'featured window'? (JavaScript error?) Also, I've yet to be able to successfully add the 'featured_image' to allow setting the image used in the 'featured window'.
I've gotten this far via some help at the base question: 'Themeing' my Slider in WP with PHP
Below is the code I'm using:
<?php
/**
* #package WordPress
* #subpackage Default_Theme
*/
$pagePtr="home";
include # ("header.php");
//get_header(); ?>
<div id="content">
<?php
/**
* #package WordPress
* #subpackage Default_Theme'
*/
//get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<!--Your slider code goes here-->
<?php
$args = array(
'numberposts' => 5,
'orderby' => 'post_date',
'order' => 'DESC'
);
$posts_array = get_posts( $args );
?>
<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$i = 1;
foreach ($posts_array as $post) : setup_postdata($post);
?>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php echo $i; ?>"><img src="<?php echo $featured_image; ?>" alt=""/><span><?php the_title(); ?><br /><p class="info" style="padding-left:10px;"><?php the_excerpt(); ?></p></span></li>
<?php $i++;
endforeach; ?>
</ul>
<?php
$i = 1;
foreach ($posts_array as $post) : setup_postdata($post);
?>
<!-- First Content -->
<div id="fragment-<?php echo $i; ?>" class="ui-tabs-panel" style="">
<img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />
<div class="info" >
<h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>" >read more</a></p>
</div>
</div>
<?php $i++; endforeach; ?>
</div>
<!--Your slider code goes here-->
<!-- End Featured Lists Image Slider -->
<?php endif; ?>
<?php if($featured_image= get_post_meta($post->ID, "featured_image", true)) { ?>
<div class="postThumbnail"><img src="<?php echo $featured_image; ?>" height="190" width="125" border="0" /></div>
<?php } ?>
The Live Version via my test site: http://tinyurl.com/7q3o97u
Notice how the right side boxes are working correctly, and bringing in the recent posts - but for some reason the main area / left larger window, is not acting same?? How can I get this working properly??
I'm not sure it's the fundamental cause of your problem, but this line:
<img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />
is causing a problem in the markup. It renders:
<img src="<img width="940" height="340" src="http://www.osmproduction.com/RIF/wp-content/uploads/2012/03/MaxBrooksRecordedAttacks-940x340.png" class="attachment-slider_image wp-post-image" alt="MaxBrooksRecordedAttacks" title="MaxBrooksRecordedAttacks" />" alt="" />
which isn't right. the_post_thumbnail returns a full HTML img tag, not just the image URL. Try replacing
<img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />
with
<?php the_post_thumbnail('slider_image'); ?>

Categories