I've added the following code to my theme's functions.php file:
function add_custom_sizes() {
add_image_size('featured-thumbnail', 690, 500, true);
add_image_size('secondary-thumbnail', 460, 236, true);
add_image_size('related-thumbnail', 360, 262, true);
add_image_size('true-thumbnail', 337, 209, true);
add_image_size('search-thumbnail', 208, 130, true);
}
add_action('after_setup_theme', add_custom_sizes);
Within my template I have code such as:
<?php
if (has_post_thumbnail() ) {
the_post_thumbnail('featured-thumbnail');
} else { ?>
<img src="http://via.placeholder.com/690x500" alt="">
<?php } ?>
And this is the image it outputs:
<img width="690" height="407" src="https://s3.amazonaws.com/.../image-2440x1440.jpg" class="attachment-featured-thumbnail size-featured-thumbnail wp-post-image" alt="" />
The original size of the image is 2440px x 1440px so I don't understand why it's not respecting my height category. It's a brand new image that's been uploaded, but just to double check I've regenerated my thumbnails but the problem persists. I'm at a complete loss. I literally just banged my head against my desk.
Because it's preserving your aspect ratio
2440 / 1440 = 1.694
690 / 407 = 1.695
Related
I was looking for a way to make a "flip image" in the woocommerce product loop when you hover mouse, I know there are plugins that do this function but I think it's a very simple thing to need to use a plugin, I've been searching and I ended up finding a solution.
here's the code:
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id);
}
and the css:
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1){
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1):hover {
opacity: 0;
transition: opacity 0.5s;
}
my code did the job but the image is coming at a very low resolution
is there a way for it not to appear with such a low resolution?
I'm using a storefront child theme
nevermind I found out that some information was missing in my code here is the solution I found:
you need to set the image size: wp_get_attachment_image();
//set image size full size
wp_get_attachment_image($secondary_image_id, 'full');
//set image size medium size
wp_get_attachment_image($secondary_image_id, 'medium');
//set image size thumbanil size (default)
wp_get_attachment_image($secondary_image_id, 'thumbnail');
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id, 'full');
}
I've did this in the functions.php:
function wpse_setup_theme() {
add_theme_support( 'post-thumbnails' );
add_image_size( 'small-thumb', 800, 600, true );
}
add_action( 'after_setup_theme', 'wpse_setup_theme' );
Than, if I do this:
<? the_post_thumbnail( 'small-thumb' ); ?>
it works correctly (taking the "cropped" image). But if I do this:
<? echo get_the_post_thumbnail_url(get_the_ID(), 'small-thumb') ?>
It always choose the "default" (full) image. The same with:
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'small-thumb' );
echo $image[0];
Where am I wrong?
After adding this code did you regenerated thumbnails? As adding code won't regenerate thumbnail. Please go a head and regenerate thumbnail it'll work
My jpg is 4kb, but when I upload it to the server, the PHP program writes it much larger, as 43kb, it's large and fuzzy, instead of being small and clear. How can I maintain the width and height? I've tried resizing after the photo is saved, but nothing happens. This is the code for the upload, and save.
<?php
// retrieve
echo "Request received";
$p= $_FILES["file"];
move_uploaded_file($p["tmp_name"], "pic3-1.jpg");
if ($p==nil) { echo "no photo"; }
// reply
$data = Array("Reply"=>"Imaged saved at server");
echo json_encode($data);
?>
Added to Xcode 8, Swift 3. The resolution is clear:
UIGraphicsBeginImageContext(CGSize(width:75, height: 75))
photo2.draw(in: CGRect(x: 0, y: 0, width: 75, height: 75))
photo=UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
i'm trying to edit the output of add image in posts the normal code from wordpress is
<img src="http://huemix.ly/wp-content/pics/pic.jpg" />
i want to replace that output with
<div class="huemix">
<img class="posts-img" src="http://huemix.ly/wp-content/pics/pic.jpg" />
<a href="http://huemix.ly/wp-content/pics/pic.jpg" class="fancybox" ></a>
<div class="fancy"></div>
</div>
all my try goes down :(
You need to search proper chunk of code in wordpress functions file. The file should be named post.php and should be located in wp-includes. The function name should be wp_insert_attachment().
Or using filters:
<?php
add_filter( 'image_send_to_editor', 'my_image_func', 10, 7);
function my_image_func($html, $id, $alt, $title, $align, $url, $size ) {
$url = wp_get_attachment_url($id); // Grab the current image URL
$html = "<img src="$url" class="uhuhu"/>";
return $html;
}
?>
Users on my site upload images that are less than my WordPress theme's essential thumbnail dimensions. How can I force these types of images to stretch vertically or horizontally so there is no blank space?
My wp-admin>settings>media>thumbnail size is set to 124px x 156px. Uploaded images that are 60px x 190px destroy the website layout. www.sharehouse.co is the test site.
This code below is what needs to be altered.
<div class="post-left">
<a href="<?php the_permalink(); ?>" <?php if ((get_option('cp_ad_image_preview') == 'yes') && (cp_get_image_url_raw($post->ID, 'large', 1) == true)) { ?>class="preview" rel="<?php echo cp_get_image_url_raw($post->ID, 'large', 1); ?>" <?php } ?>><?php if(get_post_meta($post->ID, 'images', true)) cp_single_image_legacy($post->ID, get_option('thumbnail_size_w'), get_option('thumbnail_size_h'), 'preview'); else cp_get_image_url_feat($post->ID, 'thumbnail', 'preview', 1); ?></a>
</div>
So, the first thing you need to do is strip the hardcoded width and height attributes from the img HTML that WordPress creates. It figures you should have those dimensions and forces you to use them.
Taken from: https://wordpress.stackexchange.com/questions/5568/filter-to-remove-image-dimension-attributes
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
Then it's just CSS
.attachment img {
width: 100%; /* scale to width of container, or whatever you want */
}