Strapi Media Library settings

[jaanleppik]

• Milliseid failiformaate saame üles laadida, et need oleks lehel kasutatavad, piltidena? tiff, png, jpg, bmp, webp (ei toimi safaris)

• Kas saame failiformaate muuta? E kas Strapis Media library saab teha TIFFist JPG näiteks?

• Milliseid parameetreid saame muuta piltidel: -- Pixlimõõt küljesuhet e proportsiooni säilitades? -- Crop, 500 x 500 pixlit näiteks? -- Pildi kvaliteet e pakkimise aste? -- Pakkimise algoritm?

• Mitu erinevat versiooni yhest üles laeavast pildist saame teha? HD, SD, Portait, Ruut, thumbnail jne?

• Millise suurusega faile saab üles laadida? -- Kas faili suurus on puhtalt meie määrata vüi on seal ka Strapi limiit ees? Seda nii piltide puhul, mia tahame ise näidata lehel, kui ka ataachmendiks mõeldud failide puhul (joonis, suur pilt jne)

e iga pildi kohta:

• faili formaat (.jog, .png, jne)
• faili pakkealgoritm
• pakkeaste
• versioonide kirjeldused: -- crop / resize? -- pixlimõõt laius / kõrgus -- failinime suffiks

[jaanleppik]

Use case 1:

• Kasutaja laeb yles 20MB suuruse ja 4K resoga TIFF pilfi

• Meie tahame, et sellest sünniks: -- jpg formaadis pildid -- jpg pakkekvaliteet 9 of 12 näiteks, või 70%, e pakkealgoritmi seaded umbes määrata -- selliseid versioone pildist: --- 500x500 pixlit auto crop versioon ---- sellest thumb 1 versioon 240x240 pixlit --- 1920 x 1080 proportional resize versioon, lähtudes laiusest, ja sellest omakorda ---- thumb 1 suurisega 960 x 540 pixlit ---- thumb 2 suurusega 640 x 360 pixlit

ja kas saame kontrollida, kuidas erinevad versioonid nimetatakse? näiteks selliste suffiksitega: _square (versioonile 500x500px) _sq_thumb (versioonile 240x240px) _hd (versioonile 1920x1080px) _thumb_1 (versioonile 960x540px) -thumb_2 (versioonile 640x360px)

[mitselek]

https://forum.strapi.io/t/how-to-resize-uploaded-images-to-custom-sizes/4064

[mitselek]

Saali pilte juhitakse siin: https://github.com/i-b-c/KGS-Strapi/tree/main/extensions/upload

[LiisKasper]

Pildi suurus ja selle muutmine: https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#configuration

[mitselek]

See vajab nüüd töötavaid koodijuppe.

Use case #2

Soovime, et vastavalt mudelile renderdataks lähtepildist vajalik arv eri mõõdus pilte. Konfiguratsioon umbes selline:

film:
  versions:
    - sx: HDTV
      w: 1920
      h: 1080
      chain:
        - scale_to_enclose
        - crop_center
    - sx: thumb
      w: 300
      h: 300
      chain:
        - scale_to_enclose
        - crop_center
        - effect_BW
        - EXIF:
            - custom_label1: custom_text
            - custom_label2: custom_text
screening:
  chain:
    - scale_to_fit
    - crop_center
  versions:
    - sx: HDTV
      w: 1920
      h: 1080
    - sx: TV
      w: 800
      h: 600
      chain: effect_old_tv

[LiisKasper]

Veidi jääb ebaselgeks, mida soovid saavutada. Kas toimetaja peab saama valida, mille juurde pilte laeb, kas film v screening? V tehakse alati kõik antud mõõtudes pildid valmis (kui on võimalik teha)

[mitselek]

Strapi ise suudab mingeid suur-keskmine-väike pilte teha vaikimisi, kamakaks kuidas pilt meediakataloogi laekub.

Minu suur soov oleks, et kui pilt mingi mudeli juures kasutusele võetakse, siis vastavalt mudelile renderdatakse lifecycle's talle kõik need teised versioonid.

Kui võimalik, siis asetatakse nad meediakataloogis sama meedia sisse nagu seda teeb meediakataloogi vaikimisi pildihaldur.

[LiisKasper]

Hästi, siis olin valel teel, sain just meediakataloogi kuvama esimesed soovitud suurusega pildid (ka mitu ühest kui vaja). Lifecyclega pole piltidel minu arusaamist mööda midagi pistmist. Seega see osa jääb ikka selgusetuks. Või eeldad, et pilte laetakse ainult läbi õige objekti ja Media Library jääb mängust välja?

