I am working on a wordpress website and I found that the articles' pictures on the main page are of poor quality ; but the pictures I loaded in wordpress media are good ones.
In ...wp/content/upload, I saw that the template make copies of the pictures loaded : 1024x768 ; 150x150 ; 220x165 ; 300x225 ; 700x400 ; 768x576.
With firefox "examin object", I saw that the picture loaded is the 220x165 one. Is it possible to force selection of a better quality one ?
Many thanks for your help !
All you need to do is paste the following code in your theme’s functions.php file or in a site-specific plugin.
add_filter('jpeg_quality', function($arg){return 100;});
When you set the value to 100, it means that WordPress compress the image at its highest quality.
Here's a good video about it:
https://www.youtube.com/watch?v=ToMjVp5sDf0
Related
Trouble with a blurred thumbnail at my website project
Greetings.
Ladies And Gentleman
I ask some question about this picture I've sent, what I want to ask about is how to make
this picture's blurred thumbnail turned into High-Definition.
enter image description here
already try to turn off lazy loading with this code but loading="lazy"
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Website using Wordpress
this is the link https://cloudteamize.com/test-porto/
Increase the size of the thumbnail on the Wordpress settings "Settings > Media" I suggest you put it at least 650px.
You will always see it blurry because is a flexible container and often stretch larger than the actual image size (It varies on viewport size or screen resolution).
pd: You will need to regenerate the thumbnails after or reupload the image and use the latest version. When you change those settings old images don't create the new thumbnail versions automatically.
THE SOLUTION IS FOUNDED:
the problem is the image link that my plugin using called: Portofolio Carousel is adding 350x181.png at the end of the link, I think that make my image use the lower quality.
example:
the original file is -> mmd.png
but in that plugin -> mmd-350x181.png
i take the values of my src then remove the 350x150.png to only .png using my massy javascript like this:
$ = jQuery;
$(document).ready(function() {
const imgs=document.querySelectorAll('#portofolio img');
imgs.forEach(img => console.log(img.removeAttribute('srcset'), img.removeAttribute('loading'),img.src=img.src.replace("-350x181","")));
});
some how if I not doing my code inside console.log, the code didn't run. I think that is really weird, but some how when I try to put that in console.log, it just works so if you can give me suggestions or make this code clearer, that's will be great.
I found a weird bug, in cropping image in wordpress
I used WP_Customize_Cropped_Image_Control to crop image. In there I set the width 750 & height 500
that works well but that was showing error while cropping some other image
*It made me crazy, after spending so many hour, I realized that (the error and not showing cropping frame) it occur with the images
which have the same aspect ratio as I provided in WP_Customize_Cropped_Image_Control (if the aspect ratio matched then error occur)
if I don't provide aspect the ratio and set flex width and height then it works well
*Other thing I noticed that I have a wide image that is 1920 X 742
which takes the whole width of Crop Image modal of Wordpress, so there is also causing error (not showing cropping frame and showing error)
If I resize my browser window then It show the cropping frame and can crop the image without any error
After some long research, I understood that it is a known bug of a jQuery library that is used by Wordpress and this library has not been updated for a long time. There is a workaround but it is a bit tricky. If you really need it, here is the solution for the curious ones:
The file is /wp-includes/js/imgareaselect/jquery.imgareaselect.js
Copy your own version (do not make a change in core WP files) and put it like somewhere in your template directory for example a js directory. Find this code snippet:
imgWidth = $img.innerWidth();
imgHeight = $img.innerHeight();
change it to this
imgWidth = Math.ceil($img.innerWidth());
imgHeight = Math.ceil($img.innerHeight());
Then you should dequeue and deregister the core file and enqueue your version. In case you do not know how to do it, I also put it here for the ones who need it.
Put the code snippet in your functions.php file.
// change custom scripts example
add_action( 'wp_print_scripts', 'cleanup_scripts', PHP_INT_MAX);
add_action( 'wp_print_footer_scripts', 'cleanup_scripts', PHP_INT_MAX);
function cleanup_scripts() {
wp_deregister_script('imgareaselect');
wp_dequeue_script('imgareaselect');
wp_enqueue_script('imgareaselect', get_template_directory_uri() . '/js/jquery.imgareaselect.min.js', array('jquery'), '1.0', true);
}
'imgareaselect' is the handle of the file that is used by Wordpress core.
I also put the source here in case you want to dig deeper.
https://github.com/google/web-stories-wp/issues/8398
I have an issue with wordpress image file paths.
Have no idea how this happened but all images are blank on media gallery, and after a lot of trying different things to fix have realised that the image filepath is showing
https:///wp-content/
as opposed to
https://example.com/wp-content/
Have tried search and replace which I thought would fix, but hasnt worked...any ideas much appreciated!!!
You can try to install the AJAX Thumbnail Rebuild plugin to the get all images in Media Gallery tab.
Thanks!!
I have a Wordpress site using the TwentySeventeen theme, which has been dormant for a year or more. When it was in use, the header graphic was somehow reduced in height. I have no information on how that was done. I now want to restore the header height to the default height for TwentySeventeen.
I have searched and looked at every question and answer I can find. After checking all the css and php where I can find reference to header dimensions, the static homepage is showing the full size, but posts and pages are still showing a reduced header size.
Finally, I downloaded a fresh copy of the TwentySeventeen theme and uploaded it to the site, overwriting all existing files. Still the posts and pages are showing a reduced header size.
There is no custom css in the dashboard settings. I have cleared my browser cache. I don't know where else to look. Can anybody tell me what is left to check?
Added in response to comment below:
I'm a bit out of my depth with the Inspector, and I don't know what you need to see from it. There are three different panes, all of which have more than one screenshot of content. Unfortunately I am not able to publish the URL at this point.
The first screenshot is the Inspector for static homepage -- which displays the full-size header graphic.
The second screenshot is the Inspector for posts and pages -- which displays a shallow header graphic.
Both share the same style.css file.
I note the line:
box-sizing: inherit;
-- but I'm not sure if this is pertinent?
I am working on wordpress(3.5.2) project but getting one issue in case of image resizing. In wordpress when i upload any image its auto resizing to thumbnail,medium and larger but the name of image taking like image-300x300.jpg but i want, for thumbnail it should be imagename-thmbnail.jpg, for medium imagename-medium.jpg and for large imagename-large.jpg
I have made changes in Setting/Media - image re-size but it not coming consistence image name .
I do appreciate for advance help.
If I follow you correctly Neil,
You are wanting the image files created in the WordPress upload/sizing routine to be named as follows:
[imgname]-thmbnail.jpg,
[imgname]-medium.jpg,
[imgname]-large.jpg.
To the best of my knowledge this is not an option. If you can provide more detail on why you want to do this I may be able to help more.
You can declare custom image sizes in your functions.php file like so:
`add_image_size( 'thmbnail', 80, 80, true );`
and then use it in your theme:
`the_post_thumbnail('thmbnail');`.
Just be aware WordPress uses the following natively: thumb, thumbnail, medium, large, post-thumbnail.