Plugin Author
Steven
(@shazahm1hotmailcom)
@jj9617
I’m assuming you are using one of the included templates and have not change the size using the Template Customizer (if you did the quality is set as 82% in the code).
Please navigate to the Connections setting admin page and click the Images tab. Scroll to the bottom and change the 80% quality to 100% (WP defaults to 82% when uploading to the Media Library).
I hope this helps, please let me know.
Thread Starter
Jason
(@jj9617)
The logo is still very fuzzy no matter what I do. I have changed the quality value to 100%, and I have tried both .png and .jpg images. By the way, my logo images are 500 pixels wide just to make sure there is enough resolution… and my display settings are set to 150 pixels wide. It should look very sharp just like when I add custom code.
The page URL is: http://lawlessgroup.com/manufacturers/
For example, take a look at Igloo. The Igloo logo is fuzzy, and the Cool Gear logo beneath it (added with custom code) is sharp. The same with Radians and others (where the main logo added via Connections looks fuzzy, but the custom added logos beneath them in the description area look clean).
Plugin Author
Steven
(@shazahm1hotmailcom)
@jj9617
Yes, the Igloo logo does appear to be ever so slightly a little more soft when compared to the Cool Gear logo.
Looking at the Cool Gear logo…
You added the Cool Gear logo at 4x the size (roughly) and used the image size attributes to scale the image down. This increases the effective “resolution” available for the browser display. This does have a negative effect of slowing down the page due to the required larger image file sizes that must be downloaded and the browser having to scale the images.
Page speed analysis tools such as GTmetrix which run Google Page Speed will highly recommend that images be served at 100% scale to improve page load speed.
Connections is designed to follow those guidelines in order to have as little impact on page loading as possible.
To achieve a similar result to the Cool Gear logo. Change the logo size to be 4x its current size in both height and width. Then add the following CSS to the theme’s custom CSS area found in the theme Customizer.
#cn-profile span.cn-image-style {
transform: scale(.25);
}
This will scale the logo down to 25% of the 4x size therefore also increasing the effective resolution, similarly to the Cool Gear logo.
I am unsure, but you may have to tweak the positioning of the logo after scaling using CSS.
I hope this helps, please let me know.
Thread Starter
Jason
(@jj9617)
Thank you for the CSS tip! I’ll give it a try.
It would be nice if your plugin would allow users to access the Media Library to have full control over their resolution. Maybe default to upload thru Connections, but then a separate control to use Media Library.
-
This reply was modified 5 years, 2 months ago by
Jason.
Thread Starter
Jason
(@jj9617)
Unfortunately, your CSS adds extra space around the logos which I cannot get rid of. CSS does not reveal any padding or margins, so I do not know how to adjust the spacing. I did notice much better resolution of the logo files, so apparently it is possible to get better quality when the plugin is serving up the exact same images. But, if I cannot adjust the spacing around the logos then I will have to settle for the low resolution display issues.
The problem as I understand it is that I want to accommodate high resolution displays (since they are pretty common now) and so I need to treat physical “on screen” dimensions separately from actual pixel dimensions of images. Physical dimensions of the logo area might be 300×200, but I need 600×400 pixel image to make it look decent on a high-res screen.
Am I making any sense?
Plugin Author
Steven
(@shazahm1hotmailcom)
RE: I want to accommodate high resolution displays (since they are pretty common now)
Displays like you and I have are very much the exception and not the rule. Total share is actually small enough that they do not even chart (I suspect they get lumped in the Other trend line in these charts or maybe in the 1920×1020 trend line due to OS scaling and how the browser reports resolution when scaling is applied 150% – 200% by default on common OSs with HiDPI screens):
– Desktop: http://gs.statcounter.com/screen-resolution-stats/desktop/worldwide
– Mobile: http://gs.statcounter.com/screen-resolution-stats/mobile/worldwide
Any way, I understand this is important to you and I am sure I can find a solution you’ll be happy with.
RE: I need to treat physical “on screen” dimensions separately from actual pixel dimensions of images. Physical dimensions of the logo area might be 300×200, but I need 600×400 pixel image to make it look decent on a high-res screen.
More or less this is a good way to think of it. A few years ago Connections did actual serve 2x images to HiDPI devices but I received quite a few complaints about the increased page load and Google Page Speed scores on the page so I disabled it. The complaints were mostly from iDevice users because they were the first “common” devices to get HiDPI screens.
RE: I did notice much better resolution of the logo files, so apparently it is possible to get better quality when the plugin is serving up the exact same images. But, if I cannot adjust the spacing around the logos then I will have to settle for the low resolution display issues.
I experienced that too when I was created the CSS I thought it might have been a browser bug by applying the scaling after the image was already displayed.
Give me a little time to work with it . I’m sure I can figure out to address the space caused by the scaling. I’ll get back to you asap!
Thread Starter
Jason
(@jj9617)
Thank you very much for your consideration and help! Since I use optimized logo .png files that are around 10K each (even at 500px wide) with solid colors, the page loads fairly quickly, especially when caching is on. I’m sure those who use your plugin to display photos in their directory have a bigger challenge in terms of page load time.
I’d like to add that during the last quarter Google Analytics for my site is reporting iOS and Mac use alone at 23%. Since retina displays have been out for more than 7 years, I presume many of these people are using high resolution screens. Android users make up another 5%. So, I’d like to make sure the logos on my page are displayed the best way possible for all users.
Plugin Author
Steven
(@shazahm1hotmailcom)
@jj9617
ok, the solution is pretty simple…
As before change the logo size to be 4x the display size that you want.
Then add the following CSS as before:
#cn-profile span.cn-image-style {
width: 200px;
}
The 200px value should be 25% of the size you set for the logo. In this example, you woud set the logo size to 800px and use 200px for the CSS width.
I hope this helps, please let me know.
Thread Starter
Jason
(@jj9617)
Thank you! That did the trick. Although I don’t have a need for templates or extensions at this time, please let me know how I can donate to further development of this plugin.
Plugin Author
Steven
(@shazahm1hotmailcom)
@jj9617
I actually do not have a way to take donations… even though you do not have a need for any of the addons, maybe pickup one anyway. One where there is the highest chance that you might use. They are not subscriptions that will auto renew on you so there would be no surprise charges in the future 🙂
I do understand if you do not want to make a purchase, so, If you have a moment, I would truly appreciate a review as they really do make a difference.
https://wordpress.org/support/plugin/connections/reviews/#new-posts
Thanks in advance for your time!
