I have 2 questions concerning images on the blogs:
1. Is it possible to define the height of the thumbnail image shown on the blog landing page? I am using the masonry setup with 1 column and no sidebar. I'd like the height of the image to be shorter. Currently, it seems like the blog is using a predefined height. Even when I upload images that are the proper full width, they are being displayed based on a defined height.
2. I am uploading my images as Retina resolution (2x what is needed to display the image), yet, the images are rendering blurry. I have uploaded the images from scratch, I haven't made any adjustments to the settings of the theme. The blog is the only place where it is happening. Based on looking at the code, it looks like the render engine is downsizing the images to 845x590 but fitting them to an 1140x796 space.
2— That is happening because a lot of users use 3 or 2 blog posts for row on the blog area with the sidebar too, and we didn't wanted to place a very big image there because is not needed and it would make browsing Blog page slower, because the size of the images.
Please go to wp-content/themes/kalium/ and find functions.php, then on the end of the code paste this snippet
I really appreciate all of your teams efforts, I plan on writing a great review when I am done with this first pass of the site. Unfortunately the blog solutions that you outlined do not seem to be working as we had hoped:
1. Attached is an image that I have uploaded and put in as the featured image for the blog post titled "New Work: Sleep Solutions Guide" The image is sized at 1140x640. I updated the custom CSS in WP on the blog landing page to include the snippet of custom CSS that you suggested and updated it so that the max height would be 640. While the height is working, the image is still being scaled in the container.
Just to be sure of things, I deleted my original images out of the media folder, I deleted them from the post as well, and then uploaded new images (with new names), just to be sure it wasn't a specific post refresh issue.
2. I added the code snippet to the functions.php file per your note, and updated it, but I am assuming that due to the first issue this one is being off set.
Thanks again for your continued support, I am hoping we can get this resolved.
Attached is a webkit screen grab that I did. The theme is doing an image render and using images scaled at 845x592. By putting in that custom CSS and defining a height on the container we are simply cropping the image. The issue is that the image is being scaled and posted as a rendered asset at a different proportion than what the container is set at.
If you look at the attached grab you will see this. Using webkit I changed the asset name to my original file and it displayed properly and at the proper resolution.
My current fix has been to go into the file labeled laborator_thumbnails.php (themes>kalium>inc>laborator_thumbnails.php). I changed the dimensions on this line: add_image_size( 'blog-thumb-3', 1140, 640, true );
This maybe a redundant effort though. Is there a more efficient way to fix this?
It seems because of the sliders you use, the images are being pulled off from different file so here is the code you should add to the "functions.php" file and that should be a total solution for you:
I have 2 questions concerning images on the blogs:
1. Is it possible to define the height of the thumbnail image shown on the blog landing page? I am using the masonry setup with 1 column and no sidebar. I'd like the height of the image to be shorter. Currently, it seems like the blog is using a predefined height. Even when I upload images that are the proper full width, they are being displayed based on a defined height.
2. I am uploading my images as Retina resolution (2x what is needed to display the image), yet, the images are rendering blurry. I have uploaded the images from scratch, I haven't made any adjustments to the settings of the theme. The blog is the only place where it is happening. Based on looking at the code, it looks like the render engine is downsizing the images to 845x590 but fitting them to an 1140x796 space.
Any help would be greatly appreciated.
Rick
Hi Rick,
1— The only solution is this:
2— That is happening because a lot of users use 3 or 2 blog posts for row on the blog area with the sidebar too, and we didn't wanted to place a very big image there because is not needed and it would make browsing Blog page slower, because the size of the images.Please go to wp-content/themes/kalium/ and find functions.php, then on the end of the code paste this snippet
Hi Ylli,
I really appreciate all of your teams efforts, I plan on writing a great review when I am done with this first pass of the site. Unfortunately the blog solutions that you outlined do not seem to be working as we had hoped:
1. Attached is an image that I have uploaded and put in as the featured image for the blog post titled "New Work: Sleep Solutions Guide" The image is sized at 1140x640. I updated the custom CSS in WP on the blog landing page to include the snippet of custom CSS that you suggested and updated it so that the max height would be 640. While the height is working, the image is still being scaled in the container.
Just to be sure of things, I deleted my original images out of the media folder, I deleted them from the post as well, and then uploaded new images (with new names), just to be sure it wasn't a specific post refresh issue.
2. I added the code snippet to the functions.php file per your note, and updated it, but I am assuming that due to the first issue this one is being off set.
Thanks again for your continued support, I am hoping we can get this resolved.
Rick
Not sure if this will help.
Attached is a webkit screen grab that I did. The theme is doing an image render and using images scaled at 845x592. By putting in that custom CSS and defining a height on the container we are simply cropping the image. The issue is that the image is being scaled and posted as a rendered asset at a different proportion than what the container is set at.
If you look at the attached grab you will see this. Using webkit I changed the asset name to my original file and it displayed properly and at the proper resolution.
My current fix has been to go into the file labeled laborator_thumbnails.php (themes>kalium>inc>laborator_thumbnails.php). I changed the dimensions on this line: add_image_size( 'blog-thumb-3', 1140, 640, true );
This maybe a redundant effort though. Is there a more efficient way to fix this?
Rick
Hi Rick,
It seems because of the sliders you use, the images are being pulled off from different file so here is the code you should add to the "functions.php" file and that should be a total solution for you:
Also keep the previous code that I gave to you, that is just as a backup in case you use images without slider.Hopefully this will help you.