[Kitty Nicol]

Hi, I’m using the cMap template and am trying to get the logo looking correct. I have set my desired max width and height in the settings, but no matter what crop option I select, it increases the size of my logo to expand to the height or width or both. I would like to have it uploaded at its original size, and only restrict its dimensions if it exceeds the height or width specified in the settings. All the logos will be different, so I can’t set an exact size for all.

I’ve tried the option in this thread https://connections-pro.com/support/topic/my-template-logo-image-not-sized/#post-444617 although I am not sure it is what I am looking for, but it did not make any difference. I also can’t seem to overwrite this with CSS.

The example attached shows how the image is being stretched to the height that is set (it retains the width proportionally, but I cannot have the logos being scaled up like this).

Hope you can help!
Thank you

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Kitty

• Navigate to the Connection : Templates admin page and click the Customize button for cMap.
• The page will reload with the Customizer on the left and a Preview on the right.
• In the Preview, click a entry name, any entry name, it does not matter which. The preview will reload showing just that entry profile detail page.
• Click the back arrow in the upper left of the Customizer.
• Click the Image Panel.
• Change the crop mode.
• Now, click an entry name, the first in the list will do, but it can be any. The preview will refresh displaying just that selected entry.
• Change the crop mode, again.
• Click the Save and Publish button and exit the Customizer.

Hope that helps!

ps. When in the Customize the list view and the profile detail view are configured separately to allow you greater flexibility when configuring the template. This is why you had to click into the entry profile detail view in the customizer preview.

[Kitty Nicol]

Hi Steven, thank you very much for your reply and instructions. However, this has not changed the image issue because none of the crop options do what I want and they all scale the image up to force it to be the dimensions set. I’m hoping to allow the natural size of the images to be added – in fact I don’t need any cropping done, as I can restrict the image container size with CSS. Is there a way to turn off the forced crop option? I don’t see how the cropping options work for anything other than uniform sized images.

Any further help appreciated!

Cheers
Kitty

[Steven Zahm]

@ Kitty

Looking at the screenshot again… looks like the template has been altered so my instructions may not apply anymore…

Follow the same instructions as before, but, instead of clicking the Image panel, click the Bio Tray Image.

Make sure you choose the “Resize proportionally adjusting the size of scaled image so there are no margins added.” option. This does not cropping, only scaling so the image fits within the defined width/height.

Hope that helps.

[Kitty Nicol]

Thank you again :) Unfortunately this did not help – I am not using the Bio Tray Image, so changing these settings did not have any effect.

The template has been altered, but for the logo image code, it has simply just moved position within the layout and otherwise has not been touched. I am using the “Resize proportionally adjusting the size of scaled image so there are no margins added.” option, but this forces the width or height of the image so that if the image size is less than the specified size, then it is being stretched. It does not look like it is possible to avoid this? It would be ideal to have an option that does not force the image in any way but will allow images of different sizes to be used.

It looks like I can’t achieve what I need with these settings, but thank you for your help! Please do let me know if you have any other suggestions.

[Steven Zahm]

@ Kitty

RE: It looks like I can’t achieve what I need

Yes, it is very possible, hundreds of others do…

Perhaps the theme is overriding the image display. Can you link to an example showing the image not displaying correctly?

Also, since the template has been modified… what is the exact code as it exists in the template now for the image? Paste it here, then highlight and click the {} button so code formatting is preserved.

[Kitty Nicol]

Thanks so much for your help! Here is an example of a listing with the image: https://www.nzgsta.co.nz/our-members/pg/5/

I have attached the image that I upload, but when I view the image on the listing it shows as https://www.nzgsta.co.nz/wp-content/uploads/connections-images/wholesale-seeds/wheat-009ec718fa607b9cfeb44e837e7e2140.jpg so it looks to be resizing the image on upload? My image settings are 600px x 400px, so it is forcing this height to 400px but keeping the width proportional.

The image code in card.php and card-single.php is

<?php
    if ( 'none' !== $atts['image'] ) {
        $entry->getImage(
            array(
                'image'    => $atts['image'],
                'width'    => $atts['image_width'],
                'height'   => $atts['image_height'],
                'zc'       => $atts['image_crop_mode'],
                'fallback' => array(
                    'type'   => $atts['image_fallback'],
                    'string' => $atts['str_image'],
                ),
            )
        );
    }
?>

Thanks for any further help!

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Kitty

You have me confused. I do not understand what the problem is.

You have the image set to 600px x 400px.

The wheat.jpg file is 168px x 150px.

So, to meet the set size of the 600px x 400px the image must be scaled up. With the “Resize proportionally adjusting the size of scaled image so there are no margins added.” option chosen the resulting image size should be 448px x 400px.

(168px x 400px) / 150px = 448px

This image is not being cropped. It is being scaled up to be within the set dimensions. Exactly as it should be.

[Kitty Nicol]

Thanks for taking a look. Yes, I understand, and have not mentioned that my image is being cropped but only referenced the crop options (or crop mode as it’s called) because this is what the settings refer to.

The problem is that I will have different sized images for each member. If I set the dimensions to allow for the maximum desired size… how can I upload smaller images without them being scaled up?

My problem is that these options are scaling up my images instead of allowing me to upload different sized images at their natural size. What I’m gathering is that all the images will have to be the same size, is that correct?

[Steven Zahm]

@ Kitty

I see… yes, these function will always scale the image up or down and crop, if needed. Here is a possible solution.

Add the following to the wp-config.php file:

define( 'CN_IMAGE_MAX_WIDTH', 600 );
define( 'CN_IMAGE_MAX_HEIGHT', 400 );

That will set the max uploaded image size. Any above that will be scaled down proportionally. Anything below that size will be left as is, not scaled up.

In the template, instead of using the $entry->getImage(... block of code.

Use this:

$logoHREF = $entry->getOriginalImageURL('logo');
//$photHREF = $entry->getOriginalImageURL('photo');

if ( ! empty( $logoHREF ) ) {
    echo "<image src='$logoHREF'>";
}

That will simply output the image as uploaded.

Another handy line if code:

$entry->getImageMeta( array( 'type' => 'logo', 'size' => 'original' ) );

That will return an array of image metadata which includes width, height, size, mime, type, URL and path.

Hope that helps!

[Author]

Posts