Add GIF badge to GIFs in editor

wordpress-mobile / gutenberg-mobile

Mobile version of Gutenberg - native iOS and Android

GNU General Public License v2.0

245 stars 56 forks source link

Add GIF badge to GIFs in editor #968

Open iamthomasbishop opened 5 years ago

iamthomasbishop commented 5 years ago

In Aztec, we showed a [GIF] badge over the top of .gif's – let's add that, and in the process set ourselves up for future badge re-use :)

Coverage:

[x] Image block
[x] Gallery block
[ ] Media&Text block
[ ] ?

Here's what it looks like on a variety of backdrops:

Specs:

Positioning: 10px from top left corner
Background color: #1A1A1A 50% alpha
Border-radius: 6px
Internal Padding: 3px 6px
Font-family: Sans-serif
Font-size: 14px
Font-weight: Semi-bold
Text-transform: Uppercase
Background Blur (iOS): 5pt

kmdupr33 commented 4 years ago

Linking updated styles that @iamthomasbishop linked to in #gutenberg-mobile.

SergioEstevao commented 4 years ago

@iamthomasbishop I just implemented animated GIFs for the GB editor on the WPiOS app: https://github.com/wordpress-mobile/WordPress-iOS/pull/14238

On Android the GIF already plays while on the GB editor.

Do you think we still need the GIF badge if the editor plays the animation?

iamthomasbishop commented 4 years ago

Do you think we still need the GIF badge if the editor plays the animation?

@SergioEstevao Yea, I think the badge should always be displayed, even while it's animated.

hypest commented 2 years ago

Looks like the badge is not displaying in various cases of the Gallery Block or a Media&Text block so, reopening this ticket to track.

thehenrybyrd commented 2 years ago

Related, we have this older issue for Image Gallery: https://github.com/wordpress-mobile/gutenberg-mobile/issues/1715

hypest commented 2 years ago

👋 @illusaen , since you recently worked on adding the GIF badge, can you have another look to see how to have all types of image blocks display it? Thanks!