I have set up the header on my WordPress to work wonderfully on the home page. The header is supposed to change to the newest post that I have created and it works.
The problem is that my header does not show up on any pages. I feel that I am missing a bit of code (specifically a conditional statement) that would disable the change and just let pages have the featured image that I set on the dashboard.
The code:
<?php
$recent = get_posts( array('numberposts' => 10) );
$src = false;
if(is_home()){
foreach($recent as $p){
if( has_post_thumbnail( $p->ID ) ){
$src = wp_get_attachment_image_src( get_post_thumbnail_id($p->ID), array( 5600,1000 ), false, '' );
}
$title = get_the_title();
$date = get_the_date();
break;
}
}
?>
<div class="hero-image" style="background-image: url('<?php echo esc_url( $src[0] ) ?>')">
<div id="hero-text" class="thumbnail-text">
<h1><?php echo $title?></h1>
<h2><?php echo $date?></h2>
</div>
</div>
I've tried
if(!is_home()){
result
}
else{
result
}
And tried to put it in the CSS, but it broke.
I was able to solve the issue with the following:
<?php
$recent = get_posts( array('numberposts' => 10) );
$src = false;
if(is_home()){
foreach($recent as $p){
if( has_post_thumbnail( $p->ID ) ){
$src = wp_get_attachment_image_src(
get_post_thumbnail_id($p->ID), array( 5600,1000 ), false, '' );
}
$title = get_the_title();
$date = get_the_date();
break;
}
} else if(!is_home()) {
if( has_post_thumbnail( $p->ID ) ){
$src = wp_get_attachment_image_src(
get_post_thumbnail_id($p->ID), array( 5600,1000 ), false, '' );
$title = get_the_title();
$date = get_the_date();
}
}
?>
Related
I have a custom field called "images". I would like to show this custom field as a picture. How can I do that?
https://prnt.sc/l0eyv3
I've written a php code, but it shows only 1 image, it doesn't show any other images.
my code:
<?php $images = get_post_meta(get_the_ID(), 'images', true); ?>
<?php if ( $images && is_single() ): ?>
<?php
$images = get_post_meta( $post->ID, 'images' );
if ( $images ) {
foreach ( $images as $attachment_id ) {
$thumb = wp_get_attachment_image( $attachment_id, 'full' );
$full_size = wp_get_attachment_url($attachment_id);
printf( '%s', $full_size, $thumb );
}
}
?></br>
<?php endif; ?>
This should work. See comment for explanation.
<?php
$images = get_post_meta(get_the_ID(), 'images', true);
if ( $images && is_single() ):
$images = get_post_meta( $post->ID, 'images' );
if ( $images ) {
//you can't loop through strings, you need to convert the string to an array
$images = explode( ",", $images );
foreach ( $images as $attachment_id ) {
$thumb = wp_get_attachment_image( intval($attachment_id), 'full' );
$full_size = wp_get_attachment_url($attachment_id);
printf( '%s', $full_size, $thumb );
}
}
echo '<br>';
endif;
?>
I have the following code in my wordpress theme, single-post page (the page where single posts are displayed).
<article id="post-<?php the_ID(); ?>"<?php post_class('col-md-12'); ?>>
<div class="container">
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive singlepic" src="<?php echo $image ?>"/>
<?php endif; ?>
<?php if ( $post->post_type == 'data-design' && $post->post_status == 'publish' ) {
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
$thumbimg = wp_get_attachment_link( $attachment->ID, 'thumbnail-size', true );
echo '<li class="' . $class . ' data-design-thumbnail">' . $thumbimg . '</li>';
}
}
}
?>
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'web2feel' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
It puts the post-title then featured-image as a large image then posts the content, and then the rest.
I want to target the images in the content, and display them the same way as the featured-image is displayed.
*NOTE - changes to the 'if ( $attachments ) { ...' function doesn't change anything (nor does completely removing it) so I am not certain what that part does. the only code that affects the content is when it is called ( '')
Sometimes ago I used to following code to strip off all the images in my content area and then display them separately apart from the contents. This might help you.
In your functions.php file -
function stripe_images_from_content($content){
$images = array();
$subject = $content;
$subject = preg_replace('~<img [^\>]*\ />~', '', $subject);
$subject = preg_replace('~\[caption[^\]]*\][^\]]*\]~', '', $subject);
$image_urls = array();
$match_count = preg_match_all( '/<img.*src=["\']([^"\']*)["\'].*\/>/', $content, $image_urls );
if (is_numeric($match_count) && $match_count > 0) {
if( is_array($image_urls[1]) and count($image_urls[1]) > 0 ){
foreach( $image_urls[1] as $i ){
$featured_image_url = $i;
$image_id = get_attachment_id_from_src( $featured_image_url );
if (! is_numeric($image_id)) {
$match_count = preg_match( '/(.*)-\d+x\d+(\.(jpg|png|gif))/', $featured_image_url, $matches );
if (is_numeric($match_count) && $match_count > 0) {
$base_image_url = $matches[1] . $matches[2];
$images[] = get_attachment_id_from_src( $base_image_url );
}
}
else{
$images[] = $image_id;
}
}
}
}
$data = new stdClass();
$data->images = $images;
$data->content = $subject;
return $data;
}
What this function does is get all the images inserted in the content area of a post and strip them off. Then return the image(s) and the content without image.
in your single.php file-
$content = stripe_images_from_content(get_the_content());
Now you need to do two things. $content->images contains all the images inserted in the post content area. And $content->content holds the raw content images stripped off. First you need to use $content->images wisely where you want to display your images and second replace the the_content() function with echo wpautop($content->content);
Hope this might help you.
I've got a problem with Wordpress.
I want the thumbnail of my last post as background of my div.
Code:
<div<?php
if ( $thumbnail_id = get_post_thumbnail_id() ) {
if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
printf( ' style="background-image: url(%s);"id="photopost"', $image_src[0] );
}
?><?php $cat_id = 3; //the certain category ID
$latest_cat_post = new WP_Query( array('posts_per_page' => 1, 'category__in' => array($cat_id)));
if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post(); ?><?php endwhile; endif; ?>></div>
This works fine with the thumbnail of my last post (all post).
But i want the thumbnail from the last post of category ID 3.
How can i fix this?
Thanks,
Bjorn
You are calling the Query after you have created the thumbnail. The Query should wrap the div.
Try:
<?php $cat_id = 3; //the certain category ID
$latest_cat_post = new WP_Query( array('posts_per_page' => 1, 'category__in' => array($cat_id)));
if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post(); ?>
<div<?php
if ( $thumbnail_id = get_post_thumbnail_id() ) {
if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
printf( ' style="background-image: url(%s);"id="photopost"', $image_src[0] );
}
?>></div>
<?php endwhile; endif; ?>
I am having a little trouble editing a Woocommerce template with hooks. Essentially I would just like to change the product-image template so instead of linking to the uploaded product image, it links to the product post.
The current product-image.php woocommerce template has
global $post, $woocommerce, $product;
?>
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => $image_title
) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
I am unsure of how to adapt the echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID ); to change the %s to a link to the post.
The hook I am using is:
add_action('woocommerce_product_thumbnails', 'custom_links');
function custom_links() {
//code
}
Could someone help me gain some direction with this?
You are calling action not filter. Also you are calling the wrong one.
Change this:
add_action('woocommerce_product_thumbnails', 'custom_links');
to this:
add_filter('woocommerce_single_product_image_html', 'custom_links', 10, 2);
The 2 represents the argument count for the function and your custom_links() should be something like:
function custom_links($link, $post_id) {
$pattern = '/(?<=href=")([^"]*)/';
$replacement = get_permalink($post->ID);
return preg_replace($pattern, $replacement, $link);
}
Process the $link variable as needed and then return it.
A site of mine - http://www.sweetrubycakes.com.au - has recently had the thumbnails stop working (they were working up until yesterday, yesterday the domain registrar had some issues, but nothing else I know of could have caused it).
If you view the source, you'll see they include too much in the URL:
<img src="/home2/sweetrub/public_html/wp-content/uploads/et_temp/t-rex-tiny-63339_203x203.jpg" class="item-image" alt="T- Rexcellent">
where it should be:
<img src="/wp-content/uploads/et_temp/t-rex-tiny-63339_203x203.jpg" class="item-image" alt="T- Rexcellent">
I don't think I'm using the most recent version of the theme, however I've made some tweaks and don't wish to update.
The code that outputs that images is this:
<?php
$work_count = 0;
$recent_work_args = apply_filters( 'evolution_recent_work_args', array(
'showposts' => (int) get_option('evolution_posts_work_num'),
'category__not_in' => (array) get_option('evolution_exlcats_work')
) );
$recent_work_query = new WP_Query( $recent_work_args );
while ( $recent_work_query->have_posts() ) : $recent_work_query->the_post();
++$work_count;
$width = apply_filters( 'evolution_home_work_width', 203 );
$height = apply_filters( 'evolution_home_work_height', 203 );
$titletext = get_the_title();
$thumbnail = get_thumbnail($width,$height,'item-image',$titletext,$titletext,true,'Work');
$thumb = $thumbnail["thumb"];
$lightbox_title = ( $work_title = get_post_meta($post->ID, 'work_title',true) ) ? $work_title : $titletext;
$work_description = ( $work_desc = get_post_meta($post->ID, 'work_description',true) ) ? $work_desc : truncate_post( 50, false );
?>
<div class="r-work<?php if ( 0 == $work_count % 3 ) echo ' last'; ?>">
<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, 'item-image'); ?>
<span class="overlay"></span>
<!---->
<p><?php echo esc_html( $work_description ); ?></p>
</div> <!-- end .r-work -->
<?php endwhile; wp_reset_postdata(); ?>
And the print_thumbnail function looks like this:
if ( ! function_exists( 'print_thumbnail' ) ){
function print_thumbnail($thumbnail = '', $use_timthumb = true, $alttext = '', $width = 100, $height = 100, $class = '', $echoout = true, $forstyle = false, $resize = true, $post='') {
global $shortname;
if ( $post == '' ) global $post;
$output = '';
$thumbnail_orig = $thumbnail;
$thumbnail = et_multisite_thumbnail( $thumbnail );
$cropPosition = '';
$allow_new_thumb_method = false;
$new_method = true;
$new_method_thumb = '';
$external_source = false;
$allow_new_thumb_method = !$external_source && $new_method && $cropPosition == '';
if ( $allow_new_thumb_method && $thumbnail <> '' ){
$et_crop = get_post_meta( $post->ID, 'et_nocrop', true ) == '' ? true : false;
$new_method_thumb = et_resize_image( et_path_reltoabs($thumbnail), $width, $height, $et_crop );
if ( is_wp_error( $new_method_thumb ) ) $new_method_thumb = '';
}
if ($forstyle === false) {
$output = '<img src="' . esc_url( $new_method_thumb ) . '"';
if ($class <> '') $output .= " class='" . esc_attr( $class ) . "' ";
$output .= " alt='" . esc_attr( strip_tags( $alttext ) ) . "' />";
if (!$resize) $output = $thumbnail;
} else {
$output = $new_method_thumb;
}
if ($echoout) echo $output;
else return $output;
}
}
I've seen some other posts that suggest that it's a file permissions folder ( wp print_thumbnail function is not working ) but that doesn't seem to be working for me.
Does anyone have any suggestions?
I think print_thumbnail is the problem in your code. Instead of print_thumbnail try below options.
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(); // Outputs <img/> object with src="thumbnail-href"
}
?>
Similarly, this would also work:
<?php
if ( has_post_thumbnail() ) {
echo( get_the_post_thumbnail( get_the_ID() ) );
}
?>
Check this stackoverflow answer