[John]

When my site is viewed on a smaller screen, such as a tablet, the images are too large and overlay some text.

Even when the site renders in a mobile friendly theme, the image is too big.

Is there a way to have it use a smaller image for specific resolution, or theme?

[Steven Zahm]

@ John

You can try adding this CSS to your theme’s custom CSS area:

#cn-list span.cn-image {
   width: auto !important;
   height: auto !important;
}

#cn-list span.cn-image img.photo {
   width: auto !important;
   height: auto !important;
   max-width: 100%;
}

It will help with making sure the image do not overlay text.

As far as loading smaller images, that is actually something I’ve been working quite extensively that past three weeks.

I wrote a reply to another user, asking a different question, but my reply will help in letting you know where Connections is heading with images.
http://connections-pro.com/support/topic/outputting-rawish-images/#post-300402

Hope that helps!

Oh, after the next release of Connections, you might want to remove that CSS I gave you because it could conflict (likely not).

Hope that helps!

[Dani Weymouth]

Hi there. I’m practically tearing my hair out. I am trying to get the images to fill the width of the parent div 100% (so there is no whitespace on either side) and the height to adjust as needed (with no whitespace above or below). I’ve tried changing the images settings and css but all the usual css doesn’t seem to work with your plugin. Can you provide assistance?

Thanks!

[Steven Zahm]

@ Dani

Can you take a screenshot, annotate what the change is that you’re trying to make and attach it to a reply. Include a link to your directory in the reply … And I’ll take look.

[Dani Weymouth]

Hi. Sorry, thought the website link would show up (first time using your forum). I don’t have an option to attach a screenshot or any file but if you go to: http://ex1.thesmallbusinessfactory.net/preferred-vendors/, then click on Photo / Video, you will see narrow photos have whitespace on the left and right and wide photos have whitespace on the top and bottom. How can I get the pictures to fill up the whole block? I have tried changing settings as well as changing css. Nothing seems to work.

Moreover, if you look at it on a smaller screen, you will see that the pictures (including the parent div / image holder) do not resize. How can I get them to resize so that the entire directory is responsive?

I will reply privately with the link to the directory.

Thanks!

[Dani Weymouth]

This reply has been marked as private.

[Steven Zahm]

@ Dani

You need to set the medium image size Ratio setting to crop to eliminate the adding of the margins. Right now it is set to the Fill option. The Crop option will crop and resize proportionally to best fit the specified dimensions, maintaining the aspect ratio whereas the Fill option will resize proportionally to fit entire image into the specified dimensions and add margins if required.

After you make this change, you would have to re-upload any images for the new settings to be applied.

With that said … maybe you might be interested in using a beta of the next version of Connections. I mention it because the entire image handling/processing has been completely overhauled.

Images are now displayed responsively and, and with a compatible device 2x (retina) images will be served. The cool bit here, these images are created, cached and served on demand using the new HTML5 img srcset attribute.

Additionally images size changes are applied on demand. No longer do you have to re-upload images to have image size changes applied.

Lastly, there is a new Fit Crop Mode (formally the Ratio option). The Fit crop mode will resize proportionally adjusting the size of scaled image so there are no margins added. The entered height and width are the maximum the image will be in either direction.

If you would be interested in giving a go, I would need a temp admin account and FTP account so I can install it and fix anything if something goes wrong for any reason … I do consider the code production ready, so it should be completely safe. Just post, privately, the login details here. Please follow-up with a public reply because the plugin I’m using seems to have a bug where I do not get notified of private replies which I have yet to track down and fix.

[Dani Weymouth]

Ah… that’s what I was missing… having to re-upload the images. I kept changing the settings but wasn’t seeing any changes so I kept changing things to try to get something to work.

Yes, I would definitely be interested in trying out the newer version. There are too many images to have to re-upload every time I want to try out another setting.

Thanks!!!

[Dani Weymouth]

This reply has been marked as private.

[Steven Zahm]

@ Dani

Yes, I can upload just thru the admin. The reason I also asked for FTP is because I want to make a backup of the images before deploying. The reason being that the images are being moved on demand as well. This is being done to be more WP compliant according to current best practices. Right now they are saved in the ../wp-content/connection_images/ folder. They will be moved to ../wp-content/uploads/connections-images/{entry-slug}/. Back when Connections first implemented image support there really was not a best practice other than saving them in the wp-content folder. The current best practice is to have images in the uploads folder.

I don’t need to make the backup of the folder, you can… I just want to make sure it is done before I deploy just incase … because if something goes wrong, all images could be permanently deleted. I do not expect that to happen as it has not happened on others who are running the beta. Like I said, I do believe this code to be production ready, but with major changes like this, I really like to play it safe.

[Author]

Posts