NCIOCPL / cgov-digital-platform

The Cancer.gov Digital Communications Platform
GNU General Public License v2.0
11 stars 33 forks source link

4:3 Image Crop Should be used in Social Media Sharing #2479

Open mworrest opened 5 years ago

mworrest commented 5 years ago

Could someone verify if the 4:3 crop is indeed being used when you share a page via the social media share links in the top right of the page? Here is an example page: https://www.cancer.gov/types/lung/research I see what looks like the 16:9 crop when I share this page to Facebook. The 16:9 is not a required crop so images may not get pulled when pages are shared to social media.

blairlearn commented 12 months ago

Pages are shared with either the promotional or article image (see below) with a 4x3 cropping.

However, if the image in question has a social media override image in place, that image is used as-is with no additional cropping.

Details:

This appears to be driven by the cgov-og-image token.

The value is defined in cgov_metatag_tokens, where it calls get_meta_og_image_token.

Which image is used?

If a promotional image exists, that image is used.

Else, if an article image exists, that image is used.

If neither image exists, no URL is returned.

What crop is used?

Assuming an image was located (see above), a "social media path" is determined by calling get_social_image_path_from_media

If the image has a social media override image, then the url of the override image is used directly, with no cropping information.

Otherwise, the media's item's target_id value is passed to find_styled_image_url, along with the style name "cgov_social_media".

If the media has no social media override, the target_id is missing, or any other error occurs, no image URL is returned.

Getting the actual crop

The image id and image style name are passed to find_styled_image_url

Image information is retrieved and an instance of CgovImageTools is created.

The CgovImageTools:findCropByStyle method is used to look up the style (which, in this logic path, is cgov_social_media).

In the case of the cgov_social_media style, the 4x3 crop is used.

If the crop does not exist for the file, no URL is returned.

Otherwise, a URL is returned for the cropped image.