Might be good to mention that the original image is 1000x1000 pixels. The 500x500 pixels image is auto generated by WordPress, while I have added this snippet to the functions.php;
In order for your images to display crisp on devices which have higher pixel densities (such as smartphones), you'll need to provide the image at a larger size. A Good rule of thumb would be to upload it at 1.5x or 2x the normal size. Here's some further reading to get familiar with the general topic, and it's not something specific to Salient: https://blog.prototypr.io/making-sense-of-device-resolution-pixel-density-40922aeb8a6
You can then constrain it with CSS or through the image element "max width" option. However, if you'd like to keep the same image to avoid having to swap it in various pages, you could also simply use CSS to reduce the image size on mobile only, this allowing it to be crisp. If you'd prefer to go that route,
add this into the custom css box located in the Salient options panel > general settings > css/script related tab:
@media only screen and (max-width: 1000px) {
#ajax-content-wrap .img-with-animation[src*="blue-"] { max-width: 100px;
}
}
I don't think that that is the issue, because the canvas itself is 401x401. Wordpress seems to use the image with the -500x500 option, but when I remove this from the img url in the inspector the image is no longer blurred (so when using the 1000x1000 , aka original image).
So I already did the 2x image pixels (1000px), but that did not seem to fix it.
I just want WordPress / the theme to use the original image that I uploaded, not the -500x500.jpg version. :)
If you want to see what I mean, please go to www.lantack.com/klanten and choose a rondom image. Inspect that image and remove the '-500x500' from the image url. You'll then see that the quality is perfect, but with the '-500x500' after the image name it get's blurred.
The next release will be adding the option to specify a custom image size for the team member element. If you'd like immediate access to the change, you can download a pre-release version from here: https://www.dropbox.com/s/7iepq6e25au1ygc/salient.zip?dl=0
After updating the theme, ensure to also update the included Salient Core plugin to get access to this specific feature.
I'm just wondering where I can find it. I've updated the theme + the core and some other plugins, but I can't find it. I'm probably overlooking this... :)
Hi, I use the Team Member items to showcase our customers, but the images use the *image-url*-500x500.jpg (https://www.lantack.com/media/Oesterdam-klant-500x500.jpg, for example).
I have tried to use filters to disable the lower quality images, but nothing seems to work. How can I use the FULL quality image for the team images?
See the attached image too;
The image is inside the div with class 'team-member-image-inner img-loaded'.
Might be good to mention that the original image is 1000x1000 pixels.
The 500x500 pixels image is auto generated by WordPress, while I have added this snippet to the functions.php;
add_filter( 'big_image_size_threshold', '__return_false' );
Hi Brian,
In order for your images to display crisp on devices which have higher pixel densities (such as smartphones), you'll need to provide the image at a larger size. A Good rule of thumb would be to upload it at 1.5x or 2x the normal size. Here's some further reading to get familiar with the general topic, and it's not something specific to Salient: https://blog.prototypr.io/making-sense-of-device-resolution-pixel-density-40922aeb8a6
You can then constrain it with CSS or through the image element "max width" option. However, if you'd like to keep the same image to avoid having to swap it in various pages, you could also simply use CSS to reduce the image size on mobile only, this allowing it to be crisp. If you'd prefer to go that route,
add this into the custom css box located in the Salient options panel > general settings > css/script related tab:
@media only screen and (max-width: 1000px) { #ajax-content-wrap .img-with-animation[src*="blue-"] { max-width: 100px; } }Thanks.
Hi Judith,
I don't think that that is the issue, because the canvas itself is 401x401.
Wordpress seems to use the image with the -500x500 option, but when I remove this from the img url in the inspector the image is no longer blurred (so when using the 1000x1000 , aka original image).
So I already did the 2x image pixels (1000px), but that did not seem to fix it.
I just want WordPress / the theme to use the original image that I uploaded, not the -500x500.jpg version. :)
If you want to see what I mean, please go to www.lantack.com/klanten and choose a rondom image. Inspect that image and remove the '-500x500' from the image url. You'll then see that the quality is perfect, but with the '-500x500' after the image name it get's blurred.
I have put them side by side, this is what I mean;
Hey Again,
You will probably have to override the images sizes. Please view: http://themenectar.com/docs/salient/modify-image-sizes/ .
Thanks
ThemeNectar Support Team
Hi Tahir,
I have tried every option, but none seem to work.
It still uses the 500x500 image, instead of the uploaded image.
This is what I now use in the functions.php;
=========
add_action( 'after_setup_theme', 'salient_child_remove_image_sizes', 11 );
function salient_child_remove_image_sizes() {
/* PORTFOLIO & IMAGE GRID SPECIFIC STYLES */
remove_image_size( 'portfolio-widget' );
remove_image_size( 'portfolio-thumb_small' );
remove_image_size( 'portfolio-thumb_large' );
remove_image_size( 'regular_small' );
remove_image_size( 'regular' );
remove_image_size( 'wide_small' );
remove_image_size( 'wide' );
remove_image_size( 'tall' );
remove_image_size( 'wide_tall' );
remove_image_size( 'wide_photography' );
/* GENERAL SIZES */
remove_image_size( 'large_featured' );
remove_image_size( 'medium_featured' );
}
Escalating this to the developer for further response.
Thanks
ThemeNectar Support Team
Hey Brian,
The next release will be adding the option to specify a custom image size for the team member element. If you'd like immediate access to the change, you can download a pre-release version from here: https://www.dropbox.com/s/7iepq6e25au1ygc/salient.zip?dl=0
After updating the theme, ensure to also update the included Salient Core plugin to get access to this specific feature.
Kind regards,
Hi, thank you for this! :D
I'm just wondering where I can find it.
I've updated the theme + the core and some other plugins, but I can't find it.
I'm probably overlooking this... :)
Oh never mind, it is in the page... I was looking for it in the 'Salient' section. This works perfect!
Glad to hear, Brian