Custom WordPress Image size not displaying - wordpress

I am trying to add a custom image size in WordPress like so:
// Add custom image sizes
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' ); // The important part
}
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'home_portrait size', 1000, 1000, false );
}
/* Display Custom Image Sizes */
add_filter('image_size_names_choose','wpshout_custom_sizes');
function wpshout_custom_sizes($sizes){
return array_merge($sizes, array(
'home_portrait' => __('Home Portrait standard'),
));
}
I can see this extra size is generated when I upload an image to the media library as expected but it does not work when I try and implement it in PHP with advanced custom fields.
The custom image size is 1000px by 1000px.
In an attempt to trouble shoot and narrow down the issue, I amended the default WP size of 'medium' to also be 1000px by 1000px.
In the code below, the top image which uses this default 'medium' size renders perfectly on the website using the correct image but the second does not, it just displays the full size image.
I can't work out what is wrong with my custom image code given that it seemingly should be very straight forward.
<!-- THIS WORKS -->
<?php
$top_image = get_field('top_animated_image_1');
?>
<div class="upper-image">
<?php $top_animated_image_1 = get_field( 'top_animated_image_1' ); ?>
<?php $size = 'medium'; ?>
<?php if ( $top_animated_image_1 ) : ?>
<?php echo wp_get_attachment_image( $top_animated_image_1, $size ); ?>
<?php endif; ?>
</div>
<!-- THIS DOES NOT -->
<?php
$lower_image = get_field('lower_animated_image_2');
?>
<div class="lower-image">
<?php $lower_animated_image_2 = get_field( 'lower_animated_image_2' ); ?>
<?php $size = 'home_portrait'; ?>
<?php if ( $lower_animated_image_2 ) : ?>
<?php echo wp_get_attachment_image( $lower_animated_image_2, $size ); ?>
<?php endif; ?>
</div>

I got this working in the end by changing it to
// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );
// Add featured image sizes
add_image_size( 'home_portrait', 1000, 1000, false ); // width, height, crop
// Register the three useful image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
function wpshout_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'home_portrait' => __( 'Home Portrait' ),
) );
though I am still not sure why the first did not work

Related

How to set WordPress RSS feed's image size in pixels?

Beyond the 'thumbnail' 'medium' and 'large' sizes? (and as seen applied in this answer: https://stackoverflow.com/a/9131274/4415757)
Image size doesn't seem to be customizable through mailchimp RSS-to-campaign editor, and when I tried to set a width and height inside the tag in the RSS file, it didn't work; maybe a nested quotation marks issue?
Here is how I inserted my post featured image into the custom made RSS file:
<?php while(have_posts()) : the_post(); ?>
<item>
<title><?php the_title_rss(); ?></title>
<link><?php the_permalink_rss(); ?></link>
<?php if(get_the_post_thumbnail()): ?>
<media:content url="<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium'); echo $image[0]; ?>" medium="image" />
<?php endif; ?>
I tried to substitute 'medium' by 'thumbnail' and that seems to be he right parameter to manipulate, but when I tried to substitute it by 'width="600px" height="300px"' for example, I got the original image sizes instead.
Here is the solution I found. It is not about defining the image size in pixels in the RSS file but more like creating a new image size category in wordpress and then calling that size in the RSS media tag.
According to the article http://havecamerawilltravel.com/photographer/wordpress-resize-thumbnails:
I created an extra image size in wordpress, using the function add_image_size in my functions.php file. Example:
<?php
add_image_size( 'rss-thumb', 200, 150, true );
add_image_size( 'search-thumb', 150, 150, true );
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'rss-thumb' => __( 'RSS Thumb' ),
'search-thumb' => __( 'Search Thumb' ),
) );
}?>
Chosen the new image size in the RSS file, inside the tag;
<?php if(get_the_post_thumbnail()): ?>
<media:content url="<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'rss-thumb'); echo $image[0]; ?>" medium="image" />
<?php endif; ?>
Regenerated the thumbnails with the help of a plugin "Force Regenerate Thumbnails", so the existing images would be saved wih the newly created size-category also.

Displaying specific thumbnail size in single.php