[mitselek]

Media library kaudu laetaksegi suures osas ja kui on meie kontrolli all, millise resoga pildiversioone tehakse, on see väga hea. Pool rehkendust olemas.

Teine pool on see, millega me eelmistel kordadel pole hakkama saanud ehk siis pildiformaatide tootmine sel hetkel, kui nad konkreetse objekti konkreetse väljaga seotakse. Kui see ka praegu ei alistu, siis teeme kõik võimalikud versioonid esimese poolega ära. Sarnase konfifaili pealt, kusjuures:

  chain:
    - scale_to_fit
    - crop_center
  versions:
    - sx: HDTV
      w: 1920
      h: 1080
    - sx: TV
      w: 800
      h: 600
      chain:
        - effect_old_tv

[LiisKasper]

Hästi, ma saan aru nii. Esiteks toimetaja laeb üles pildi Media Libray kausta. originaal kujul. Ei mingit muutmist. Edasi saan mina aru nii: Teiseks me peaksime jälgima iga huvipakkuva objekti lifecycles igat võimalikku pildi välja. Kui leiame, et mõnes väljas on tekkinud muutus (lisatud, muudetud v kustutatud) peaksime vastavalt soovile suutma tekitada õige suurusega pildi ja lisama selle vastavasse välja. Pilti ennast pole vaja tekitada meedia kausta vaid siduda olemasoleva originaal pildi juurde.

[LiisKasper]

Hetkel ei suuda välja mõelda kuidas saada Strapi kõhust vajalikul kujul olemasolev pilt, et seda edasi töödelda. Hakkan uurima Sharpi, mida Strapi kasutab piltide muutmiseks.

Sharp doc: https://sharp.pixelplumbing.com/api-resize

[LiisKasper]

@mitselek Lubasin viiidata faili formaatidele, kus koodis saab neid muuta. Kuna lives on need endiselt node_modules all siis gitis seda viidet ei saa jagada aga saali näitel: https://github.com/i-b-c/KGS-Strapi/blob/8d01edc81bf7dd9b94312dfd3b8740815560eaf4/extensions/upload/services/image-manipulation.js#L157

@jaanleppik Lubasin jagada Sharp dokumentatsiooni linki, mina olen sealt Sharp võimalusi uurinud.

[LiisKasper]

Teen siis vahekokkuvõtte vestluse põhjal. Alustuseks tahame olukorda: Toimetaja laeb MediaLibrary pildi. Sellest tekivad taustal soovitud suurused ( soovitud mõõdud jagab @jaanleppik ). Toimetaja näeb ühte pilti, front otsustab millist taustal valmist tehtud pilti lehel kasutab.

Lisaks @LiisKasper jagab Sharp linki ja git viidet koodi asukohale, kus määratakse faili formaadid. (eelmine kommentaar) @jaanleppik jagab meedia failide töötlemise põhimõtteid ja terminoloogiat (link), taustal tekkivate failide soovitud mõõtmeid ja töötlemise parameetreid ja tiff faili, millega katsetada. Tiff faili laadimisel peab see muutuma jpg failiks! @LiisKasper

[jaanleppik]

Bitmap graafika failidest JPG faili ja selle eri versioonide loomise triggerid:

1. failiformaadid kui failiformaatideks on TIFF, PNG, WEBP, BMP, JPG (JPEG), siis

   • muuta failiformaati -> JPG
   • luu eri versioonid pildist (vt ver5sioonid allpool) Kui faili formaat on midagi muud - näiteks PDF, DOC, SVG vms, siis ei muuda failides uploadil midagi.

2. Failinime prefiks (ainult bitmap failidel, mis loetletud eelmises punktis) Kas saab käivitada erinevate prefiksite korral erinevate versioonide loomise?

   • F_ prefiks käivitab yhe versioonide loomise rea
   • P_ prefiks kävitab teise versioonide loomise rea
   • R_ prefiks käivitab kolmanda versioonide loomise rea
   • ilma ühegi prefiksita bitmap fail käivitab neljanda versioonide loomise rea ja muuta failiformaati -> JPG

F_ prefiksiga piltide versioonid (72 dpi):

1. 1920 x 1080 px, nime sufiks _big_16_9
2. 1280 x 720 px, nime suffiks _med_16_9
3. 640 x 360 px, nime suffiks _small_16_9

ilma prefiksita, ainult laiuse piiranguga pildid (72 dpi): 1920 x _big 1280 x _med 640 x _small

R_ prefiksiga, ruudukujuline pildid (72 dpi) 900 | 900 | _big_sq 500 | 500 | _med_sq 300 | 300 | _small_sq 100 | 100 | _thumb_sq

