Kartlar mobil ekranlar ve sosyal önizlemeler için görsel seçmek

Geniş bir illüstrasyon ihtiyacınız olan her şeyi içerse de kartta iyi görünmeyebilir. Bu Northstar Studio örneğinde atölye defteri masanın sağ kenarına yakındır. Orijinalde yeterince ayrıntı vardır; ancak ortalanmış bir kırpma konuyu keser. Telefonda ise masanın tamamını korumak, defteri küçük bırakır.

Bunlar farklı düzenleme sorunlarıdır. Daha küçük dosya, görselin iletimine yardımcı olur. Odak noktası kırpmayı yönlendirir. Ayrı mobil görsel, editörün dar ekran için daha yakın bir kompozisyon seçmesini sağlar.

Bu örnek için Medya Kitaplığı’ndan iki görsel seçin: Workshop table landscape ve Workshop notebook detail. Yatay görsel 2400×1200 boyutlu orijinal illüstrasyondur. Dikey detay ise mobil görünüm için hazırlanmış, aynı defteri gösteren ayrı bir 900×1200 görseldir.

Bu ayrımı koruyun. WebBlocks CMS, desteklenen ve herkese açık JPEG, PNG ve WebP görsellerinden daha küçük veya kırpılmış varyantlar üretir. Bu dosyalar Medya Kitaplığı’nda fazladan kayıt oluşturmaz. Dikey detayın burada görünmesinin nedeni, editörün seçtiği ikinci bir orijinal olmasıdır.

Media bölümünde yatay görseli açıp Image Variants alanına bakın. Örnekte ortalanmış Thumbnail ve Card kırpmaları defterin bir kısmını keser. Content önizlemeleri geniş illüstrasyonun oranlarını korur; konuyu yakın plana dönüştürmez.

Daha yüksek çözünürlüklü dosya yüklemek, bu kadraj sorununu çözmez. Konu, kırpmanın yanlış yerindedir. Bunlar sistem varyantlarının önizlemeleridir: burada Card varyantını görmek, Card bloğunun onu otomatik seçtiği anlamına gelmez. Mevcut sürüm card ve hero varyantlarını hazır tutar; bu blok rolleri için özel Medya Kitaplığı seçim alanları sunmaz.

Medya düzenleme formundaki Focal Point seçicisinde defteri işaretleyip değişikliği kaydedin. Nokta medya kaydına aittir; taşımadan önce görselin diğer kullanımlarını düşünün. Görselin kullanıldığı yerlerde üretilen kırpılmış varyantları yönlendirir; her yerleşime ait ayrı kırpma ayarı değildir.

Regenerate variants ile sistem önizlemelerini yeniden üretip inceleyin. Örnekte Thumbnail ve Card kırpmaları artık defteri korur. Orijinal dosya değişmez. Contain varyantları orijinalin en boy oranını koruduğu için noktayı taşımak, normal Image bloğunu deftere yakınlaştırmaz.

Varyant boyutlarını CMS belirler. Bu ekran editöre onları inceleme ve yeniden üretme olanağı sağlar; her proje için özel ölçü tanımlama arayüzü sunmaz. Social önizlemesini de inceleyin: sayfa veya site sosyal görselleri, Open Graph ve Twitter metadata’sında social kırpmasını kullanır.

Sayfanın Image bloğu, varsayılan Media Asset olarak Workshop table landscape; Mobile Image olarak Workshop notebook detail kullanır. İkinci seçim, üretilen varyantlardan bağımsız bir editoryal karardır.

768 piksele kadar olan genişliklerde mobil görsel seçilir. Daha geniş ekranlar varsayılanı kullanır. Mobil seçim yoksa, özelse veya silinmişse varsayılan görsele dönülür. Image bloğu duyarlı görsel adayları da sunar; ancak daha küçük adayın seçilmesi, bu alternatif kompozisyonun seçilmesinden farklıdır.

Masaüstü önizlemesi masanın tamamını gösterir. Mobil önizleme, ziyaretçinin çok daha geniş bir sahnede aramasına gerek bırakmadan defteri öne çıkarır.

İki görsel aynı blok alternatif metnini ve altyazısını kullanır. Örnekte “Toprak tonunda bir daire ve yeşil üçgen içeren, illüstrasyon olarak çizilmiş atölye defteri” ifadesi, iki görünümde de konuyu tanımlar. Alternatif metin ve altyazı dil başına çevrilebilir; ancak varsayılan ve mobil görsel seçimleri diller arasında ortaktır. Bu açıklamalarla uyuşan, birbiriyle ilişkili kompozisyonlar seçin.

Dar ekran görselinin dışında iki son kontrol daha vardır. Image bloğunun Gallery Viewer’ı varsayılan tam çözünürlüklü görseli açmaya devam eder. Ayrıca bloğun Mobile Image seçimi, sayfanın sosyal görselini belirlemez: paylaşımda kullanılan sayfa veya site görselini ayrıca seçip inceleyin. CMS’in Social varyantı üretilen kırpmayı gösterir; bağlantıyı paylaşırken dış servisin son kartını da kontrol etmek yararlıdır.

Davranışın ayrıntıları için Media Image Variants belgesine bakın. Add An Image, blok alanlarını adım adım açıklar. Görseller yayındaki bir sayfanın güncellemesine aitse yayındaki sayfayı inceleyerek güncelleme akışını kullanın.

Yorumlar yayımlanmadan önce incelenir.