Thanks for looking here and trying to provide some useful answer. Recently I have downloaded the plugin https://wordpress.org/plugins/olevmedia-shortcodes/ and it works really fine. But when trying to use the short-code for "Recent Post" i'm facing image-sizing related issue that you see on the image attached below:
It looks really ugly. I opened a code and found the small piece of code for this function:
$out .= '<div class="omsc-recent-posts-title"><h3>'. get_the_title() .'</h3></div>';
if( $thumbnail && has_post_thumbnail() ) {
$img = wp_get_attachment_image_src( get_post_thumbnail_id(), apply_filters('omsc_sc_recent_posts_img_size', 'medium'));
if($img) {
$img_html=apply_filters('omsc_sc_recent_posts_img', '<img src="'.$img[0].'" alt="'.esc_attr($post->post_title).'" />', array(
'img_src' => $img[0],
'link' => get_permalink(),
'alt' => $post->post_title,
));
$out.='<div class="omsc-recent-posts-thumb">'.$img_html.'</a></div>';
}
}
Then I look on the image size and it says:
$img = wp_get_attachment_image_src( get_post_thumbnail_id(), apply_filters('omsc_sc_recent_posts_img_size', 'medium'));
Checking through FireBug For some posts the "Medium" size is set to 222x221, for others 300x300 and for the rest 222x167
All I want to do is to make all thumbnails having the same size. So, I created this piece of code for my theme's function.php file:
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'custom-recpost-thumb', 222, 221,true );
}
and then for the plugin php file I made a call to the function in this way:
$img = wp_get_attachment_image_src( get_post_thumbnail_id(), apply_filters('omsc_sc_recent_posts_img_size', 'custom-recpost-thumb'));
I see the same. Absolutely no changes has been made. What I've done wrong?
the problem as I can see it is that the pictures you upload is not the same dimensions so it will fit your width and make the height auto there are pretty much two ways you can get around this 1. fix your pictures before you upload or fit it with css no.2= make your box that holds your img the width and height that you want and make it overflow hidden then take your image and say it have to be the same height as the box and the width have to be auto the reason for this that most pictures is made as a landscape so in that way your pictures can fit.. for the record it is not a pretty way to do it and I would recommend fixing you pictures before you upload them
Different sizes of original images will create differently sized "medium" images. This is because the medium settings in WordPress are there to accommodate images of different sizes. In general, those pixel settings provide reasonably good looking medium sized images for any size original image. I suspect WordPress is overriding your function call to show "the best" image it can, based on its algorithms and image optimization.
Even with the coding options for WordPress.org, there are still some universal settings that WP will employ to create "good" websites. Maybe it's a reputation thing, maybe it's another example of technology organizations telling users what is best for them.
In any case, I agree with Anker that optimizing your images before you upload them is a better solution. It will give you more control, and improve the chance that WP will display your images as you want.
Related
I'm building a small photography site and looking to protect the images the best I can.
(I know, I know - you can't protect the images once they're on the
internet)
So - to do this, instead of using an annoying disable-right-click-using-javascript method, I'm loading the watermarked thumbnail images using base64 to obfuscate the filepath.
Code I'm using, if anyone's interested. Feel free to suggest improvements/criticise:
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'shop_catalog' ); ?>
<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents($image[0])); ?>">
This works great on content-single-product.php, but does anyone know what code is loading the images in the [best_selling_products] and [recent_products] shortcodes? I'm in class-wc-shortcodes.php, but the query doesn't seem to be loading the images from here...
So why don't I just load small thumbnail images?
Good question. Because we're planning to sell photos through the site, the high-res image has to be loaded as the featured image (to be sent though to the printing API) - and anyone with half a brain can look at the thumbnail url and get the full high-res image url.
Any suggestions on how to achieve this, or am I just best off scrapping the shortcodes and building my own query?
Okay - so as requested, here's my solution:
As #helgatheviking mentioned, the template which controls the product overview iswoocommerce/content-product.php - or as WooCommerce puts it:
The template for displaying product content within loops
There are a number of hooks here, including woocommerce_template_loop_product_thumbnail - the hook which controls the product thumbnails. So quite simply (in the end) all we need to do is:
1) Unhook the thumbnails using:
remove_action ('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
2) Add an action with our own custom thumbnail, or anything else:
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_custom_template_loop_product_thumbnail', 10);
function woocommerce_custom_template_loop_product_thumbnail() {
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'shop_catalog' );
echo '<img src="data:image/gif;base64,' .base64_encode(file_get_contents($image[0])) . '">';
}
Thanks to #helgatheviking for pointing me in the right direction.
More on WooCommerce Hooks at: https://docs.woocommerce.com/document/introduction-to-hooks-actions-and-filters/
I have maked site on WP. There are two slider-bars and some sections with img. Resolutions of this img are different.
I want ( need ) to use add_image_size function to crop image for my tasks, but how I can bind func. add_image_size with imgs for one of the sections / slide-bars? I don't understand, how i must declare that thumbnail for post (for ex.) must be cropped by add_image_size. Sorry, may be for this is stupid question
Usually you will declare a new image size in your functions.php, something like:
add_image_size( '1280-thumb', 1280 );//1280px wide, free high
and then call that image size wherever you need it. So what you need to do is create as many image sizes as you need and then call each specific size in each sidebar or anywhere else on your site where those images might be needed.
You could limit when these thumbnails are created based on the post type they are uploaded to for example with something like this:
if( get_post_type() == ‘your_post_type’ ) {
add_image_size( '1280-thumb', 1280 );//1280px wide, free high
}
This will only create the ‘1280-thumb’ for images uploaded directly to posts belonging to a custom post type named ‘your_custom_post_type’.
This question requires some php, some jquery, and some general programming logic.
With generous help in previous questions here, I have built a script that scans WordPress posts for image attachments and, if it finds any, moves these to list items in a newly created <ul> outside of the post. The reason for this is to make the images available to a slider (RoyalSlider) that I am hard-coding into the theme (I do not want to use the WP plugin version for several reasons).
You can see the site I am working on here.
The same script is feeding several parts of the site - the sliders in the top two sections, and the client logos in the last section.
I now need to add thumbnail navigation to the second section's slider. As you can see if you inspect the code, I have modified the WP loop (in the page template for this section) so that it is returning the thumbnails for any images attached to the post (as well as obviously the images themselves).
This is the code I am using to do this:
<?php
$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
foreach( $images as $imageID => $imagePost )
echo wp_get_attachment_image($imageID, 'thumbnail', false);
?>
The problem is that this currently is interacting with my jQuery script so that these thumbnails get moved to list-items and included in the slider as images! The goal instead is to include each thumbnail within the <img> tag of its respective image, like this:
<img class="rsImg" src="image.jpg" data-rsTmb="small-image.jpg" alt="image description" />
So here's the logic part of the problem: what's the best way to get these thumbnails to behave like thumbnails, not images? I suspect that I need to somehow tag them in the WP page template loop before they ever get 'echo'd into the post, so that the other script doesn't pick them up? i.e. maybe pass them through as a sequence of variables, then use my script to check for these and if it finds them, assign them to the images in sequence, first to last? Is this possible? Or are there better ways of going about this? Can I maybe output both images and thumbnails in the desired code snippet directly from the WP loop?
I have almost zero knowledge of how to write PHP beyond basic includes, so cannot really experiment with this.
Any help with this is hugely appreciated - I understand this question is a tall order as it requires expertise in several areas and is quite specific, but I think it may help others in similar situations, and I'd certainly learn a lot from know how to approach/accomplish this!
I don't know if I got it right. I understood you don't want the thumbnails do be matched with your jQuery.
You can solve it just modifying the matched elements of your jquery code. It is not the best solution, but the simpler based on what you have done.
Add a class to the thumbnails:
echo wp_get_attachment_image($imageID, 'thumbnail', false);
to
echo wp_get_attachment_image($imageID, 'thumbnail', false, array('class' => 'thumbsimg'));
Reference: http://codex.wordpress.org/Function_Reference/wp_get_attachment_image
And change your jQuery code:
var matchesEl = "img, iframe"
to
var matchesEl = "img:not(.thumbsimg), iframe"
Instead of
echo wp_get_attachment_image($imageID, 'thumbnail', false);
^ This returns an HTML img element.
use
wp_get_attachment_image_src( $imageID, $size, $icon );
^ This returns an Array that contains Url, Width, Height of the image.
example in your case:
$images =& get_children(
array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_parent' => $post->ID,
'posts_per_page' => -1
)
);
foreach ( (array) $images as $imageID => $imagePost ) {
// Getting the full image size and thumbnail
$thumbnail = wp_get_attachment_image_src( $imageID, 'thumbnail');
$full = wp_get_attachment_image_src( $imageID, 'full');
echo '<img class="rsImg" src="'. $full[0] .'" data-rsTmb="'. $thumbnail[0] .'" alt="'. $imagePost->post_content .'" />';
}
I currently have featured images set on my child Twenty Twelve theme. I use the featured image as a dynamic header to go at the top of the page when on a post.
However, the featured images I use have text over them so look weird and cut off when put into the excerpt thumbnail in a square format.
Is there a way I can still keep my featured images set, but pull the first content post image and display it as a thumbnail in my excerpts? I have found how to pull the first image across but it displays as a full size image. I really want it to automatically be a 'thumbnail' in terms of dimension and cropping.
Essentially I want to use the 'Easy Add Thumbnail' plugin but this does not work if I already have featured image set...
Help?
You can define a specific image size in your functions.php file using add_image_size(); (http://codex.wordpress.org/Function_Reference/add_image_size);
Essentially you just add this to your functions file....
add_image_size( 'seattle-sized', 420, 420, true );
Then, when calling that first image, you can apply 'seattle-sized' to the image like this...
<?php echo wp_get_attachment_image( 42, 'seattle-sized' ) ?>
The trick is that true at the end of add_image_size, it tells it to crop that bad boy.
Hope this helps!
I am trying to change the size of a thumbnail in wordpress, but it keeps making it exactly square even though I want to stretch the width moreso than the height.
Im not sure why this doesnt work. Any help would be great
In functions I have
// Used for large feature (header) images.
add_image_size( 'large-feature', $custom_header_support['width'], $custom_header_support['height'], true );
// Used for featured posts if a large-feature doesn't exist.
add_image_size( 'small-feature', 500, 300 );
and below
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'results-thumb', 70, 55, true);
}
and where im calling the thumbnail...
<?php echo the_post_thumbnail('results-thumb'); ?>
Heres the site, at the bottom in the latest results section you'll see the thumbnails..
http://limerickfc.hailstormcommerce.com/cms/
Ok, I just fixed it with css workaround by applying a min-width rule to the containing div, although Im still not sure this is the best way to go about it. But I wont accept the answer yet as Im sure Ill run into this situation again
You probably need to regenerate the sizes. Try installing and running this plugin http://wordpress.org/extend/plugins/regenerate-thumbnails/