kali ini saya akan mengajari Anda cara membuat fungsi untuk memanipulasi gambar yang dihosting di Google melalui Blogger, Google Foto, dan bahkan YouTube, baik menggunakan parameter di url atau menggunakan metode yang disertakan dalam sintaks Blogger.

Parameter Gambar Blogger

Situasi

Saat kami mencoba membuat perubahan spesifik pada data gambar , kode kami mungkin terlihat seperti ini:

<b:if cond='data:view.featuredImage'>
  <img expr:src='resizeImage(data:view.featuredImage, 300,"4:3")'/>
</b:if>

Di sini kami hanya memeriksa apakah gambar unggulan ada di postingan, dan jika ada, kami mengubah ukurannya. Sekarang ketika kita meningkatkan kompleksitas logikanya, kode menjadi sangat sulit untuk dibaca dan dipelihara :

<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>

Fitur di Blogger

Untuk menghindari situasi seperti ini, kita dapat membuat fungsi di Blogger yang secara khusus bertanggung jawab untuk memanipulasi gambar, dengan cara ini kita dapat menggunakan kembali kode tersebut di mana saja di template, dan jika kita perlu melakukan perubahan, kita hanya perlu memodifikasi penyertaannya. .

<b:includable id='@image'>
  <b:comment></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:source, 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='[
          "content.com/img/a/",
          "content.com/blogger_img_proxy"
        ]' var='servers'> 
        <b:with value='data:params and (data:servers any (server => server in data:image))
          ? ("-" + 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: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>

Penjelasan

Fungsinya hanya memerlukan parameter src, yang terlebih dahulu memeriksa apakah gambar tersebut milik Youtube , dan jika ya, ubah urlnya ke yang memiliki resolusi tertinggi.

Setelah dilakukan pengecekan keberadaan gambar, maka akan diperlakukan dengan parameter yang telah diteruskan padanya. Jika tidak ada yang ditentukan, maka gambar asli akan dikirimkan tanpa perubahan. Jika parameter srctidak ditentukan, Anda akan melihat komentar HTML .

Cara menggunakan

Tambahkan penyertaan sebagai markup Blogger default jenis "Umum" dan kini Anda dapat menyertakannya di mana pun Anda perlu bekerja dengan gambar. Sekarang kita akan meninjau parameternya.

Url gambar

Saya menyarankan agar gambar dihosting di server Google melalui Blogger, Google Foto, atau YouTube. Jika berasal dari server luar, Blogger akan mengirimkan hasilnya melalui proxy dan hal ini selain merugikan kinerja , terkadang gambar tidak ditampilkan.

<b:include data='{ src: data:view.featuredImage }' name='@image'/>
<img src='/s1600/demo.png'/>

Teks alternatif

Teks alternatif untuk ditampilkan ketika gambar gagal dimuat. Secara default, label data digunakan data:messages.imagebila tidak ditentukan.

<b:include data='{
    src: data:view.featuredImage,
    alt: "Texto alternativo"
  }' name='@image'/>
<img src='/s1600/demo.png' alt='Texto alternativo'/>

Pengidentifikasi dan kelas

idAtribut dan hanya ditambahkan classke tag img.

<b:include data='{
    src: data:view.featuredImage,
    id: "NombreUnico",
    class: "ejemplo"
  }' name='@image'/>
<img src='/s1600/demo.png' class='ejemplo' id='NombreUnico'/>

Ukuran dan rasio aspek

Parameter ini mungkin yang paling penting dan menarik bagi kami, karena parameter tersebut memanipulasi dimensi dan tampilan gambar akhir. Selain itu, atribut widthdan heightakan ditambahkan secara otomatis jika rasio aspek ditentukan.

<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'/>

Tabel dimensi

Atribut dihasilkan srcsetdengan dimensi yang ditentukan. Nilai pertama dalam tabel akan menjadi ukuran gambar asli, dan sisanya akan digunakan bergantung pada ukuran layar pengguna.

<b:include data='{
    src: data:view.featuredImage,
    srcset: [300, 600, 900]
  }' name='@image'/>

Tinggi dan lebar

Jika Anda memerlukan ukuran khusus, Anda dapat menggunakan atribut widthand height, parameter ini akan diutamakan daripada ukuran setelah menentukan resizedan ratio.

<b:include data='{
    src: data:view.featuredImage,
    width: 300,
    height: 200
  }' name='@image'/>

atribut ukuran

Atribut tersebut sizesdigunakan untuk menentukan ukuran gambar tergantung pada ukuran layar pengguna. Jika Anda ingin mengetahui lebih banyak tentang atribut ini, Anda dapat membaca dokumentasi Mozilla tentang gambar responsif .

<b:include data='{
    src: data:view.featuredImage,
    sizes: "(max-width: 600px) 100vw, 50vw"
  }' name='@image'/>

memuat atribut

Atribut ini loadingmemungkinkan kita untuk menggunakan pemuatan lambat asli di browser, ini benar-benar salah satu atribut paling kuat yang dapat kita gunakan. Jika Anda ingin mengetahui lebih banyak tentang atribut ini, Anda dapat membaca dokumentasi Mozilla tentang pemuatan lambat .

<b:include data='{
    src: data:view.featuredImage,
    loading: "lazy"
  }' name='@image'/>

Parameter tambahan

Jika Anda perlu menambahkan parameter gambar, Anda dapat menentukan params. Parameter ini hanya akan berlaku pada gambar yang dihosting Blogger dari server baru . Jika Anda ingin tahu lebih banyak, Anda dapat membaca artikel saya tentang parameter tambahan .

<b:include data='{
    src: data:view.featuredImage,
    params: "rw-e30"
  }' name='@image'/>

Kesimpulan

Seiring berkembangnya proyek, penting untuk menjaga kode tetap bersih dan mudah dibaca. Dengan fungsi ini kita dapat memanipulasi gambar dengan lebih sederhana dan efisien, selain dapat menggunakan kembali kode dimanapun di template, kita juga dapat dengan mudah memodifikasinya jika diperlukan.

Seperti yang selalu saya lakukan untuk jenis kontribusi ini, Anda akan menemukan topik pengembangan di lampiran sehingga Anda dapat bereksperimen dengan fungsi tersebut dan lebih memahami penggunaannya. Jika Anda menyukai kontribusi ini, jangan lupa untuk membagikannya, saya akan sangat menghargainya.