[Ellen Monroe]

I have two questions related to images – I’ll lump them together because they may be interrelated.

1. IMAGE QUALITY: My job has taken really good quality staff portraits and the quality of these images is not coming through. The original image size is 1920x2408px, and I would like for the images displayed on the directory to still be references to the original image, rather than shrinking the image into a new, smaller version. Obviously, the display size can’t be the full 2000px wide image. The shrinking seems to be part of the reason there is a substantial reduction in image quality. I tested this theory by changing the “large image” dimensions to 1920x2408px, and the result is still more blurry than the image I have on my computer, so the shrinking may not be the only reason. I have already set the jpg quality to “100%” – I’m not sure what else I can do, but I need the pictures to look better. I’ve noticed the lower quality images in your example websites, but thought that this was just due to the images provided, but now I’m worried that the plugin/template is causing this degradation.
2. IMAGE PROPORTIONS: I am having issues with not being able to control the image proportions. I have had some success with changing the image sizes, but I have not been able to adjust the proportion — right now, no matter what I do, the images are wider than they are tall, and because these are headshots, they need to be taller than they are wide. I have tried adjusting the image height and width both in the short code and in the plugin image settings, without any luck.

Any guidance you can give on these issues would be greatly appreciated! Thanks so much for your help and being such an active support.

[Steven Zahm]

@ Ellen

Set grid size to 320 x 400:

Example:

[connections image_width=320 image_height=400]

That will ensure the images are scaled down to the same ratio of the source images. Well, technically the height should be 401.333333333. Rounded down should be fine.

Changing the quality on the image settings will actually not have any effect on Gridder since it dynamically creates the required image sizes it needs. Those settings only affect the default cached images sizes which are created when an image is added to an entry.

Connections defaults to the same quality as core WordPress. This default can be changed by adding a filter.

add_filter( 'cn_output_default_atts_image', 'cn_image_quality_100' );
function cn_image_quality_100( $atts ) {
    $atts['quality'] = 100;
    return $atts;
}

Use the Code Snippets plugin to add this filter.

Hope this helps, let me know!

[Ellen Monroe]

Hi Steven,

Thanks for getting back to me! I already have the grid size set as the same ratio, and have changed the image settings so that they should not crop — unfortunately, it still ends up cropping, dramatically changing the image proportions. Is this due to the text overlay? I attached an image so you can see that the images end up looking really ridiculous. How do I avoid this — I need to be able to see all of (or at least MORE of) the person’s headshot.

Will update you on the image quality issue once I go through our plugin installation process.

Thank you!

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Ellen

Yes, the overlay is placed over the image. The aspect ratio is correct based on the 1920x2408px original image size.

You need to adjust for the height of the overlay. So, add 70 to 100 to the image height.

[Ellen Monroe]

Hi Steven,

First of all, your support is top notch, and I really appreciate it.

We are getting closer! I have adjusted for the overlay, and that has worked to an extent. See the below two images (185x400px for test 2, 184x350px for test 3). This has solved the proportion issue as the images are now the correct proportion, but they are still being cropped/zoomed in, regardless of whether I select “no cropping” or not. I would like the staff’s heads to have a little more breathing room, and for people to not have their hair or neckline cut off.

Let me know if you have suggestions on how to accomplish this!

Thanks,

Ellen

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Ellen

Connections like most plugins/themes use a center weighted scale/crop.

Add this filter to change this default:

function cn_output_default_atts_image_filter( $atts ) {

    $atts['zc'] = 2;

    return $atts;
}
add_filter( 'cn_output_default_atts_image', 'cn_output_default_atts_image_filter' );

Valid values:

• 0 Resize to Fit specified dimensions (no cropping)
• 1 Crop and resize to best fit the dimensions (default behaviour)
• 2 Resize proportionally to fit entire image into specified dimensions, and add borders if required
• 3 Resize proportionally adjusting size of scaled image so there are no borders gaps

I think 2 is the only other crop mode that will work well in your use case.

Hope this helps!

[Ellen Monroe]

Hi there,

Just confirming that I should be adding this filter using the Code Snippets plugin? I can’t add custom CSS to the theme or adjust the shortcode to make this happen?

Additionally, what is the difference between this and the image settings within the plugin? It seems like these are the same options as exist in the image settings, and those have very little effect.

Thanks for your patience and helping me get this page off the ground.

Ellen

[Steven Zahm]

@ Ellen

RE: Just confirming that I should be adding this filter using the Code Snippets plugin?

Yes, this filter should be added using the Code Snippet plugin.

RE: I can’t add custom CSS to the theme

CSS can not be use to properly scale/cop an image optimized for web delivery.

RE: adjust the shortcode to make this happen?

If there were a shortcode option, I would have most definitely had supplied it instead of a filter.

RE: what is the difference between this and the image settings within the plugin? It seems like these are the same options as exist in the image settings, and those have very little effect.

As mentioned, those settings do not affect Gridder. Gridder will create its required images on demand based on the supplied image size. The crop and quality are not exposed as options in Gridder so the only way to change those defaults is thru the filters.

The crop and quality are based on the same defaults that WordPress itself provides to give a consistent experience.

Those settings only affect the default cached images sizes which are created when an image is added to an entry. Presently these primarily exist now to support legacy templates which did not have option to change image size like Gridder and other templates provide. I expect to remove these settings at some point due to them being less and less relevant in the current architecture of Connections.

I hope I have thoroughly answered your questions.

[Author]

Posts