How to use responsive images on known context

[vdias38]

Expected behaviour

Since resizing images study we know for each context (comment.picture, profile.picture, etc.) which image sizes we expect. We should provide an easy way to use expected responsive img on each know context without to need to configure required sizes on each template.

Actual behaviour

We apply ImgServerSrcsettifyPipe to set img@SrcSet, but not consider context, then all srcset are same.

Expected responses

• How to fix it
• How to test

[vdias38]

Should create a component for each use case, for example <comment-picture src="..." alt="..." />. It should be responsible to render the responsive img like:

<img srcset="
    elva-fairy-600w.jpg 600w,
    elva-fairy-900w.jpg 900w,
    elva-fairy-1200w.jpg 1200w"
  sizes="
    (max-width: 800px) 600px,
    (max-width: 1024px) 900px,
    1200px"
  src="elva-fairy-900w.jpg" alt="Elva dressed as a fairy" />

Recommended sizes:

• phone: 600 x 400 px
• TV: min 900 x 600 px, max 1200 x 800 px;

Screen sizes considered: 800, 1024, 2048 px. For each screen size we'll define an img size: small, medium and large.

The TV page could be considered as a separate case because the width of screen is divided on 2 views: live and items. Then the live view on it only represent 1/3 of whole width screen.

Layout

The comment.picture take almost the entire width screen, there are tiny margin/padding, resulting on a 16|40| comment-picture |8 layout.

[danconte72]

img-avatar

How to use component

<img-avatar [src]="" (click)="action"></img-avatar>

• transform src from https://infomobi.page.link/[imgName] to https://imageflow.meumobi.com/firebase/[imgName]?width=160&height=160&mode=crop
• It should render the Contact profile image with 160x160 and aspect ratio square;

  <ion-avatar item-start *ngIf="src">
  <img [src]="transformedsrc"/>
  </ion-avatar> 

  Where img-avatar will be used:

Components:

• anniversaries;
• message;
• contact-headline;

[danconte72]

img-comment

How to use component

<img-comment [src]="src"></img-comment>

• when click it will call the zoom mode;

• transformedsrc from https://infomobi.page.link/[imgName] to https://imageflow.meumobi.com/firebase/[imgName]?width=600&height=400&mode=crop

• zoomsrc from https://infomobi.page.link/[imgName] to https://imageflow.meumobi.com/firebase/[imgName]?width=1200

• transformedsrcset from https://infomobi.page.link/[imgName] to https://imageflow.meumobi.com/firebase/[imgName]?width=600&height=400&mode=crop 800w https://imageflow.meumobi.com/firebase/[imgName]?width=900&height=600&mode=crop 1024w https://imageflow.meumobi.com/firebase/[imgName]?width=1200&height=800&mode=crop 2048w

• It should render the Comment image with 600x400;

  <img [src]="transformedsrc" [srcset]="transformedsrcset" imageViewer="zoomsrc"/>   

  Where img-comment will be used:

  Components:

• anniversaries;

• message;

[vdias38]

• [COMPONENT]

  • [PAGE]/[COMPONENT-PATH]:[MODEL PROPERTY]

• img-avatar

  • live/comment-list: contact.picture
  • live/comment-detail (anniversaries): contact.picture
  • contacts/contact-headline: contact.picture
  • items/comment-list:contact.picture

• img-comment

• img-contact-detail

[danconte72]

img-items-thumbnail

How to use component

<img-items-thumbnail [src]="src"></img-items-thumbnail>

• transformedsrc from https://infomobi.page.link/[imgName] to https://imageflow.meumobi.com/firebase/[imgName]

  <img [src]="transformedsrc" [srcset]="transformedsrcset"/>   

  Where img-items-thumbnail will be used:

  Components:

• articles;
• polls;

[danconte72]

I was checking and img-items-details has the same rules for img-comment.

[danconte72]

img-item-details

How to use component

<img-item-details [src]="src"></img-item-details>

• when click it will call the zoom mode;

• transformedsrc from https://infomobi.page.link/[imgName] to https://imageflow.meumobi.com/firebase/[imgName]?width=600&height=400&mode=crop

• zoomsrc from https://infomobi.page.link/[imgName] to https://imageflow.meumobi.com/firebase/[imgName]?width=1200

• transformedsrcset from https://infomobi.page.link/[imgName] to https://imageflow.meumobi.com/firebase/[imgName]?width=600&height=400&mode=crop 800w https://imageflow.meumobi.com/firebase/[imgName]?width=900&height=600&mode=crop 1024w https://imageflow.meumobi.com/firebase/[imgName]?width=1200&height=800&mode=crop 2048w

