Tuesday, June 21, 2016

Tampilan Posting Berbeda-Beda Berdasarkan Label Tanpa JavaScript

Darcy Clarke

Opsi 1: Dengan Label itu Sendiri

Kekurangan: Nama label harus valid sebagai nama kelas dalam CSS. Satu karakter spasi dalam sebuah nama label akan membuatnya berlaku sebagai dua buah kelas CSS, dua sebagai tiga, tiga sebagai empat, begitu seterusnya.

<div class='post
<b:loop values='data:post.labels' var='label'>
  post-<data:label.name/>
</b:loop>
&#39;&gt;

<!-- konten posting di sini… -->

&lt;div&gt;

Opsi 2: Dengan Nama Kelas Khusus

Kekurangan: Kondisional untuk menentukan nama kelas adalah hard-coded, karena label tidak memiliki nilai abstrak seperti halnya ID pada posting dan komentar.

&lt;div class=&#39;post
<b:loop values='data:post.labels' var='label'>
  <b:switch var='data:label.name'>
    <b:case value='Menyenangkan'/>
post-red
    <b:case value='Jelek'/>
post-green
    <b:case value='Bosan'/>
post-blue
    <b:default/>
post-white
  </b:switch>
</b:loop>
&#39;&gt;

<!-- konten posting di sini… -->

&lt;div&gt;

Contoh CSS

.post {border-left:4px solid white}
.post-red {border-left-color:red}
.post-green {border-left-color:green}
.post-blue {border-left-color:blue}

Terkait: Tampilan Posting Berbeda-Beda Berdasarkan Label

Labels: ,

Sunday, June 19, 2016

Menggunakan `b:with`

Tag <b:with> berfungsi untuk membuat variabel alternatif dari sebuah data atau bahkan dari variabel yang lain. Pada contoh di bawah, <data:name/> akan menampilkan teks Taufik Nurrohman:

<b:with var='name' value='Taufik Nurrohman'>
  <h1><data:name/></h1>
</b:with>

Dan pada contoh di bawah, variabel site akan memiliki nilai yang sama dengan blog. Di sini, tag <b:with> hanya berfungsi sebagai alias variabel blog:

<b:with var='site' value='data:blog'>
  <b:if cond='data:site.url == data:blog.url'>
    <p><mark>OK!</mark></p>
  </b:if>
</b:with>

Nilai value pada tag <b:with> tidak harus berupa data primitif. Anda juga bisa menuliskan data berupa koleksi, misalnya seperti ini:

<b:with var='page' value='{
    title: "Page Title",
    description: "Page description.",
    author: "Taufik Nurrohman",
    link: "//example.com",
    tags: ["Foo", "Bar", "Baz"]
}'>

  <article>
    <h2>
      <a expr:href='data:page.link'>
        <data:page.title/>
      </a>
    </h2>
    <p><data:page.description/></p>
    <p>
      <strong>Tags:</strong>
      <b:loop values='data:page.tags' var='tag'>
        <data:tag/>
      </b:loop>
    </p>
  </article>

</b:with>

Salah satu kekurangan fitur ini menurut Saya adalah bahwa setiap variabel hanya berlaku di dalam cakupan masing-masing tag <b:with> karena sifat tag ini memang tidak sama dengan tag yang dapat berdiri sendiri seperti misalnya <b:class>. Oleh karena itu, ketika kita ingin membuat beberapa nama variabel sekaligus dalam satu tema, maka kita perlu membuat lingkup tag <b:with> berkali-kali seperti ini, yang mana akan membuat kode menjadi makin tidak nyaman untuk dibaca:

<b:with var='date' value=' … '>
  <b:with var='language' value=' … '>
    <b:with var='site' value=' … '>
      <b:with var='url' value=' … '>

        <body> … </body>

      </b:with>
    </b:with>
  </b:with>
</b:with>

Solusi yang paling mudah dan sesuai prosedur tentunya adalah dengan mengubah data sebagai objek dan menyimpannya ke dalam satu nama variabel:

<b:with var='vars' value='{
    date: … ,
    language: … ,
    site: … ,
    url: … ,
}'>

  <body> … </body>

</b:with>

Satu hal yang Saya harapkan untuk ke depannya jika Blogger memang benar masih tetap akan terus dikembangkan adalah adanya sebuah tag yang memiliki fungsi seperti tag <b:with> namun dengan sintaks dan sifat yang sama dengan <b:class>, dengan harapan bahwa kita akan dapat membuat nama variabel secara inline dimana cakupan tidak lagi didasarkan pada tag tersebut melainkan didasarkan pada tag induk:

<b:var name='foo' value='ABC'/>

<data:foo/> <!-- “ABC” -->

<div>

  <b:var name='foo' value='DEF'/>
  <b:var name='bar' value='123'/>
  <b:var name='baz' value='["Foo", "Bar", "Baz"]'/>

  <data:foo/> <!-- “DEF” -->

</div>

<data:foo/> <!-- “ABC” -->

Labels: ,

Saturday, June 18, 2016

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.

Labels: ,