Reply To: Grid images

01/15/2016 at 10:59 am #361330
Steven Zahm
Keymaster

@ Alfonso

re: I tried the 4 different crop modes for Thumbnail Image, Medium Image, Large Image and Logo but the images remain the same.

Changing the crop mode on the Image settings will not affect the image used on the Gridder page. Only the Large Image size and its crop mode will be applied to the image on the profile page of the entry.

The crop applied to the grid images, like I mentioned is -> the image will be scaled down using the smaller dimension and then the larger dimension will be cropped based center of the image.

re: I also tried to upload smaller size images and the problem is not solved.

Uploading smaller will not change anything because the image would have to be scaled up instead so you would end up being blurry.

re: Do you know what could be the problem?

Yes, I see you’re uploading logos… those will not generally look good because of how the image is scaled and cropped because logo are never “square” (for a lack of a better term). The crop mode on the grid images is designed to be a good fit for profile pictures of people which is why the images are scaled to fit and cropped based on the image center this is because that is where faces generally are in profile shots.

What you need is the images to be simply scaled to fit the size adding a border as needed. The only way to do this would be to edit the card.php found here: ../wp-content/plugins/connections-gridder/

Change this:

    <?php $entry->getImage(
        array(
            'image'    => $atts['image'],
            'height'   => $atts['image_height'],
            'width'    => $atts['image_width'],
            'fallback' => array(
                'type'     => 'block',
                'string'   => ''
                ),
            'style'    => $atts['image_opacity'] ? array( 'opacity' => $atts['image_opacity'], 'filter' => 'alpha(opacity=' . $atts['image_opacity'] * 100 . ')' ) : array(),
        )
    ); ?>

to this:

<?php $entry->getImage(
    array(
        'image'    => $atts['image'],
        'height'   => $atts['image_height'],
        'width'    => $atts['image_width'],
        'fallback' => array(
            'type'     => 'block',
            'string'   => ''
            ),
        'zc'       => 2,
        'style'    => $atts['image_opacity'] ? array( 'opacity' => $atts['image_opacity'], 'filter' => 'alpha(opacity=' . $atts['image_opacity'] * 100 . ')' ) : array(),
    )
); ?>

That crop mode will be better suited for logos.

Hope that helps!