news and event objects use thumbnail image for social media: need to use larger: 2pts

Question

news and event objects use thumbnail image for social media: need to use larger: 2pts

paregorios opened this issue 10 months ago · comments

This issue is a blocker for issue #457, which is about improving social media paste behavior for all types of pages on our website

ISAW News Items (e.g., https://isaw.nyu.edu/news/isaw-professor-claire-bubb-won-the-2023-charles-j-goodwin-award-of-merit) currently use our thumb image scale size:

<meta property="og:image" content="https://isaw.nyu.edu/news/isaw-professor-claire-bubb-won-the-2023-charles-j-goodwin-award-of-merit/image_thumb" />

but this thumb image size is too small for many modern social media systems and so gets overscaled and pixellated. For example:

This ISAW thumbnail image measures 84x128 and is being upscaled by the Mastodon UI to 100x152. Some other social media reuses are even worse.

Facebook provides the following guidance for og:image:

The minimum allowed image dimension is 200 x 200 pixels.
The size of the image file must not exceed 8 MB.
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

So, we need to adjust how we do this. I have created three new image sizes:

social-large
social-medium
social-small

and enabled crop support for each.

Ideally, the template that populates <meta property="og:image" should now apply the following logic:

If lead image maximum size >= social-large dimensions on both axes, use social-large for og:image
Else if lead image maximum size >= social-medium dimensions on both axes, use social-medium for og:image
Else if lead image maximum size >= social-small dimensions on both axes, use social-small for og:image
else use original lead image for og:image

Alec Mitchell · Answer 1 · Wed Feb 14 2024 13:54:16 GMT+0800 (China Standard Time)

This (using a single 1200x630 non-cropped image scale) is on isaw.jazkarta.com for testing.

Tom Elliott · Answer 2 · Thu Feb 15 2024 00:19:33 GMT+0800 (China Standard Time)

I tested with an event and got desired results in code, mastodon, and facebook:

<meta property="og:image" content="https://isaw.jazkarta.com/events/archive/2021/worked-animal-objects/@@images/72d6f1a8-7590-485c-8803-f5ccfba7ddaa.jpeg" />

But I tested with a news item and it failed to use the news image and instead used the ISAW logo image:

<meta property="og:image" content="https://isaw.jazkarta.com/isaw_logo.png" />

The latter differs from the behavior observable on production for the corresponding news item, which at least picks the correct image for og:image, even if it's the wrong size:

<meta property="og:image" content="https://isaw.nyu.edu/news/communities-of-archaeology-humanitarian-aid/image_thumb" />

Alec Mitchell · Answer 3 · Thu Feb 15 2024 01:39:55 GMT+0800 (China Standard Time)

Looks like I applied the lead image behavior to an interface that’s a bit too broadly available. So it’s looking up the wrong image field on all the types that don’t have lead images (except for Profiles which should be working). Should be an easy fix.

Alec Mitchell · Answer 4 · Thu Feb 15 2024 02:33:10 GMT+0800 (China Standard Time)

@paregorios Given how bad that ISAW logo looks when social sharing, maybe we should provide an alternative default social share image (and corresponding default alt text)?

Tom Elliott · Answer 5 · Thu Feb 15 2024 02:41:48 GMT+0800 (China Standard Time)

@alecpm I could supply a default image that will behave better; however, note this spec on #457

Notes: For any of the below content types, if the recommended image field is empty, look for the body or the first rich content field and, if there is an embedded image therein, use it. Otherwise, do not recommend an image.

Alec Mitchell · Answer 6 · Thu Feb 15 2024 02:43:46 GMT+0800 (China Standard Time)

Well, that makes things easy then.

Alec Mitchell · Answer 7 · Thu Feb 15 2024 04:29:52 GMT+0800 (China Standard Time)

@paregorios The updated implementation is live on staging.

I noticed that generating the scale urls was triggering CSRF protection errors (not surprising given the version of Plone being used). I fixed that, but hunted for other places where we might need the same fix and found the same issue in the Tiled View (alt), Tiled Listing, and the Featured Item Viewlet. So it's probably worth testing some pages that use those views/viewlets to ensure that nothing's gone awry there.

Tom Elliott · Answer 8 · Thu Feb 15 2024 04:40:51 GMT+0800 (China Standard Time)

@alecpm I'm seeing an error on this exhibition object:

https://isaw.jazkarta.com/exhibitions/ishtar-gate/objects/shipping-crate

AttributeError("'ImageScale' object has no attribute 'bobobase_modification_time'",) (Also, the following error occurred while attempting to render the standard error message, please see the event log for full details: 'ImageScale' object has no attribute 'bobobase_modification_time')

Tom Elliott · Answer 9 · Thu Feb 15 2024 04:44:15 GMT+0800 (China Standard Time)

@alecpm I'm also seeing an error on thispublication item:

https://isaw.jazkarta.com/publications/isaw-monographs

Traceback (innermost last):

    Module ZPublisher.Publish, line 138, in publish
    Module ZPublisher.mapply, line 77, in mapply
    Module ZPublisher.Publish, line 48, in call_object
    Module Products.Five.browser.metaconfigure, line 485, in __call__
    Module Products.Five.browser.pagetemplatefile, line 125, in __call__
    Module Products.Five.browser.pagetemplatefile, line 59, in __call__
    Module zope.pagetemplate.pagetemplate, line 132, in pt_render
    Module zope.pagetemplate.pagetemplate, line 240, in __call__
    Module zope.tal.talinterpreter, line 271, in __call__
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 888, in do_useMacro
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 533, in do_optTag_tal
    Module zope.tal.talinterpreter, line 518, in do_optTag
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 954, in do_defineSlot
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 533, in do_optTag_tal
    Module zope.tal.talinterpreter, line 518, in do_optTag
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 858, in do_defineMacro
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 954, in do_defineSlot
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 533, in do_optTag_tal
    Module zope.tal.talinterpreter, line 518, in do_optTag
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 954, in do_defineSlot
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 533, in do_optTag_tal
    Module zope.tal.talinterpreter, line 518, in do_optTag
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 946, in do_defineSlot
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 533, in do_optTag_tal
    Module zope.tal.talinterpreter, line 518, in do_optTag
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 858, in do_defineMacro
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 533, in do_optTag_tal
    Module zope.tal.talinterpreter, line 518, in do_optTag
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 533, in do_optTag_tal
    Module zope.tal.talinterpreter, line 518, in do_optTag
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 821, in do_loop_tal
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 533, in do_optTag_tal
    Module zope.tal.talinterpreter, line 518, in do_optTag
    Module zope.tal.talinterpreter, line 513, in no_tag
    Module zope.tal.talinterpreter, line 343, in interpret
    Module zope.tal.talinterpreter, line 583, in do_setLocal_tal
    Module zope.tales.tales, line 696, in evaluate
    URL: /usr/local/plone-4.3/primary/src/isaw.theme/isaw/theme/browser/templates/tiled_view.pt
    Line 70, Column 6
    Expression: <PythonExpr (view.get_image(item))>
    Names:

    {'args': (),
     'container': <ATFolder at /isaw/publications/isaw-monographs>,
     'context': <ATFolder at /isaw/publications/isaw-monographs>,
     'default': <object object at 0x7ff9fc0407a0>,
     'here': <ATFolder at /isaw/publications/isaw-monographs>,
     'loop': {},
     'nothing': None,
     'options': {},
     'repeat': <Products.PageTemplates.Expressions.SafeMapping object at 0x7ff9dc2553b0>,
     'request': <HTTPRequest, URL=https://isaw.jazkarta.com/publications/isaw-monographs/tiled-listing>,
     'root': <Application at >,
     'template': <Products.Five.browser.pagetemplatefile.ViewPageTemplateFile object at 0x7ff9dc51a5d0>,
     'traverse_subpath': [],
     'user': <PropertiedUser 'paregorian'>,
     'view': <Products.Five.metaclass.SimpleViewClass from /usr/local/plone-4.3/primary/src/isaw.theme/isaw/theme/browser/templates/tiled_view.pt object at 0x7ff9dc23a0d0>,
     'views': <Products.Five.browser.pagetemplatefile.ViewMapper object at 0x7ff9dc23a250>}

    Module zope.tales.pythonexpr, line 59, in __call__
    __traceback_info__: (view.get_image(item))
    Module <string>, line 1, in <module>
    Module isaw.theme.browser.tiled_view, line 89, in get_image

AttributeError: 'ImageScale' object has no attribute 'bobobase_modification_time'

Alec Mitchell · Answer 10 · Thu Feb 15 2024 04:45:08 GMT+0800 (China Standard Time)

Boo! I gues image scales on DX content don't have bobobase_modification_time. Ugh. I guess I could just skip the timing check, but that means we're always disabling CSRF protection on all of these views, which seems bad. Back to the drawing board.

Alec Mitchell · Answer 11 · Thu Feb 15 2024 05:52:12 GMT+0800 (China Standard Time)

@paregorios OK, I have a proper fix now that just relies on a small patch in Plone's image scaling code to work around this bug (fixed somewhere in Plone 5.1.x IIRC). It's much simpler and should fix the CSRF warning issue in a more universal manner without impacts on particular views/viewlets. It's live on staging.

Tom Elliott · Answer 12 · Thu Feb 15 2024 06:15:09 GMT+0800 (China Standard Time)

@alecpm ok, when a content type supports lead image (or equivalent) and when a lead image has been uploaded for a given object of such a type, og:image uses the desired value (i.e., a URI to the big version of the image), which is what we were after with this ticket.

Here are the following content items I've tested and found working in this way:

There are still some issues with implementation of features described in #457, which I'll address in a comment there.

Tom Elliott · Answer 13 · Thu Feb 15 2024 06:39:35 GMT+0800 (China Standard Time)

Once any associated code reviews are done, I'm happy to see this deployed to production.

Alec Mitchell · Answer 14 · Fri Feb 16 2024 10:22:08 GMT+0800 (China Standard Time)

This is live on production.

Tom Elliott · Answer 15 · Sat Feb 17 2024 00:58:19 GMT+0800 (China Standard Time)

This is working well on production.