Currently I'm building a Wordpress theme and I'm trying to display a specific image size, which is cropped in my single.php, and thus on individual post pages and not having any luck.
Here's my functions.php:
add_theme_support( 'post-thumbnails' );
add_image_size('new-thumbnail-size',600,340, true);
Here's my single.php:
<?php if( get_the_post_thumbnail() ) : ?>
<div class = 'postImgCon'>
<div class="feat-img">
<?php the_post_thumbnail('new-thumbnail-size'); ?>
</div>
</div>
<?php endif; ?>
Any ideas?
You're using the correct functions to declare support for post thumbnails and add an image size but you need to do so inside the after_setup_theme hook.
Inside functions.php change:
add_theme_support( 'post-thumbnails' );
add_image_size('new-thumbnail-size',600,340, true);
To:
function wpse_setup_theme() {
add_theme_support( 'post-thumbnails' );
add_image_size( 'new-thumbnail-size', 600, 340, true );
}
add_action( 'after_setup_theme', 'wpse_setup_theme' );
Also you're using the wrong function to check if a post has a thumbnail. It should still work but here's the correct approach.
Inside single.php change:
<?php if( get_the_post_thumbnail() ) : ?>
To:
<?php if ( has_post_thumbnail() ) : ?>
Finally you need to be aware that any images you've already uploaded won't have been cropped to 600 x 340 so you won't get the output you're expecting. You need to regenerate your existing images. Take a look at the following plugin for that: https://wordpress.org/plugins/regenerate-thumbnails/
Try this
....
<div class="feat-img">
<?php echo the_post_thumbnail($page->ID, "new-thumbnail-size'); ?>
....

WP How do I customize a specific thumbnail size using CSS class

I've tried add_image_size to do my custom thumbnail resize but for some reason it won't stand the thumbnail being 220 x 220 and it will change the height to 167 x, for this I've been trying to do a CSS-based solution instead, which I suppose to work perfectly.
My thumbnail code
<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail();
endif; ?>
the css class I need help applying to the thumbnail code above:
.imgclass{
height: 220px;
width: 220px;
}
Thanks to all the coders out there!
You can find thumbnail url & give css to that
<?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>
<img src="<?php echo $url; ?>" class="img_thumb"/>
You will need to specify what image size you are using as the thumbnail.
<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail('IMAGE SIZE NAME');
endif; ?>
Alternatively, you can completely reset the base thumbnail size like so:
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 220, 220 );
<?php if ( ! post_password_required() && ! is_attachment() ) :
$thumb_attrs = array( 'class' => "imgclass") ;
the_post_thumbnail($thumb_attrs);
endif; ?>
Should work.

thumbnail slider size is not applied correctly codex:add_image_size wordpress

Have a problem i upload one image with 400px 300px
functions.php and I have defined the following
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );//Agrega soporte
add_image_size( 'slider-thumbnail', 940, 310, true ); // Slider thumbnail
}
header.php
<?php query_posts('' );
while ( have_posts() ) : the_post(); ?>
<?php the_post_thumbnail('slider-thumbnail'); ?>
<?php endwhile; wp_reset_query(); ?>
But when he grabs the picture appears to scale and repeated not being adjusted to the size you set it, I want to engage me esque size 940px to 310px but defined to deform me why this happens?

Preventing Display of Post Gallery when on Homepage

I would like to prevent the post's gallery from displaying when the post is listed on the homepage.
I'm thinking it will utilize add_filter and apply_filter when post in on homepage.
You can add a gallery to posts by clicking the add media button. You can select existing images or upload additional images that will create a gallery within the post. This embeds a shortcode in $post['content'] that looks like [gallery ids="37,38,39,40,41,42].
The issue is that by default it displays when the post is included on homepage as well as the individual post itself.
Update: This is what I am doing right now to achieve the requirement. I suspect there will be a more elegant way.
<div class="entry-content">
<!-- Begin Post Content -->
<?php if ( is_single() ) : ?>
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'faceboard' ) ); ?>
<?php else : // Filter Gallery ShortCode out ?>
<?php
$content = '';
$content = get_the_content();
$content = preg_replace('/\[gallery\sids="[0-9]+(,[0-9]+)*,?"\s?(royalslider="\d")?\]/s',"",$content);
echo wpautop( $content, 1);
?>
<?php endif; // is_single() ?>
<!-- End Post Content -->
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'faceboard' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
You can add the following to your theme's functions.php file or to a custom plugin (better, as you can disable it without touching the theme).
The filter post_gallery is used to create your own gallery, and the $content parameter comes empty by default. If it returns empty, the original [gallery] shortcode is processed.
Here, we are using a dummy empty value, so the filter is tricked into thinking that we are passing some actual gallery content, but it's just a white space.
add_filter( 'post_gallery', 'disable_home_galleries_so_17635042', 10, 2 );
function disable_home_galleries_so_17635042( $content, $atts )
{
// http://codex.wordpress.org/Conditional_Tags
if( is_home() )
return ' ';
return $content;
}

Resources