Geliştirme yazılarına devam ediyoruz. Bugün size Blogger, Google Photos ve hatta Youtube aracılığıyla Google'da barındırılan resimleri, url'deki parametreleri kullanarak veya Blogger sözdiziminde bulunan yöntemleri kullanarak işlemek için nasıl bir işlev oluşturacağınızdan bahsedeceğim.
Durum
Görüntü türü verilerinde belirli değişiklikler yapmaya çalıştığımızda, kodumuz aşağıdaki gibi görünebilir:
<b:if cond='data:view.featuredImage'>
<img expr:src='resizeImage(data:view.featuredImage, 300,"4:3")'/>
</b:if>
Burada sadece girdide öne çıkan bir resim olup olmadığını kontrol ediyoruz ve varsa yeniden boyutlandırıyoruz. Mantığın karmaşıklığını artırdığımızda, kodun okunması ve bakımı çok zor hale gelebilir:
<b:if cond='data:view.featuredImage'>
<b:if cond='data:view.featuredImage.isYoutube'>
<img expr:src='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 300,"4:3")'/>
<b:else/>
<img expr:src='resizeImage(data:view.featuredImage, 300,"4:3")'/>
</b:if>
</b:if>Blogger'da Fonksiyon
Bu tür bir durumdan kaçınmak için Blogger'da özellikle resimleri işleyen bir işlev oluşturabiliriz. Bu şekilde, kodu şablonun herhangi bir yerinde yeniden kullanabiliriz ve değişiklik yapmamız gerekirse, yalnızca eklemeyi değiştirmemiz gerekir.
<b:includable id='@image'>
<b:comment><!--
// @param {image} src - Görüntünün Url'si
// @param {string} [alt=data:messages.image] - Alternatif metin
// @param {string} [id] - Benzersiz tanımlayıcı
// @param {string} [class] - Ek sınıflar
// @param {string} [width] - Özel Genişlik
// @param {string} [height] - Özel yükseklik
// @param {number} [resize] - Yeni görüntü boyutu
// @param {string} [ratio] - En boy oranı (4:3, 16:9 vb)
// @param {string} [sizes] - Öznitelik boyutları için değerler
// @param {array} [srcset] - Boyutlar tablosu (srcset oluşturur)
// @param {string} [loading] - Yükleme özniteliği için değerler
// @param {string} [params] - Ek parametreler (zkreations.com/image-params)
--></b:comment>
<b:if cond='data:src'>
<b:with value='data:src.isYoutube ? data:src.youtubeMaxResDefaultUrl : data:src' var='source'>
<b:with value='(data:resize ? resizeImage(data:src, data:resize, data:ratio) : (data:source))' var='image'>
<b:tag expr:alt='data:alt ?: data:messages.image' name='img'>
<b:attr name='b:whitespace' value='remove'/>
<b:attr name='id' expr:value='data:id'/>
<b:class cond='data:class' expr:name='data:class'/>
<b:attr name='width' expr:value='data:width ?: data:image.width'/>
<b:attr name='height' expr:value='data:height ?: data:image.height'/>
<b:attr name='sizes' expr:value='data:sizes'/>
<b:attr name='loading' expr:value='data:loading'/>
<b:with value='data:params and (data:image contains "blogger.googleusercontent.com/img/a/") ? ("-" + data:params) : ""' var='params'>
<b:attr name='src' expr:value='(data:srcset ? resizeImage(data:image, data:srcset.first, data:ratio) : data:image) + data:params'/>
</b:with>
<b:if cond='data:srcset'>
<b:attr name='srcset' expr:value='sourceSet(data:image, data:srcset, data:ratio)'/>
</b:if>
</b:tag>
</b:with>
</b:with>
<b:else/>
<b:comment render='true'>Parameter [src] is required.</b:comment>
</b:if>
</b:includable>Açıklama
Fonksiyon sadece src parametresine ihtiyaç duyar. Bu parametre önce görüntünün Youtube'a ait olup olmadığını kontrol eder ve eğer öyleyse url'yi daha yüksek çözünürlüklü olana değiştirir.
Görüntünün varlığını kontrol ettikten sonra, kendisine iletilen parametrelerle işlem görecektir. Hiçbiri belirtilmemişse, orijinal görüntüyü değiştirmeden teslim edecektir. src parametresi belirtilmemişse, bunun yerine bir HTML yorumu görürsünüz.
Bu işlevi zkreations - Daniel Abel tarafından geliştirilen Hamlet adlı Blogger şablon geliştirme projesinde bulabilirsiniz, nasıl çalıştığını daha iyi anlayabilmeniz için deposuna bir göz atmanızı tavsiye ederim.
Nasıl kullanılır
Eklemeyi "Common" türünde varsayılan bir Blogger biçimlendirmesi olarak ekleyin. Resimlerle çalışmanız gereken her yerde kullanabilirsiniz. Şimdi parametrelere bir göz atacağız.
Resim URL'si
Görselin Blogger, Google Fotoğraflar veya Youtube aracılığıyla Google sunucularında barındırılmasını tavsiye ederim. Harici bir sunucudan geliyorsa, Blogger "sonucu" bir proxy aracılığıyla iletecektir ve bu, performansa zarar vermenin yanı sıra, bazen görüntü görüntülenmeyecektir.
<b:include data='{ src: data:view.featuredImage }' name='@image'/><img src='/s1600/demo.png'/>Alternatif metin
Resim yüklenemediğinde görüntülenecek alternatif metin. Belirtilmediğinde varsayılan olarak bir data:messages.image veri etiketi kullanılır.
<b:include data='{
src: data:view.featuredImage,
alt: "Alternatif metin"
}' name='@image'/><img src='/s1600/demo.png' alt='Texto alternativo'/>Tanımlayıcı ve sınıflar
img etiketine id ve class niteliklerini eklemeniz yeterlidir.
<b:include data='{
src: data:view.featuredImage,
id: "Benzersizİsim",
class: "ornek"
}' name='@image'/><img src='/s1600/demo.png' class='ejemplo' id='NombreUnico'/>Boyut ve en boy oranı
Bu parametreler muhtemelen en önemlileridir ve nihai görüntünün boyutlarını ve görünümünü değiştirdikleri için ilgilendiğimiz parametrelerdir. Ek olarak, en boy oranı belirtilirse width ve height özellikleri otomatik olarak eklenecektir.
<b:include data='{
src: data:view.featuredImage,
resize: 300,
ratio: "4:3"
}' name='@image'/><img src='/w300-h225-p-k-no-nu/demo.png' height='225' width='300'/>Boyut tablosu
srcset özniteliği belirtilen boyutlarla oluşturulur. Tablodaki ilk değer orijinal görüntünün boyutu olacaktır ve geri kalanı kullanıcının ekranının boyutuna bağlı olarak kullanılacaktır.
<b:include data='{
src: data:view.featuredImage,
srcset: [300, 600, 900]
}' name='@image'/>Yükseklik ve genişlik
Özel bir boyuta ihtiyacınız varsa, width ve height niteliklerini kullanabilirsiniz, bu parametreler yeniden resize ve ratio belirtildikten sonra boyuttan öncelikli olacaktır.
<b:include data='{
src: data:view.featuredImage,
width: 300,
height: 200
}' name='@image'/>Boyut özelliği
sizes niteliği, kullanıcının ekranının boyutuna bağlı olarak görüntünün boyutunu belirtmek için kullanılır. Bu özellik hakkında daha fazla bilgi edinmek isterseniz, Mozilla'nın duyarlı görüntülerle ilgili belgelerine başvurabilirsiniz.
<b:include data='{
src: data:view.featuredImage,
sizes: "(max-width: 600px) 100vw, 50vw"
}' name='@image'/>Yükleme özelliği
loading özelliği, tarayıcıda yerel ertelenmiş yüklemeyi kullanmamıza izin verir. Bu gerçekten kullanabileceğimiz en güçlü özelliklerden biridir. Bu özellik hakkında daha fazla bilgi edinmek istiyorsanız, ertelenmiş yükleme hakkında Mozilla'daki belgelere başvurabilirsiniz.
<b:include data='{
src: data:view.featuredImage,
loading: "lazy"
}' name='@image'/>Ek parametreler
Resim parametreleri eklemeniz gerekiyorsa, params belirtebilirsiniz. Bu parametre sadece Blogger'da barındırılan resimler için geçerli olacaktır. Daha fazla bilgi edinmek isterseniz ek parametreler hakkındaki yazıya göz atabilirsiniz.
<b:include data='{
src: data:view.featuredImage,
params: "rw-e30"
}' name='@image'/>Sonuç
Proje büyüdüğünde, kodu temiz ve okunabilir tutmak önemlidir. Bu özellik sayesinde görselleri daha basit ve verimli bir şekilde işleyebilir, kodu şablonun herhangi bir yerinde yeniden kullanabilir ve gerekirse kolayca değiştirebiliriz.
Bu tür yazılar için, ek bağlantılarda bir geliştirme teması bulacaksınız. Böylece işlevi deneyebilir ve kullanımını daha iyi anlayabilirsiniz. Bu katkıyı beğendiyseniz, paylaşmayı unutmayın.