• It should render the Item image with 600x400;

  <img [src]="transformedsrc" [srcset]="transformedsrcset" imageViewer="zoomsrc"/>   

  Where img-item-details will be used:

  Components:

• article-details;

[danconte72]

img-medias-thumbnail

How to use component

<img-medias-thumbnail [src]="src"></img-medias-thumbnail>

• transformedsrc from https://infomobi.page.link/[imgName] to https://imageflow.meumobi.com/firebase/[imgName]

  <img [src]="transformedsrc" [srcset]="transformedsrcset"/>   

  Where img-medias-thumbnail will be used:

  Components:

• medium-details

[danconte72]

Item.thumbnails is an array of {url:”url”, width: “width”, height: “height”}

• Pass item.thumbnails to img-thumbnail component
• Loop to get the largest (width) thumbnail received;
• Check if source is saved on meumobi servers
  • Pdf - contains uploads/pdf_thumbnail on url
  • Rewrite prefix to be imageflow complaint From https://meumobi.com/uploads/pdf_thumbnail/[fileName].png To imageflow.meumobi.com/meumobi/pdf_thumbnail/[fileName].png Check if Utils.imgServerPrefix should be updated
  • Image uploaded on meumobi - contains uploads/items on url
  • Rewrite prefix to be imageflow complaint From https://meumobi.com/uploads/items/[size_][fileName].jpg To imageflow.meumobi.com/meumobi/items/[size_][fileName].jpg Check if Utils.imgServerPrefix should be updated
  • Rewrite fileName to get the raw image on meumobiserver From [size][fileName].jpg Size could be [80x60, 80x80, 139x139, 314x220]; Split/explode filename by and get the lastitem; To [fileName].png
• Concat sufix to perform imageflow transformation
  • If is item.thumbnail - 600x400 and crop to be readable on items-list
  • If is item.media.thumbnail - 200 x 200 and crop to be used on media-list-component
  • Should create two components for the different sizes? The only difference is the size
• If image is from youtube:
  • We can’t handle images without update imgflow to manipulate youtube or copy youtube images to our server (meumobi or firebase)
  • The incidence is not expressive…
  • On elefante from 145 items with media thumbs: db.items.find({"media.thumbnails.url":{$exists:true}},{"media.thumbnails":1}).count()
  • 16 are from youtube: db.items.find({"media.thumbnails.url":{$regex:".*meumobi.*"}},{"media.thumbnails":1}).count()
  • On elefante from 668 items with thumbs: db.items.find({"thumbnails.url":{$exists:true}},{"thumbnails":1}).count()
  • 652 are uploaded on meumobi: db.items.find({"thumbnails.url":{$regex:".*meumobi.*"}},{"thumbnails":1}).count()
• We have some options:
  • Don’t resize yt images at all Using 640x480 to items list, in this case we must update our item.thumbnail size to 640x480 Using 320x180 to media list, in this case we must update our item.media.thumbnail size to 320x180
  • Save the yt largest image on meumobi or firebase then manipulate as another sources (require sitebuilder changes)
  • Add another repo/source on imgflow server Update Utils.imgServerPrefix to consider the new repo

[danconte72]

Another youtube option

• for item thumbnail only get images that were uploaded on meumobi;
• add largest size 1200x800 on image thumbnailer on sitebuilder

[vdias38]

We can use a an higher thumb from sitebuilder updating size config and remove youtube thumbs.

• check which thumbnail sizes are used on ELEFANTE (check logs), reduce list of config sizes
• add 1200x800 on thumb sizes
• sitebuilder: remove youtube thumb from item thumb, prevent youtube thumb to be added on item.thumbnails

[danconte72]

• check which thumbnail sizes are used on ELEFANTE (check logs), reduce list of config sizes: tail -100f /var/log/apache2/meumobi.com/access.2018-10-16 Looks like item.thumbnails were only used on admin page, so I've checked on infomobi and it only use items.image https://github.com/meumobi/infomobi/blob/c05a872432d86ddaf64a05e7dd0ef55e920ca2af/src/templates/articles/_headline.html#L4 not item.thumbnails

I've add a new content and re-donwloaded the infomobi app and none call to a thumbnail file.

• 314x220 is used on pushnotifications
• 80x80 is used on dashboard item list
• 139x139 is used on dashboard item details
• 80x60 I couldn't find where they are used

[danconte72]

To remove yt from thumbs on sitebuilder.item we must to add a filter to only get medias.thumbnails from medias where type are not application/vnd.youtube.video+html

[danconte72]

format

1200x800 size: jpg 169KB / png 1,2MB 200x200 size: jpg 17KB / png 78KB

add &format=jpg on imgflow requests

[danconte72]

new doc https://github.com/meumobi/ion-employee/wiki/Image-Components