Blurry portfolio featured images

I’m using Shapely and Jetpack and my portfolio featured images are blurry even though the uploaded images are larger than the image block on the web page, which Firebug shows is 750x1346px. My images are 1500 pixels wide.
I was also having trouble earlier with the portfolio images getting cropped and i found code to modify my functions.php file which fixed that issue:
add_theme_support( ‘post-thumbnails’ );
add_image_size( ‘shapely-full’, 1110, 530, true );
add_image_size( ‘shapely-featured’, 730, 350, true );
add_image_size( ‘shapely-grid’, 350, 300, true );
I changed all of the above “true” to “false” and that fixed the cropping problem. Could this have affected image resolution?

Here are my two portfolio items so far, both blurry:
http://kendrafloresdesign.com/portfolio/pureskinresolutions-com-skincare-company-website-design
http://kendrafloresdesign.com/portfolio/topsideroofingtexas-com-website-design

After updating the .php file i re-uploaded my 2 portfolio images thinking this would have solved the issue but it has not.
Is anyone able to assist with this issue? I feel like I’ve looked everywhere and tried everything to fix the blurriness.
Thank you!

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
Don’t know what you did in your functions.php but at this moment feature image is resized to 195*350px, for sure this is the result of your changes, can you please restore original function.php file? also, please disable Jetpack for a moment, then run regenerate thumbnails plugin
Thanks!
Colorlib Support Team

Thank you for your reply! I followed these instructions and the quality of the portfolio images in the posts are much better, but they are cropped on the individual post pages. They are also blurry on the main portfolio page. Here are the links:

http://kendrafloresdesign.com/portfolio/pureskinresolutions-com-skincare-company-website-design

Any ideas on why these are still blurry, and also any code i should change to prevent the cropping?

Thank you for your time!

Hey there

nice to hear :slight_smile:
now, the problem now you have only from jetpack side, this is jetpack portfolio and jetpack portfolio page,
can you try to create new portfolio pages? with new images? also, i see some php error codes when i hover over on the portfolios and this codes shows jetpack file problem, its good idea as well to open support ticket with their support

Thank you!
I have resolved the Jetpack error as well as the blurry images ( I selected “Display images and galleries in a gorgeous, full-screen browsing experience” to fix this).
My portfolio images on each portfolio post are still cropped. I switched my theme to WP’s Twenty Seventeen and they were not cropped nearly as short. When i check the code in Firebug its showing code: img.attachment-shapely-featured size-shapely-featured.wp-post-image as 750px x 359.583px and I’ve tried different codes in my Custom Css to change this without any luck, so I wonder if this has something to do with the theme. Here’s an example of a tall image that is being cropped: http://kendrafloresdesign.com/portfolio/mall-e-blast
Please advise if there is a different code i should try, or options i may have selected incorrectly. I have tried updating and deactivating/reactivating all plugins also.
Thank you for your help!

Hi,

Which size you want the image to be?

If there is a sidebar in the single portfolio pages, you can choose that in Appearance -> Customize -> Project Settings -> Project Single Settings -> Single Project Template = Full width, if you choose full width then the image size will be 1110* 530 and if that has a sidebar then the images will be 730 * 350.

If they are blurry, then I suggest you to regenerate the thumbnail using this plugin Regenerate Thumbnails – WordPress plugin | WordPress.org

Let us know,

Thanks,
laranz.

Thank you! Is there a code i can use to have the image height auto-adjust on each portfolio project page? (I tried adding that class to my custom css setting the height to “auto” and that didn’t work.) My projects vary greatly in height and those dimensions won’t be vertical enough for all of my vertical work, that would only work for my horizontal images. Here’s an example of an image that is getting cropped: http://kendrafloresdesign.com/portfolio/mall-e-blast Only a small section of the middle of the image is being shown.
I regenerated thumbnails and they are no longer blurry.
Thanks for your help!
Kendra

Hi there,

Essentially the image in use there is a different aspect ratio than the sizes that are set in the theme i.e. in the add_image_size functions in functions.php file and the image is getting the top and bottom parts cut off.

The best thing would be to use images with an aspect ratio close to the one on those image sizes you set to avoid the cropping. Wider images is what the aspect ratios are for and not images that are taller than wider.

Hope this clears things up.

Thanks so much for getting back to me so quickly. I tried adjusting the sizes in the functions.php on the lines noted above with no change. I am so bummed, I will just need to choose a new theme in this case if only horizontal images are possible.
Thank you

Hi,

If you change the image size means, after that you need to regenerate the thumbnails, using this plugin Regenerate Thumbnails – WordPress plugin | WordPress.org to reflect the new size, did you try that after you changed the image size?

Let us know,

Thanks,
laranz.

Thank you, I changed the image heights in functions.php and it worked this time! I have the regenerate thumbnails plugin. I uploaded a new image to test and its working now for all of my vertical images.
Thank you!

Hi,

Glad we helped. :slight_smile:

Let us know If you have any other questions. Please feel free to contact us again in the future regarding any other issues.

If you’re happy with our service, don’t forget to rate us: [Shapely] Reviews | WordPress.org

Thanks,
laranz.

Hi there,

First of all, I don’t know how to create new forum. Second, I have problem on Shapely theme where the homepage widget went missing. I check on Wordpress dashboard and it shows that I have homepage widget. How do I fix this?

Best,
Faris

Hi,

Make sure you choose the template of that page to be “Homepage” http://take.ms/IsOtR and make sure you set that page as the home page in Settings -> Readings. if not, please pass us the WP Login details in a private reply, we will investigate the issue.

Let us know,

Thanks,
laranz.