Carduri de partajare 1200×630 pentru produse, colecții și articole
Desprins din #8 (closed), unde a rămas ca dependență: câmpul shareImage există și e completabil din panou, dar e gol peste tot, deci partajarea folosește poza paginii — care are altă formă și intră tăiată. La un produs vertical se vede doar mijlocul aparatului; articolele pierd o treime din înălțime.
Ce se construiește
Un generator care produce, din pozele existente, câte un card de 1200×630 pentru fiecare produs, colecție și articol — 113 în total (31 de produse, 10 colecții, 72 de articole).
Regula de adresă, ca să nu existe presupuneri despre handle-uri: cardul imaginii X stă la /share + X, cu extensia .jpg. Scriptul din backend calculează adresa din chiar imaginea entității.
Două tratamente:
-
Produs — produsul întreg, nimic tăiat, pe dala
#F7F5F5pe care stă și în magazin, cu wordmark negru sus-stânga. - Colecție și articol — fotografia decupată la 1200×630, cu wordmark alb jos-stânga peste o umbră discretă doar în colțul acela.
De ce decupajul are nevoie de reglaj per imagine
Verificat pe două fotografii reale, cu trei metode automate:
- decupajul „inteligent" (
sharp.strategy.attention) a tăiat capetele ambilor oameni din poza colecției Hypervolt; - decupajul centrat a tăiat capul unuia dintre ei;
- decupajul de sus, bun la colecție, a tăiat rola din poza articolului de foam rolling — adică subiectul.
Nu există o valoare bună pentru toate cele 82 de fotografii. Decupajul primește o fracțiune reglabilă (cât din surplusul de înălțime se ia de sus), cu implicit rezonabil și excepții per imagine, iar rezultatele se verifică vizual pe planșe de contact înainte de livrare.
De făcut
-
Generator în tools/image-optimizer/, cu fracțiunea de decupaj și fișierul de excepții -
Cele 113 carduri, verificate vizual una câte una pe planșe de contact -
Lista celor generate, emisă pentru backend, ca scriptul să nu scrie niciodată o adresă fără fișier -
Script care completează shareImagedoar unde e gol, ca să nu suprascrie nimic pus din panou -
Jobul manual în CI — în MR separat, orice diff pe .gitlab-ci.ymllasă MR-ul fără pipeline
Criteriu de acceptare
sips pe cardul unui produs, al unei colecții și al unui articol dă 1200×630. Reluat scanul pe cele 381 de adrese din sitemap: fiecare pagină de produs, colecție și articol servește un og:image de 1200×630. Facebook Sharing Debugger pe o pagină de produs arată produsul întreg, netăiat.