solved Why Do Images Default to this Value?

I am trying to share my playlists and members have the ability to upload an image to represent their playlist on Facebook shares.

However, on Facebook the timeline area is a rectangle wider than it is high. A picture like the one attached would fit well if scaled.

However, the script takes whatever picture it's given, expands it to 512 square and then crops it. That is plugged into the rectangular space at Facebook and stretched to fit, making for some weird effects. Like most of the picture missing, even when you start with a square one.

How does one change the way pictures are handled after they are added to the form field?

xxlarge/crop=auto seems to be the offending value. Perhaps width="100%" would work better? Where would I go to set that?



--

Ken Rich
indiegospel.net

updated by @ken-rich: 02/05/15 12:59:53AM

There are other crop values - none, 16:9, 4:3 (actually any ratio x:y), width, height, square, portrait... The docs are on this page:
https://www.jamroom.net/the-jamroom-network/documentation/development/1599/the-image-system
But it looks like that page needs updating, there are now more crop parameters than mentioned there.

In a template there will be a smarty jrImage_display function, you can add "crop=16:9" to that call.

I expect that scaling will be controlled by facebook's css but you could try adding the class "img_scale" or "img-responsive".

I can't help with which template for facebook though, sorry, but that's how to change it when you find it. I'm expect one of the team will be able to help further.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 01/03/15 05:25:20PM

It's actually worse than just this particular problem of how the images are handled.

I did some experimenting and a lot of my pages are not giving the scraper any OG: image, or description.

So it defaults to whatever it can pick-up from the page - comments, stats and a piece of my logo for an OG image (see attached).

Maybe some of that could be cleared up with the metatag manager?

I can't get it to use the profile picture as the OG image in profiles, even though I entered it. Instead, some of my profiles default to what's attached. Others don't - it's like Russian Roulette, but going by the sizes of the uploaded pictures.

og:image {$profile_image} profile pages
og:description {$profile_bio} profile pages
og:image {$item_image} item detail pages


--

Ken Rich
indiegospel.net

updated by @ken-rich: 01/03/15 07:08:42PM

I just pushed another update to the ShareThis module - we needed a custom template for jrProfile in order to directly share the profile index. I also removed the "crop" from the image URLs.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Awesome - I'll check it out and see how it works... Thanks a lot...


--

Ken Rich
indiegospel.net

Profile shares are working better now, even if just copying and pasting the URL, because the OG image and description are both defined and showing in view source.

The final picture that shows on Facebook is much better but still cropped somewhat (on their end) because the window is 486 by 255 and we are sending them 512 width at xxl.

I'm not sure if that's the "optimal" setting for sharing (or where to experiment with that), but it sure is an improvement with autocrop off.

Thanks!!!


--

Ken Rich
indiegospel.net

updated by @ken-rich: 01/04/15 05:19:44PM

We can't control what Facebook does on it's end - you're likely to have some images that are weird ratios that are not going to look good - this was why Jamroom uses "crop" a lot, as it can do a good job the majority of the time making the image "fit" better.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net