P_ prefiksiga e plakati / portrait formaadis pildid (72 dpi) 555 | 800 | _big_p 300 | 207 | _small_p

[jaanleppik]

crop'imise meetodid ja sõnavara - üks kaudne analoog: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit COVER on see, mida me soovime.

crop näited joonistena media_library_crop.pdf

[jaanleppik]

Pildinäited: webp ja tiff: https://drive.google.com/drive/folders/1_ixTONXb8Fnw4Z-Um67BSnLj77u-Tesv?usp=sharing

[LiisKasper]

Update: Vastavalt prefixile luuakse soovitud mõõtudes pildid, originaalpilt jääb Media librarys kuvama ja taustal, siis olemas soovitud pildid (pildi nimi + sufiks)

Samuti tundub, et pildi formaat saab kõigist nimetatud bitmap graafika failidest -> jpeg. Küll ei ütle seda Strapi front ja url on ka algupärase faililaiendiga. Mulle tundub, et Strapi loeb sisse faili andmeid laadimisel ja hiljem kasutab neid andmeid. Kui tahaksime frondis uut failiformaati kuvada, siis peame seda tegema veel sügavamal Strapi kõhus. Nt kohe laadimisel muutma failiformaati ja salvestama ainult soovitud formaadi vms. Siit küsimus, kui kaugele tahame minna? Strapi uuendused lähevad väga keeruliseks kui palju Strapi enda loogikat ümber kirjutame...

Lisaks ei saa ma ikka aru, mida teeb Strapi tiff formaadis failidega. Logid ütlevad, et fail on laetud ja sellest ka soovitud kuju ja formaadiga lisad tehtud, aga kuidas need kätte saada... Lisaks tiff faili laadimisel library'sse näitab Strapi katkise pildi ikooni (vaatasin sama olukord ka Saalis), originaalpildi laseb avada enda arvutis aga sellest tehtud lisaformaate mitte.

[jaanleppik]

Ma arvan, et see on OK, kui media librarys näeme vaid originaalfaili. Aga kas saan õigesti aru, et me praegu ei tea, kas tegelikult kõigist bitmapidest jpg versioonide loomine ka õnnestub - kuna ei oska neid kätte saada ja kontrollida? Kas peaks miski PUGi kirjutama selleks, et kuvada pildist kõiki võimalikke versioone?

[LiisKasper]

Seni tundub, et "kas loob" probleem on ainult tiff formaadiga. Teisega (jpeg, png, webp olen katsetanud) tundub toimivat, kui algne pilt on suuremate mõõtmetega, siis teeb kenasti väiksemad valmis. Kätte saab nt, kui kirjutad urli real originaal hashile juurde sufiksi, mis siis vastava prefiksiga kaasas käib. Nt: prefiks P_ , võimalikud sufiksid _big_p ja _small_p (urliks faili hash: P_Screenshot_TEST_1_d44ea883bb + sufiks ) originaal: P_ScreenshotTEST1.png taustal: P_ScreenshotTEST1_big_p.png ja P_ScreenshotTEST1_small_p.png

[jaanleppik]

Neis näidetes on failiformaat ikka PNG... Kas siin kood ei püüagi teha JPG faile?

[LiisKasper]

Püüab ikka. Ma ei julge 100% väita, ( kust v kuidas ma õige info kätte saan), aga mulle tundub, et tegelikult on lõigatud failid jpeg. Olenemata, mida tema nimi ütleb nt Firefox ütleb, et faili tüüp muutunud (jpeg) Kui neid pilte töötlen, siis sharp logidesse antav metadata ütleb ka et 'jpeg' failid. Ja kui lõigatud variandi alla laed, siis ka jpeg fail.

Siin see nimetamise koht, Strapi loeb laiendiks png kuna see algse faili laiend. Sealt ka küsimus, et kui kaugele me minna tahame Strapi ümber kirjutamisega.

[LiisKasper]

Originaal (kui kuulub nimekirja 'tiff', 'png', 'webp', 'bmp', 'jpg', 'jpeg' ) kirjutatakse kohe jpeg failiks ja tehakse temast ka lõiked. Nimetamine peaks ka nüüd sobilik olema.

[LiisKasper]

Kogu arendus harus Strapi_Media_Librarysettings#308

[jaanleppik]

Datamodeli update, et YALM sisladaks uusi versioone piltidest

[jaanleppik]

KUMU puhul test: filmide liti vaate PUGiga

[jaanleppik]

