Reply To: customizing the grid in the gridder :)

@ Michelle

re: I am still not clear on how to get the actual size of the image to be proportionally correct per each image in the grid. This needs to be correct. Is there another template that handles this properly?

Sorry, but there is no way to set or configure the crop per image. All images will be crop center weighted. This is by far the most common practice when images need to be scaled and cropped to fit a specific dimension. This is exactly how the images is auto scaled and cropped on the single page too. The image itself is a different dimension (width x height) but still cropped center weighted.

If you like the way the image appears on the single page, then adjust the Gridder image size to be the same as the default image size of the single page. Like so:

[connections image_width=300 image_height=225]

Now, that said, if you changed the image size option for the Large image on the Connections : Settings admin page under image, then match the height and width that was set on the Settings page to the shortcode option height and width.

On the Settings page, you can also adjust the crop mode, if you changed it from the default “Crop and resize proportionally to best fit the specified dimensions, maintaining the aspect ratio.” option then the images will be cropped differently, but the crop is still center weighted.

The crop mode can not be adjusted for Gridder thru a shortcode option. It can only be changed by applying a filter to change the core default crop mode applied to all images. To do this:

Install the Code Snippets plugin. Create a new snippet with the following:

function cn_image_atts( $atts ) {

    $atts['zc'] = 2;

    return $atts;
}

add_filter( 'cn_output_default_atts_image', 'cn_image_atts' );

The valid crop mode options are:

• 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