Mengubah Ukuran Gambar Mini Tanpa JavaScript

Blogger memperkenalkan satu fitur lagi berupa kemampuan untuk mengubah ukuran gambar melalui sintaks templat:

resizeImage(url, size, ratio);

Berikut ini adalah contoh penerapannya pada widget posting populer. Sebelumnya, di dalam widget posting populer, kita akan melihat kode seperti ini yang berfungsi untuk menampilkan gambar mini:

<img expr:src='data:post.thumbnailUrl'/>

Sintaks di bawah ini memungkinkan kita untuk mengubah ukuran gambar mini ke dalam ukuran selain 72 × 72 piksel:

<img expr:src='resizeImage(data:post.thumbnailUrl, 72)'/>

Alternatif jika gambar utama tersedia di dalam posting (seperti featured image dalam WordPress, tapi sepertinya fitur ini masih draf):

<img expr:src='resizeImage(data:post.featuredImage.isResizable ? data:post.featuredImage : data:post.thumbnailUrl, 72, &quot;1:1&quot;)'/>

Ini berlaku juga untuk keluaran gambar dari data yang lain seperti gambar mini posting atau gambar mini dalam widget profil.

Singkatnya seperti itu.

Diskusi bisa dilanjutkan di bawah. Maaf jadi singkat-singkat, sekarang Saya sudah ada kesibukan tambahan lain di RS.

16 Komentar

  • Putra

    info terbaru nih, makasih mas :-bd

  • Adhy Suryadi

    Saya pernah mencoba mengutak-atiknya mas, bagaimana untuk menghilangkan cropping-nya? saya coba menggunakan perbandingan 2:1 memang menjadi persegi tapi gambar tetap tidak tampil utuh.
    Mudah2an ada solusinya :)

    • budkalon

      Bantu jawab, Kang. Supaya gambar tidak terpotong, saya mengosongkan nilai variabel ratio. Jadi sintaksnya hanyalah resizeImage(url, size);

      • Adhy Suryadi

        Sip...makasih solusinya mas Dzulmar...mantap :)

  • Anonim

    Baru update lagi nih mas...

  • IRIL SAGITA

    Kalau untuk :

    <meta expr:content='data:post.thumbnailUrl'/>

    apakah sama caranya kak ?

  • Anonim

    ditunggu tunggu akhirnya bangkit lagi blog DTE \o/, numpang gelar tikar mas taufik biar cepat merasuk ilmu yang saya dapat diblog ini.

    untuk pengaturan heightnya bagaimana mas ???

    makasih sebelumnya semoga DTE tambah sukses dan sering diupdate lagi artikel2 kerennya. :-bd

    • Taufik Nurrohman

      Untuk pengaturan tinggi gambar sepertinya hanya bisa dilakukan melalui parameter rasio, untuk kekurangan selebihnya bisa diatasi dengan CSS height.

      • Anonim

        berarti untuk penulisan dengan ukuran width 72px dan height 50px seperti ini bukan mas taufiq
        <img expr:src='resizeImage(data:post.thumbnailUrl, 72, 50)'/>

        • Taufik Nurrohman

          Parameter ke tiga digunakan untuk memasukkan rasio, dan rasio hanya akan valid jika nilainya berupa integer (angka bulat), jadi untuk membuat kalkulasi seperti ini misalnya, masih tetap tidak memungkinkan.

          Solusi satu-satunya cuma membungkus gambar dengan elemen HTML, kira-kira seperti ini:

          .image {
          display:inline-block;
          width:72px;
          height:50px;
          overflow:hidden;
          }
          .image img {
          display:block;
          width:72px;
          height:72px;
          }
          <span class="image">
          <img expr:src='resizeImage(data:post.thumbnailUrl, 72, &quot;1:1&quot;)'/>
          </span>
  • Unknown

    Maaf mas mungkin oot, 7:(
    Apa ini fungsi sama kayak fitur "Fill image" pada pengaturan wallpaper di windows? :\

    Terima kasih.

    • Taufik Nurrohman

      Iya kalau nilai crop aktif (jika parameter rasio ditentukan).

  • Unknown

    Maaf mas OOT..
    klo cara membuat emoticon saat diklik muncul shortcut key nya gimana..
    seperti blog ini

  • Nurul Hikmah S.

    Ya ampun, saya nyari kemana" ga ada yang work. Rupanya meta expr-nya juga diganti semuaa, baru deh nggak blur. Thanks banget ya gan :D

  • Unknown

    Izin belajar di blog ini mas, artikelnya bermanfaat banget. Makasih mas.

Komentar telah ditutup.