Open vdias38 opened 6 years ago
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:
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.
The comment.picture take almost the entire width screen, there are tiny margin/padding, resulting on a 16|40| comment-picture |8 layout.
How to use component
<img-avatar [src]="" (click)="action"></img-avatar>
<ion-avatar item-start *ngIf="src">
<img [src]="transformedsrc"/>
</ion-avatar>
Where img-avatar will be used:
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:
anniversaries;
message;
[COMPONENT]
img-avatar
img-comment
img-contact-detail
How to use component
<img-items-thumbnail [src]="src"></img-items-thumbnail>
<img [src]="transformedsrc" [srcset]="transformedsrcset"/>
Where img-items-thumbnail will be used:
I was checking and img-items-details has the same rules for img-comment.
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:
article-details;
How to use component
<img-medias-thumbnail [src]="src"></img-medias-thumbnail>
<img [src]="transformedsrc" [srcset]="transformedsrcset"/>
Where img-medias-thumbnail will be used:
Item.thumbnails is an array of {url:”url”, width: “width”, height: “height”}
db.items.find({"media.thumbnails.url":{$exists:true}},{"media.thumbnails":1}).count()
db.items.find({"media.thumbnails.url":{$regex:".*meumobi.*"}},{"media.thumbnails":1}).count()
db.items.find({"thumbnails.url":{$exists:true}},{"thumbnails":1}).count()
db.items.find({"thumbnails.url":{$regex:".*meumobi.*"}},{"thumbnails":1}).count()
Another youtube option
We can use a an higher thumb from sitebuilder updating size config and remove youtube thumbs.
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.
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
1200x800 size: jpg 169KB / png 1,2MB 200x200 size: jpg 17KB / png 78KB
add &format=jpg on imgflow requests
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