Dulu banyak sekali yang bertanya Bagaimana Cara Memanipulasi Thumbnail Posting NextWapBlog untuk kebutuhan design blog Template NextWapBlog, seperti atribut class misalnya. Tak sedikit juga yang bertanya perihal bagaimana mendapatkan link thumbnail untuk post overview NextWapBlog. Tapi kesempatan kali ini saya akan berbagi sedikit pengetahuan tentang Twig Hacks pada NextWapBlog.


Twig Tutorial NextWapBlog

Thumbnail

Pada dasarnya sintaks twig untuk thumbnail adalah html mentah yang langsung dieksekusi langsung oleh PHP DOM lihat pada akhir sintaks jika ada raw disana.


{{ site.settings.display_thumbnail == 'yes' ? post.thumbnail|raw : '' }}

Jika kita ingin mengganti atribut class pada thumbnail untuk menyesuaikan selector css kita, tinggal kita gunakan filter replace() karena twig sendiri sebenarnya adalah PHP yang telah dibuat sedemikian rupa untuk memudahkan para designer dalam kegiatanya membuat template. Jadi jika kita ingin merubah atribut class untuk selector CSS pada thumbnail lihat pada sintaks highlighter dibawah ini :


{{ site.settings.display_thumbnail == 'yes' ? post.thumbnail|replace({ 'class="thumbnail"' : 'class="selector-ku"' })|raw : '' }}

Setelah selesai lihat blog anda dan lihat source codenya secara otomatis berubah mengikuti perintah replace tersebut. Sesuaikan selector CSS dengan selector CSS anda sendiri tergantung bagaimana kebutuhan anda.

Tanggal dan Waktu

Tanggal dan waktu pada NextWapBlog membosankan ? Atau tidak sesuai Tanggal dan Waktu W3C begini cara menyesuaikanya.

Tanggal dan Waktu pada NextWapBlog memiliki sintaks sepeti berikut kita ambil contoh waktu posting


{{ post.time|date('d-M-Y - H:i:s') }}

Sintak diatas akan menghasilkan format tanggal dan waktu seperti berikut : 12-Dec-2017 - 00:23:59. Nah bagaimana jika yang anda inginkan adalah nama bulan menjadi full bukan tiga huruf seperti diatas, maka sobat hanya perlu merubah karakter "M" pada sintaks diatas dengan karakter "F" lihat sintaks highlight dibawah ini


{{ post.time|date('d-F-Y - H:i:s') }}

Yang akan dihasilkan adalah 12-December-2017 - 00:23:59. Lalu bagaimana jika yang diinginkan anda semuanya numeric atau angka ?? Jelas sekali anda tidak akan menemukan tutorial dimanapun kecuali disini. Cara Merubah Format Tanggal Waktu NextWapBlog Agar Valid W3C. Hal ini sangat bermanfaat saat anda meng-embed structured data google.

{{ post.time|date('c') }}

Yang dihasilkan nantinya adalah 2017-12-17T00:23:59+07:00. Dan format ini valid W3C

List of Format Options

\ = used to escape non template characters
A = AM/PM (AM)
a = am/pm (am)
B = Swatch internet time (171)
c = full (2018-02-13T03:07:22+00:00)
D = day of week (Tue)
d = day of month (13)
e = timezone (GMT)*
F = name of month (February)
g = hour (3) (12 hr no leading 0)
h = hour (03) (12hr leading 0)
G = hour (3) (24hr no leading 0)
H = hour (03) (24hr leading 0)
i = minutes (07)
I = daylight saving (0) (1=yes 0=no)
j = day of month (13) (no leading 0)
l = day of week (Tuesday)
L = leapyear (1=yes 0=no) (0)
M = name of month (Feb)
m = month (02) (leading 0)
n = month (2) (no leading 0)
N = day (1=mon 7=sun) (2)
w = day (sun=0 sat=6) (2)
r = full (Tue, 13 Feb 2018 03:07:22 +0000)
S = type of date (1st 2nd 3rd 4th) (th)
s = seconds (22)
T = timezone abbrv (GMT)
t = days in month (28)
U = seconds since 1/1/1970 (1518491242)
W = week number (07)
y = year (18)
Y = year (2018)
z = days (0=jan 1) (43)
O = difference from GMT in hours (+0000) *
P = same with a colon (+00:00)*
u = Microseconds (000000)

Sekian Twig Tutorial NextWapBlog. Sampai jumpa pada tutorial selanjutnya.

Photo p
Profile of Eza dwi anandharikyEza Dwi Anandharizky

"Malapetaka yang paling besar tidak lain adalah perasaan yang tidak pernah puas. Kekeliruan yang paling besar tidak lain karena ingin mendapatkan sesuatu. Oleh karena itu, ia yang merasa puas dengan keadaan yang memuaskan akan selamanya menikmati kepuasan"

Eza Dwi Ananadharizky February 13, 2018