Hi guys I have a problem. On my product page the active image has the same size of thumbnail, I don't know what happened. Take a look https://www.extrasocial.it/instagram-followers-reali/
You may need to find out by deactivating other plugin. For time being you can use this code snippet in your active theme functions.php
add_filter( 'wp_get_attachment_image_src', array( $this, 'pn_change_product_image_link'), 50, 4 );
function pn_change_product_image_link( $image, $attachment_id, $size, $icon ){
if( ! is_product() ) return $image; //if not product page
if( $size == 'shop_thumbnail' ) return $image; // if not gallery thumbnails
// Your source image link
$src = wp_get_attachment_url( $attachment_id );
$width = ''; // define the width if needed
$height = ''; // define the height if needed
$image = array( $src, $width, $height );
return $image;
}
I've found the solution, it was a plugin (Fast Velocity Minify). Once deactivated, everything came back to normal. Thank you Mujeebu.
Related
in my wp_theme i have this function to get first image of post as thumbnail
function get_first_image() {
global $post;
$first_img = '';
preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', do_shortcode( $post->post_content, 'gallery' ), $matches );
$first_img = isset( $matches[1][0] ) ? $matches[1][0] : null;
if ( empty( $first_img ) ) {
return get_template_directory_uri() . '/assets/images/empty.png'; // path to default image.
}
// Now we have the $first_img but we want the thumbnail of that image.
$explode = explode( '.', $first_img );
$count = count( $explode );
$size = '-150x150'; // Our panel ratio (2:1) 312x156 for lighther page, 624x312 for retina; use add_image_size() and Force Regenerate Thumbnails plugin when changing sizes.
$explode[ $count -2 ] = $explode[ $count -2 ] . '' . $size;
$thumb_img = implode( '.', $explode );
return $thumb_img;}
but some image have custome size and this function not work on this case
like this :
https://yawar.ir/wp-content/uploads/2014/08/yawar-1024x682.jpg
how can i force change the url of images that have another size ?
The WP codex page regarding thumbnails says that you can specify your own sizes: https://codex.wordpress.org/Post_Thumbnails Look under "Add New Post Thumbnail Sizes". Maybe that will point you in the right direction.
Other than that, what about not specifying the size at all? Then maybe the browser would display the image at its natural size?
I would like to add an annotation below featured image box in post page ,saying
'Recommended image size: 1300px (width) x 340px (height)
Is it possible in wordpress 4.2.2.
The text is for the admin user for a better guidance.
Any help is highly appreciated. Thanks in advance.
Old post here, but I was trying to do this as well. A filter since WordPress 2.9.0 offers this capacity, like so:
/**
* Filters the admin post thumbnail HTML markup to return.
*
* #since 2.9.0
* #since 3.5.0 Added the `$post_id` parameter.
* #since 4.6.0 Added the `$thumbnail_id` parameter.
*
* #param string $content Admin post thumbnail HTML markup.
* #param int $post_id Post ID.
* #param int $thumbnail_id Thumbnail ID.
*/
return apply_filters( 'admin_post_thumbnail_html', $content, $post->ID, $thumbnail_id );
So use it like this:
function stackoverflow_30817906( $content, $post_id, $thumbnail_id ) {
if ( 'post' !== get_post_type( $post_id ) ) {
return $content;
}
$caption = '<p>' . esc_html__( 'Recommended image size: 1300px (width) x 340px (height)', 'i18n-tag' ) . '</p>';
return $content . $caption;
}
add_filter( 'admin_post_thumbnail_html', 'stackoverflow_30817906', 10, 3 );
If you want to do this without editing core files you could just use jQuery to add the text.
add_action('admin_footer', function() {
global $pagenow;
if('post.php' == $pagenow || 'post-new.php' == $pagenow) : ?>
<script>
jQuery(document).ready(function($) {
$('#postimagediv .inside').after('<div style="padding: 0 12px 12px;">Recommended image size: 1300px (width) x 340px (height)</div>');
});
</script>
<?php endif;
});
This solution isn't as 'clean' as making the change directly in the PHP file, but I think it is preferable to editing the core. With this solution you don't have to worry about remaking the change after a WordPress update.
You should go to wp-admin->includes->post.php
and around line 1295 (depending on version) you will find:
if ( !empty( $thumbnail_html ) ) {
$ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
$content = sprintf( $set_thumbnail_link, $upload_iframe_src, $thumbnail_html );
$content .= '<p class="hide-if-no-js">' . esc_html__( 'Remove featured image' ) . '</p>';
}
change it to:
if ( !empty( $thumbnail_html ) ) {
$ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
$content = sprintf( $set_thumbnail_link, $upload_iframe_src, $thumbnail_html );
$content .= '<p class="hide-if-no-js">' . esc_html__( 'Remove featured image' ) . '<span style="display:block;">Recommended image size: 1300px (width) x 340px (height)</span></p>';
}
It is not recommended to change core files as your changes can be lost during the update, but I don't recommend creating a plugin just for this small change.
i would like to use external pictures as featured image on wordpress.
either changing worpdress code. (adding a fetured image metabox accepting urls and do some modifications in order to display the featured image from url correctly)
or modifiying the plugin WP remote thumbnail, which set a featured image from an image url. it download the picture and create thumbnails in wordpress and set the featured image.
modifications:
* no download from the url, just use the url to display directly on the blog.
* remove wp-content/uploads from the url generated by wordpress to display featured image (only for external urls)
* no thumbnails creation.
thank you very much for reading
i know there is a lot of questions about this problem
but if we solve this question it could be useful for a lot of ppl.
here the code:
<?php
/*
Plugin Name: WP Remote Thumbnail
Plugin URI: http://magnigenie.com/wp-remote-thumbnail-set-external-images-featured-image/
Description: A small light weight plugin to set external/remote images as post thumbnail/featured image.
Version: 1.0
Author: Nirmal Kumar Ram
Author URI: http://magnigenie.com
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
?>
<?php
/**
* Initialize wprthumb on the post edit screen.
*/
function init_wprthumb() {
new wprthumb();
}
if ( is_admin() ) {
add_action( 'load-post.php', 'init_wprthumb' );
add_action( 'load-post-new.php', 'init_wprthumb' );
}
class wprthumb {
/**
* Hook into the appropriate actions when the wprthumb is constructed.
*/
public function __construct() {
add_action( 'add_meta_boxes', array( $this, 'add_meta_box' ) );
add_action( 'save_post', array( $this, 'save' ) );
}
/**
* Adds the meta box container.
*/
public function add_meta_box( $post_type ) {
if ( post_type_supports( $post_type, 'thumbnail' )) {
add_meta_box(
'some_meta_box_name'
,'Remote Post Thumbnail'
,array( $this, 'render_meta_box_content' )
,$post_type
,'side'
,'default'
);
}
}
/**
* Save the meta when the post is saved.
*/
public function save( $post_id ) {
/*
* We need to verify this came from the our screen and with proper authorization,
* because save_post can be triggered at other times.
*/
// Check if our nonce is set.
if ( ! isset( $_POST['wprthumb_nonce'] ) )
return $post_id;
$nonce = $_POST['wprthumb_nonce'];
// Verify that the nonce is valid.
if ( ! wp_verify_nonce( $nonce, 'wprthumb' ) )
return $post_id;
// If this is an autosave, our form has not been submitted,
// so we don't want to do anything.
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return $post_id;
// Check the user's permissions.
if ( 'page' == $_POST['post_type'] ) {
if ( ! current_user_can( 'edit_page', $post_id ) )
return $post_id;
} else {
if ( ! current_user_can( 'edit_post', $post_id ) )
return $post_id;
}
/* All good, its safe for us to save the data now. */
// Sanitize the user input.
$image = sanitize_text_field( $_POST['remote_thumb'] );
$upload_dir = wp_upload_dir();
//Get the remote image and save to uploads directory
$img_name = time().'_'.basename( $image );
$img = wp_remote_get( $image );
$img = wp_remote_retrieve_body( $img );
$fp = fopen( $upload_dir['path'].'/'.$img_name , 'w');
fwrite($fp, $img);
fclose($fp);
$wp_filetype = wp_check_filetype( $image , null );
$attachment = array(
'post_mime_type' => $wp_filetype['type'],
'post_title' => preg_replace('/\.[^.]+$/', '', $image ),
'post_content' => '',
'post_status' => 'inherit'
);
//require for wp_generate_attachment_metadata which generates image related meta-data also creates thumbs
require_once( ABSPATH . 'wp-admin/includes/image.php' );
$attach_id = wp_insert_attachment( $attachment, $image, $post_id );
//Generate post thumbnail of different sizes.
$attach_data = wp_generate_attachment_metadata( $attach_id , $image );
wp_update_attachment_metadata( $attach_id, $attach_data );
//Set as featured image.
delete_post_meta( $post_id, '_thumbnail_id' );
add_post_meta( $post_id , '_thumbnail_id' , $attach_id, true);
}
/**
* Render Meta Box content.
*/
public function render_meta_box_content( $post ) {
// Add an nonce field so we can check for it later.
wp_nonce_field( 'wprthumb', 'wprthumb_nonce' );
// Display the form, using the current value.
echo '<label for="remote_thumb">';
_e( 'Enter remote image url', 'wprthumb' );
echo '</label> ';
echo '<input type="text" id="remote_thumb" name="remote_thumb" size="25" />';
}
}
I just found out that you can insert images from remote urls without having to first download them and then re-upload them. This works by default in Wordpress without any requirement to install any plugins.
Here's how:
Wherever you see UPLOAD FILES, click that - your file browser will appear where you'd expect you must choose a local file, BUT if you just paste the IMAGE URL into this box and hit OPEN or [ENTER] then Wordpress imports the image from the remote URL.
Click SELECT FILES to upload images from a remote URL
Paste the remote image URL into the place where you'd normally have the file name
I just find this plugin that seems to do what you need :
https://wordpress.org/plugins/external-featured-image
You can use the plugin Featured Image from URL (FIFU) for that.
Been experimenting with some custom meta boxes, but nothing I've read or can find is helping me to achieve what I'm actually after.
I can render a new meta box, but I can't find a way to actually change the output of the post thumbnail itself in the admin panel.
function new_post_thumbnail_meta_box() {
global $post;
echo 'Content above the image.';
$thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
echo _wp_post_thumbnail_html( $thumbnail_id );
echo 'Content below the image.';
}
function render_new_post_thumbnail_meta_box() {
global $post_type;
// remove the old meta box
remove_meta_box( 'postimagediv','post','side' );
// adding the new meta box.
add_meta_box('postimagediv', __('Featured Image'), 'new_post_thumbnail_meta_box', $post_type, 'side', 'low');
}
add_action('do_meta_boxes', 'render_new_post_thumbnail_meta_box');
How to have a larger or 'actual size' version of the featured image displayed in the administration panel?
Copied the includes function and modified the output, this throws up a server error.
function _wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
global $content_width, $_wp_additional_image_sizes;
$post = get_post( $post );
$upload_iframe_src = esc_url( get_upload_iframe_src('image', $post->ID ) );
$set_thumbnail_link = '<p class="hide-if-no-js"><a title="' . esc_attr__( 'Set featured image' ) . '" href="%s" id="set-post-thumbnail" class="thickbox">%s</a></p>';
$content = sprintf( $set_thumbnail_link, $upload_iframe_src, esc_html__( 'Set featured image' ) );
if ( $thumbnail_id && get_post( $thumbnail_id ) ) {
$old_content_width = $content_width;
$content_width = 600;
if ( !isset( $_wp_additional_image_sizes['post-thumbnail'] ) )
$thumbnail_html = wp_get_attachment_image( $thumbnail_id, array( $content_width, $content_width ) );
else
$thumbnail_html = wp_get_attachment_image( $thumbnail_id, 'post-thumbnail' );
if ( !empty( $thumbnail_html ) ) {
$ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
$content = sprintf( $set_thumbnail_link, $upload_iframe_src, $thumbnail_html );
$content .= '<p class="hide-if-no-js">' . esc_html__( 'Remove featured image' ) . '</p>';
}
$content_width = $old_content_width;
}
return apply_filters( 'admin_post_thumbnail_html', $content, $post->ID );
}
Or should I be using add_image_size( 'post_thumbnail', 600, 400, true ); ? since that's what it looks for?
Just in case somebody is stumbling on this old post.
WP introduced a new filter called admin_post_thumbnail_size for you to be able to change the default image size in the admin panel.
To change the size of the featured thumbnail image you can use something like this:
function custom_admin_thumb_size($thumb_size){
return "custom-image-size"; //or use something like array(400,400).
}
add_filter( 'admin_post_thumbnail_size', 'custom_admin_thumb_size');
You should replace _wp_post_thumbnail_html with get_the_post_thumbnail
Starting in WordPress 4.4, a new filter was introduced, admin_post_thumbnail_size, which allows for modifying the display size of the post thumbnail image in the Featured Image meta box.
When a theme adds ‘post-thumbnail’ support, a special ‘post-thumbnail’ image size is registered, which differs from the ‘thumbnail’ image size managed via the Settings > Media screen.
We can use this filter to alter the post-thumbnail size (266 x 266 px) and modify it to use the default thumbnail size (150 x 150 px) instead.
/**
* Change Display Size of Featured Image Thumbnail in WordPress Admin Dashboard
*/
add_filter( 'admin_post_thumbnail_size', function ( $size, $thumbnail_id, $post ) {
$sizes = get_intermediate_image_sizes();
$result = array_search( 'thumbnail', $sizes );
$size = is_numeric( $result ) ? $sizes[ $result ] : array( 100, 100 );
return $size;
}, 10, 3 );
A specific size (e.g., 100 x 100 px) can also be specified or set as a fallback in case the intermediate thumbnail size isn't available.
The function _wp_post_thumbnail_html returns a code like this:
<p class="hide-if-no-js">
<a title="Set featured image" href="http://example.com/wp-admin/media-upload.php?post_id=4573&type=image&TB_iframe=1" id="set-post-thumbnail" class="thickbox">
<img width="266" height="90" src="http://example.com/wp-content/uploads/thumb2-3-846x288.png" class="attachment-post-thumbnail" alt="thumb2-3" />
</a>
</p>
<p class="hide-if-no-js">
<a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail('dfd8f3353b');return false;">
Remove featured image
</a>
</p>
Note that the image is 846x288, but it's being resized to 266x90 in the img tag attributes.
Analyzing the function, we see that if there is an image size named post_thumbnail, it will get that one. Otherwise, it gets an image size of 266x266 (with crop). You can simply copy the function and modify to your desired output.
Other option is to use the filter admin_post_thumbnail_html and remove the img width and height attributtes:
add_filter( 'admin_post_thumbnail_html', 'filter_featured_img_so_17713997' );
function filter_featured_img_so_17713997( $html )
{
$doc = new DOMDocument();
$doc->loadHTML($html);
$tags = $doc->getElementsByTagName('img');
if(count($tags) > 0)
{
$tag = $tags->item(0);
$tag->removeAttribute('width');
$tag->removeAttribute('height');
return $doc->saveHTML($tag);
}
return $html;
}
The results may not be what you expect, though. If the image is larger than 266, it bleeds out of the browser canvas.
Here's another option to use a custom sized thumbnail or the system defined 'full' sized image (the original size of the image you uploaded) as the Featured Image displayed in the admin panel:
/**
* step 1 - define custom image size
*
* - either plan to use 'full' (returns the size of the image you uploaded) OR define our custom image size
* - so we can call one of those instead of the system defined default 'post-thumbnail'
*
* - remainder of this example assumes using a custom image size, so it is defined
* - if using 'full', instead, then no need to define custom
* - so remove the following add_image_size line (and thereby skip step 1)
*/
add_image_size( 'admin-post-thumbnail', 846, 288, true );
/**
* step 2 - replace the meta box with ours for standard post type only, especially so we can set our own callback and
* - move it into the larger main column.
* - Note that in any event, the full size won't ever have greater width than the current column width
* - as CSS and modern admin panel make the image elements responsive to the column width.
*/
add_action('do_meta_boxes', 'so17713997_move_meta_box');
function so17713997_move_meta_box(){
remove_meta_box( 'postimagediv', 'post', 'side' );
add_meta_box('postimagediv', __('Featured Image'), 'so17713997_post_thumbnail_meta_box', 'post', 'normal', 'low');
}
// step 3 - custom callback to call our functional replacement for _wp_post_thumbnail_html for post type only
function so17713997_post_thumbnail_meta_box( $post ) {
$thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
echo so17713997_wp_post_thumbnail_html( $thumbnail_id, $post->ID );
}
/**
* step 4 - replace _wp_post_thumbnail_html with our version that calls our thumbnail 'admin-post-thumbnail' instead of the default 'post-thumbnail'
*
* - we could do more here, like adjust the content width variable, but not entirely necessary. The custom image size we defined will
* - handle most of it, plus the admin section these days has responsive CSS, so the image doesn't blow-out column width in any event.
*/
function so17713997_wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
global $content_width, $_wp_additional_image_sizes;
$post = get_post( $post );
$post_type_object = get_post_type_object( $post->post_type );
$set_thumbnail_link = '<p class="hide-if-no-js"><a title="%s" href="%s" id="set-post-thumbnail" class="thickbox">%s</a></p>';
$upload_iframe_src = get_upload_iframe_src( 'image', $post->ID );
$content = sprintf( $set_thumbnail_link,
esc_attr( $post_type_object->labels->set_featured_image ),
esc_url( $upload_iframe_src ),
esc_html( $post_type_object->labels->set_featured_image )
);
if ( $thumbnail_id && get_post( $thumbnail_id ) ) {
$old_content_width = $content_width;
$content_width = 266;
if ( !isset( $_wp_additional_image_sizes['admin-post-thumbnail'] ) ) // use our custom image size instead of 'post-thumbnail' OR use 'full' for system defined fullsize image
$thumbnail_html = wp_get_attachment_image( $thumbnail_id, array( $content_width, $content_width ) );
else
$thumbnail_html = wp_get_attachment_image( $thumbnail_id, 'admin-post-thumbnail' ); // use our custom image size instead of 'post-thumbnail' OR use 'full' for system defined fullsize image
if ( !empty( $thumbnail_html ) ) {
$ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
$content = sprintf( $set_thumbnail_link,
esc_attr( $post_type_object->labels->set_featured_image ),
esc_url( $upload_iframe_src ),
$thumbnail_html
);
$content .= '<p class="hide-if-no-js">' . esc_html( $post_type_object->labels->remove_featured_image ) . '</p>';
}
$content_width = $old_content_width;
}
/**
* Filter the admin post thumbnail HTML markup to return.
*
* #since 2.9.0
*
* #param string $content Admin post thumbnail HTML markup.
* #param int $post_id Post ID.
*/
return apply_filters( 'admin_post_thumbnail_html', $content, $post->ID );
}
Note first that the feature image selected may not reflect the updated size until after the post has been Saved or Updated, as appropriate.
Also, this hack makes extensive use of the following core WordPress functions:
the_post_thumbnail(),
add_meta_box(),
post_thumbnail_meta_box(), and
_wp_post_thumbnail_html
(I didn't have enough reputation yet to post more than two links, so google them.)
Have you tried changing the default Featured Image size by using set_post_thumbnail_size()? I had the same issue and this worked perfectly.
The WordPress Block editor shows Featured Images using square thumbnails by default. To change that, we need to apply a JavaScript filter instead of a PHP filter. A very simple filter to display uncropped Featured Images looks like this:
wp.hooks.addFilter(
"editor.PostFeaturedImage.imageSize",
"uncroppedFeaturedImage",
() => "post-thumbnail"
);
Load that script from the enqueue_block_editor_assets hook. Other registered image sizes (medium, large, etc.) can also be used.
I was able to remove the featured image metabox from custom post types of pages. Below is what I used:
add_action('do_meta_boxes', 'remove_thumbnail_box');
function remove_thumbnail_box() {
remove_meta_box( 'postimagediv','page','side' );
}
However, what I really want to do is to only apply this to a specific page template. Is this possible?
Thanks!
Ah, I found a solution.
$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;
$template_file = get_post_meta($post_id,'_wp_page_template',TRUE);
if ($template_file === 'page-template-name.php') {
add_action('do_meta_boxes', 'remove_thumbnail_box');
function remove_thumbnail_box() {
remove_meta_box( 'postimagediv','page','side' );
}
}
If there's a better solution... please don't hesitate to post.
Thanks!
For anyone else looking to remove featured image support programatically (the comments should be self explanatory):
/**
* Removes the featured image metabox from specific pages (by ID)
* #note: populate the $excluded_page_ids_array array with page IDs
*/
function eh_remove_featured_image_metabox_from_specific_pages() {
// populate with page IDs to exclude featured image metabox from
$excluded_page_ids_array = array( 38, 29 );
// store the current post ID
$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'];
// check if the current page is in our excluded array
if( in_array( $post_id, $excluded_page_ids_array ) ) {
// remove featured image metabox
remove_meta_box( 'postimagediv','page','side' );
}
}
add_action( 'do_meta_boxes', 'remove_featured_image_metabox_from_specific_pages' );
After adjusting the array of pages to exclude, you'll want to add this snippet to your themes functions.php file.
Alternatively, you can remove the featured image from all pages, except specified ones - where the featured image metabox will remain.
/**
* Removes the featured image metabox from all pages except specified ones
* #note: populate the $page_ids array with page IDs
*/
function eh_remove_featured_images_metabox_from_all_pages_except_specified() {
// populate with page IDs to keep the featured image metabox on
$page_ids = array( 25, 31 );
$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'];
if( ! in_array( $post_id, $page_ids ) ) {
// remove featured image metabox
remove_meta_box( 'postimagediv','page','side' );
}
}
add_action( 'do_meta_boxes', 'eh_remove_featured_images_metabox_from_all_pages_except_specified' );
There is another solution. By editing the page.php
If your feature Image div Looks like below for example
<div class="thumbnail">
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
</div>
you can use
if (is_page( array( 42, 'about-me', 'Contact' ) );
// Returns true when the Pages displayed is either post ID :42, or post_name_slug "about-me", or post_title "Contact".
<?php
if (is_page( array( 42, 'about-me', 'Contact' ) ) ) {
?>
<div class="thumbnail" style="display:none;">
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
</div>
<?php
}else{
?>
<div class="thumbnail">
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
</div>
<?php}?>