Vist jäi Colour mode veel erldi välja toomata: kui bitmapi colour mode ei ole RGB, siis salvestada pildifail RGB formaadis, soovitavalt 8 bits / channel võib veel vaielda, kas Grayscale ja Index ja LAB jne - peaks tegema RGB'ks. Mihkli arvamust tahaks kindlasti kah. Aga CMYK -> RGB igal juhul

[jaanleppik]

testpiltide kataloog: https://drive.google.com/drive/folders/1s7hsfyV86osgxyzZA86PjwEmYNVIQDzv?usp=sharing

[LiisKasper]

Laiendid millega Sharp hakkama saab ['tiff', 'tif', 'png', 'webp', 'jpg', 'jpeg']

[jaanleppik]

RGB formaati salvestamine on JPG'ks tegemisel vaikimisi kaasas. E kui laen mitte RGB värviformaadis ((CMYK, Lab, Grayscale)) faili ma yles laen, media librarysse tehtav jpg fail on alati RGB formaadis

[mitselek]

• originaal 7393x4931 7,0 MB
• üleslaetud baaspilt 7393x4931 15,2 MB
• _big 1920x4931
• _med 1280x4931
• _small 640x4931

praegu on pildid centercropitud laiuse suhtes.

[mitselek]

CSS terminoloogia object-fit

• cover - The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
• contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box.
• fill - The replaced content is sized to fill the element’s content box. The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.
• scale-down - The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
• none - The replaced content is not resized.

Sharpi terminoloogia resize method

• cover: (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit.
• contain: Preserving aspect ratio, contain within both provided dimensions using "letterboxing" where necessary.
• fill: Ignore the aspect ratio of the input and stretch to both provided dimensions.
• inside: Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified.
• outside: Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified.

Sharpi puhul on meile kohane outside, mitte cover, sest me soovime uue raami sisse siiski võimalikult palju pilti ära mahutada.

[LiisKasper]

Hästi, teen selle paranduse: cover vahetan outside vastu. @mitselek sinu hinnangul oleme siis saavutanud soovitud olukorra ja läheme live?

[mitselek]

Ei usu - vaatame neid rebasepilte uuesti

mihkel 5656 0978

On Mon, 27 Dec 2021 at 08:20, LiisKasper @.***> wrote:

Hästi, teen selle paranduse: cover vahetan outside vastu. @mitselek https://github.com/mitselek sinu hinnangul oleme siis saavutanud soovitud olukorra ja läheme live?

— Reply to this email directly, view it on GitHub https://github.com/poff-bnff/web2021/issues/308#issuecomment-1001360235, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGVJ3UM2G5YJYAM4XNIDDLUTAATXANCNFSM5F2T5FAA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[LiisKasper]

Rebase pilte? Ma ei näe issues ühtegi viidet rebase piltidele ega ka muud tagasisidet sinu lubatud testimisele, kui ainult viidet piltide valet tüüpi lõikamisele. Eeldan, et see on testimise tulemus. Mis on järgmised tingimused, mis nende piltidega juhtuma peab? Mis on erinev teie nägemusest, mida veel siin kirjas pole? Palun täpsustavaid tingimusi ja juhiseid, kui antud olukord pole see mida ootate!

[mitselek]

https://github.com/poff-bnff/web2021/issues/308#issuecomment-1000371835

Jaan Leppik 4 days ago huvitav, miks see uploadil 2 x suuremaks tehti?

Jaan Leppik 4 days ago ilma prefiksite pildist olemegi kirjeldanud, et muudetakse ainult laiust…

Jaan Leppik 4 days ago aga siin on tehtud laiuse crop, mitte resize

[LiisKasper]

Sulgen teema. Lives on olukord, kus pildid laetakse vastavalt pildi nime prefiksile (nii nagu üleval kirjeldatud) Prefiksiga failid laetakse Sharp cover meetodiga, ilma prefiksita inside meetodiga. Alles on thumbnail ja Strapi enda formaadid small, medium ja large (kui mõni vanem pilt peaks neid suuruseid küsima) Meie yamlites on pildid pugis küsitavad kujul:

Uued formaadid tekivad alates (29.12.2021) tagasiulatuvalt formaate ei tekitata.

[jaanleppik]

user profile piled uploaded: nimetame amber eesnimiperenimi lisame prefiksi U (nagu user)

loome U prefiksi jaoks piltide töötlemise raja - alustuseks R raja koopia

Palun ka juhendit, kust meid radu saab muuta.

[LiisKasper]

Prefiksiga U piltide lõikamine on live. R koopia. Muuta saab domain_specifics yamlist.