<img class="icona" src="<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID) , array(85, 85 ) , false, ''); echo $src[0]; ?>" />
I'm trying to get the "thumbnail" size src for the image. Instead with array(85, 85 ) I just get it with width and height tags set to 85px (but the image src can be 200000x200000).
In your functions.php add the wp function add_image_size('newimage', width, height, true)
http://codex.wordpress.org/Function_Reference/add_image_size
In your theme file:
get_the_post_thumbnail($post->ID, 'newimage') or the_post_thumbnail('newimage')
if you're images have already been added you'll have to regenerate your thumbnails. Use the plugin regenerate thumbnails to do this. If you haven't added the images yet than you should be good to go.
Related
I found a plugin called oEmbed Featured Image that does absolutely everything I want except output the largest size.
The plugin's default YouTube output size is 480x360. I need to be able to use the full resolution size for at least YouTube/Vimeo.
I figured I can edit the function starting on line 68 in the plugin.
Here is what I've come up with:
public function oembed_dataparse( $return, $data, $url )
{
if ($yt = $data->provider_name == 'YouTube')
{
if(preg_match("/^(?:http(?:s)?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^\?&\"'>]+)/", $data->thumbnail_url, $youtube_id))
$ytvideo_id = $youtube_id;
$max = get_headers($data->thumbnail_url);
if (substr($max[0], 9, 3) !== '404')
{
$data->thumbnail_url = 'http://img.youtube.com/vi/$ytvideo_id/maxresdefault.jpg';
}
}
if ($vm = $data->provider_name == 'Vimeo')
{
if (preg_match("/https?:\/\/(?:www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/", $data->thumbnail_url, $vimeo_id))
$vmvideo_id = $vimeo_id[3];
$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$vmvideo_id.php"));
$data->thumbnail_url = $hash[0]['thumbnail_large'];
}
if ( ! empty( $data->thumbnail_url ) && ! $this->_thumb_id ) {
//if ( in_array( # $data->type, array( 'video' ) ) ) // Only set for video embeds
$this->set_thumb_by_url( $data->thumbnail_url, # $data->title );
}
}
In this link there are the explanation how you can change the preset of wp.
Featured Images & Post Thumbnails
I think you could found interesting, probably you don't need use plug-in. the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
In the link it's write:
The default image sizes of WordPress are “Thumbnail”, “Medium”, “Large” and “Full Size” (the original size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under >Settings > Media. You can also define your own image size by passing an array with your image dimensions:
he_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'large' ); // Large resolution (default 640px x 640px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)
Set the Featured Image Output Size #Set the Featured Image Output Size
To be used in the current Theme’s functions.php file.
You can use set_post_thumbnail_size() to set the default Featured Image size by resizing the image proportionally (that is, without distorting it):
set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode
Set the default Featured Image size by cropping the image (either from the sides, or from the top and bottom):
set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode
In this link you can see more code: https://developer.wordpress.org/reference/functions/the_post_thumbnail/
When using the_post_thumbnail() or related functions, the ‘post-thumbnail’ image size is used by default, though a different size can be specified instead as needed.
Other link i think you can found interesting is this: Image Size and Quality
But it's more generic.
The video work in the some way. of course depends from quality of the video in youtube and you can decide how large you want show up. If you don't use a differente media player, you will use a default youtube player and you can use the API for do what you want.
I hope I was helpful.
What you need to do is actually modify you youtube if statement to make it look at $url, not $data->thumbnail_url. That will cause your preg_match() to match correctly, and it will return the correct $yt_videoid for you to use.
WP introduced support for srcset in version 4.4 for Thumbnails and Post images. But I can't find a way to make the page header responsive. Here is how I embed the Page header:
<img src="<?php header_image() ?>" alt="">
This loads the header image (which can be uploaded in the backend > Design > Customise) in an src. But I'd rather include all custom image sizes (that I added in functions.php) of this image and put them in an srcset attribute. But there seems to be only one size for the header?
It won't be easy, but this is how you make Header images (banner) responsive with a srcset.
ps.: Please fix this, wordpress! Responsive Headers should be part of the srcset update.
Solution: We never use the WP header_image(); function, but instead only just use the custom header as an "Uploader" for our image that we then embed manually:
Extract the attachement ID of the Header image
Manually load src and srcset of this attachement ID
header.php
<?php
// Extract header attachement ID
$data = get_theme_mod('header_image_data');
$data = is_object($data) ? get_object_vars($data) : $data;
$header_id = is_array($data) && isset($data['attachment_id']) ? $data['attachment_id'] : false;
if($header_id) :
// Set image sources manually
$src = wp_get_attachment_image_src( $header_id, 'thumbnail-head' )[0];
$srcset = wp_get_attachment_image_srcset( $header_id, 'thumbnail-head' ); ?>
<img id="masthead-bg" src="<?php echo $src ?>" srcset="<?php echo $srcset ?>" sizes="100vw" alt="">
<?php endif; ?>
In this example thumbnail-head is my destination image size and aspect ratio. You can use whatever size you want (needs to have a fixed aspect ratio). We now have to add this image size to the functions.php file. In order to get larger sizes of this thumbnail (to embed in the srcset) you also have to add more sizes to the functions.php:
functions.php
add_image_size( 'thumbnail-head', 450, 300, true );
add_image_size( 'thumbnail-head-2x', 900, 600, true );
add_image_size( 'thumbnail-head-4x', 1800, 1200, true );
My thumbnail size is 450 x 300 pixel (3:2 aspect ratio). So I added a 2x and 4x version. Don't forget to rebuild thumbnails via plugin.
Finally it's important to set the dimensions of the custom header image to the largest version of your thumbnail. This is because WP cuts the image down to this size and creates the other sizes afterwords based on this cut down image. In this case search for your custom header in the functions.php and set width and height to 1800 and 1200. We also disable "flex-width" and "flex-height" to force the same aspect ratio as our added image sizes.
functions.php
function fs_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'fs_custom_header_args', array(
'default-image' => '',
'header-text' => false,
'default-text-color' => 'ffffff',
'width' => 1800,
'height' => 1200,
'flex-width' => false,
'flex-height' => false,
'wp-head-callback' => 'fs_header_style',
) ) );
}
add_action( 'after_setup_theme', 'fs_custom_header_setup' );
This is now possible using the_header_image_tag();.
You might want to use this, to avoid WP from hardcoding a height and width for responsive images:
the_header_image_tag( array(
'width' => "",
'height' => "",
));
I have an website where you can upload from front end and when you make a new post the image goes into custom field imagepost and Wordpress makes 3 more images after the original with diferent sizes and dimension and if I make to set automatically original image as thumbnail some images are bigger than 8 mb and facebook says can't download my image so I need a solution to get into thumbnail image generated by wordpress , ex: image-300.270.jpg not the original image.
You can add new sizes of images with:
add_image_size( $name, $width, $height, $crop );
You have to do this in your functions.php archive.
If I am correct all you need to do is to call the actual image for your post thumbnail with a function the_post_thumbnail( $size, $attr );
According to this page you can call multiple default post thumbnail sizes like this:
the_post_thumbnail(); // without parameter -> 'post-thumbnail'
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'large' ); // Large resolution (default 640px x 640px max)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
the_post_thumbnail( array(100, 100) ); // Other resolutions
More info here : https://developer.wordpress.org/reference/functions/the_post_thumbnail/
I'am trying to make custom thumbnail sizes in Wordpress. Currently I have following code in functions.php
<?php
add_image_size( 'featuredImageCropped', 310, 150, false );
function custom_excerpt_length( $length ) {
return 15;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
And I'am trying to access this thumbnail in index.php with following code:
<img class="keis-image" src="<?php $kuva = get_field('kuva');$image = wp_get_attachment_image_src( $kuva['id'], "featuredImageCropped"); echo $image[0] ?>"/>
However it will return full image instead of resized thumbnail, if I change featuredImageCropped to large or some other basic thumbnail size it will return it as it should.
How could I get my custom thumbnail to render as I'd like to?
According to add_image_size() in the Documentation:
Add this to your theme's functions.php :
add_action( 'after_setup_theme', 'mytheme_custom_thumbnail_size' );
function mytheme_custom_thumbnail_size(){
add_image_size( 'thumb-small', 200, 200, true ); // Hard crop to exact dimensions (crops sides or top and bottom)
add_image_size( 'thumb-medium', 520, 9999 ); // Crop to 520px width, unlimited height
add_image_size( 'thumb-large', 720, 340 ); // Soft proprtional crop to max 720px width, max 340px height
}
To display a featured image with your new size (in this case “thumb-small”) in a post, just add:
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumb-small' ); } ?>
If your theme does not support featured images, you need to add this to your functions.php as well, inside of your setup function.
// Enable featured image
add_theme_support( 'post-thumbnails' );
If you add new thumbnail sizes to a site which already has media uploaded, you’ll need to regenerate thumbnails once for the new sizes to show up using this plugin:
Regenerate Thumbnails
Thumbnail Sizes
The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full” (the size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sizes with the_post_thumbnail():
the_post_thumbnail(); // without parameter -> 'post-thumbnail'
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'large' ); // Large resolution (default 640px x 640px max)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
the_post_thumbnail( array(100, 100) ); // Other resolutions
I'am trying to make custom thumbnail sizes in Wordpress. Currently I have following code in functions.php
<?php
add_image_size( 'featuredImageCropped', 310, 150, false );
function custom_excerpt_length( $length ) {
return 15;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
And I'am trying to access this thumbnail in index.php with following code:
<img class="keis-image" src="<?php $kuva = get_field('kuva');$image = wp_get_attachment_image_src( $kuva['id'], "featuredImageCropped"); echo $image[0] ?>"/>
However it will return full image instead of resized thumbnail, if I change featuredImageCropped to large or some other basic thumbnail size it will return it as it should.
How could I get my custom thumbnail to render as I'd like to?
According to add_image_size() in the Documentation:
Add this to your theme's functions.php :
add_action( 'after_setup_theme', 'mytheme_custom_thumbnail_size' );
function mytheme_custom_thumbnail_size(){
add_image_size( 'thumb-small', 200, 200, true ); // Hard crop to exact dimensions (crops sides or top and bottom)
add_image_size( 'thumb-medium', 520, 9999 ); // Crop to 520px width, unlimited height
add_image_size( 'thumb-large', 720, 340 ); // Soft proprtional crop to max 720px width, max 340px height
}
To display a featured image with your new size (in this case “thumb-small”) in a post, just add:
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumb-small' ); } ?>
If your theme does not support featured images, you need to add this to your functions.php as well, inside of your setup function.
// Enable featured image
add_theme_support( 'post-thumbnails' );
If you add new thumbnail sizes to a site which already has media uploaded, you’ll need to regenerate thumbnails once for the new sizes to show up using this plugin:
Regenerate Thumbnails
Thumbnail Sizes
The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full” (the size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sizes with the_post_thumbnail():
the_post_thumbnail(); // without parameter -> 'post-thumbnail'
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'large' ); // Large resolution (default 640px x 640px max)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
the_post_thumbnail( array(100, 100) ); // Other resolutions