Lithosphere The Lithium Community

Frequent Advisor
Frequent Advisor

Video cover photos in "masonry" view - how to improve the experience?

Has anyone used the "masonry" list view with a video-heavy/centric contest? I'm looking for a better way to get cover images on the tiles that represent a video entry.  Currently, a user would need to submit a separate image file as a cover photo in order for there to be one - it wont automatically use anything, like it does w/the first image in a post - which does not feel like a good user experience (esp for people new to community), it's not intuitive in the post editor, and it will be awkward to try and explain within the contest rules.

 

If you don't set a cover photo when you post, the view does some weird things:

 

Racing_Contest_Test_1_-_Virgin_Mobile_Community.jpg

 

 



-Brien

6 Replies 6
Highlighted
Honored Contributor
Honored Contributor

Re: Video cover photos in "masonry" view - how to improve the experience?

@BHall - What would you want to show on masonry view if it contains a video? 

Give kudos if you find my posts helpful or mark solution if it answers your query.
Tariq
0 Kudos
Reply
Loading...
Frequent Advisor
Frequent Advisor

Re: Video cover photos in "masonry" view - how to improve the experience?

The thumbnail frame, or whatever the video player shows within the body of the post.


-Brien

0 Kudos
Reply
Loading...
Honored Contributor
Honored Contributor

Re: Video cover photos in "masonry" view - how to improve the experience?

@BHall -  I don't think there is an  OOB way for this as masonry view checks for the cover image and if the cover image is not available it will use the first image within the body.  It does not show video thumbnail. 

 

However, a JS hack can be used for this.  You will need to get all the ids which do not contains cover or which does contains a video from masonry view and need to make a call to an endpoint.  You can make a single call for each card or you can send all the id's in a single call. 

 

In the endpoint using below query, you can get the thumb icon. 

 

SELECT * FROM videos WHERE messages.id = '1010'

 It will return 

 "thumb_href" : "https://i.ytimg.com/vi/_OBlgSz8sSM/hqdefault.jpg",

You can use this thumbnail as masonry card. 

 

Give kudos if you find my posts helpful or mark solution if it answers your query.
Tariq
0 Kudos
Reply
Loading...
Frequent Advisor
Frequent Advisor

Re: Video cover photos in "masonry" view - how to improve the experience?


TariqGrazitti wrote:

 

However, a JS hack can be used for this.  You will need to get all the ids which do not contains cover or which does contains a video from masonry view and need to make a call to an endpoint.  You can make a single call for each card or you can send all the id's in a single call. 

 

 


@TariqGrazitti let me know if i have your solution right, at a high level:

1. determine, from the standard OOTB masonry view, the post IDs that have videos

2. for each video post, go into the message and scrape the src of the video thumbnail in the iframe element

3. rebuild the masonry view as custom endpoint, inserting these thumbnail assets where the cover photo would typically be



-Brien

0 Kudos
Reply
Loading...
Valued Contributor
Valued Contributor

Re: Video cover photos in "masonry" view - how to improve the experience?

Older post but figure it may help someone else in the future - Testing this last night, the masonry view will not pull in a Youtube/Vimeo thumbnail if you post it in the teaser window.  If you post it in blog body as a video inserted via link, it will pull in the thumbnail properly for the Masonry view.

Reply
Loading...
Lithium Staff BrienH
Lithium Staff

Re: Video cover photos in "masonry" view - how to improve the experience?

Thanks @StanGromer !

 

Looks like it was fixed in 18.3

  • We fixed an issue where JavaScript displayed in Masonry cards instead of a video preview when a video was placed in the message body or teaser. Video previews now display correctly in Masonry cards. Note that teaser text is used instead of video preview if the body contains a video, but the teaser contains only text. 







Formerly a Lithium customer as @BHall, I am now a Technical Account Manager with Lithium.

Certified Community Manager
Reply
Loading...