Saya sempat kebingungan bagaimana cara menampilkan gambar Avatar atau Author image di Template Essential maupun Contempo karena kode bawaan dari kedua tema tersebut tampaknya tidak bekerja.
Setelah mencoba mengambil kode dari Template Notable dan memasangnya pada kedua template tersebut barulah gambar avatarnya mau muncul. Berikut ini kodenya:
<b:include data='{image: data:post.author.authorPhoto.image,imageRatio: "1:1",imageSizes: [50],sourceSizes: "50px",imageClass: "author-image"}' name='responsiveImage'/>
Hasilnya akan seperti gambar dibawah ini.
Kode tersebut dapat dipasang dimana saja apakah diatas postingan disebelah nama dan tanggal ataupun diakhir postingan.
Namun lebih afdolnya pasang dalam area <b:includable id='postFooterAuthorProfile' var='post'> yang nantinya akan muncul diakhir postingan. Lihat gambar dibawah ini.
Pada aslinya susunannya memang begitu jadi saya yakin tidak sulit menemukan area itu dalam Template dan jika sudah ketemu kita hanya perlu menambahkan kode berikut saja disana.
<b:include data='{image: data:post.author.authorPhoto.image,imageRatio: "1:1",imageSizes: [50],sourceSizes: "50px",imageClass: "author-image"}' name='responsiveImage'/>
Setelah kode tersebut terpasang dalam Template dan seperti biasa kita bisa menampilkannya atau tidak melalui halaman Tata Letak > Gadget Blog > Edit (ikon pensil) > Conteng Tampilkan Profile Pengarang Dibawah Pos > Simpan > Selesai.
Jika belum mau muncul juga, kemungkinan karena <b:includable id='postFooterAuthorProfile' var='post'> belum di include.
Jika memang belum maka silakan di include dulu dengan kode berikut kedalam <b:includable id='postFooter' var='post'>.
<b:include cond='data:widget.type == "Blog"' data='post' name='postFooterAuthorProfile'/>
Seperti contoh gambar dibawah ini.
Sekalian saya sertakan contoh css dibawah ini, barangkali dibutuhkan, dengan catatan sesuaikan kode warnanya "posts.boxshadow.color" dengan Template Anda, kalau tidak maka akan error.
.author-profile{
-webkit-box-flex:0;
flex:0 0 auto;
-webkit-box-ordinal-group:5;
order:4;
border:1px solid $(posts.boxshadow.color);
border-radius:2px;
margin:0;
padding:7px 16px
}
.author-profile .author-about{
text-align:left
}
.author-profile .author-image{
float:left;
margin-right:10px
}
.author-profile .author-image img{
height:50x;
width:50px;
border-radius:50%;
border:1px solid $(posts.boxshadow.color)
}
.author-profile .author-name{
padding:7px;
border:1px solid $(posts.boxshadow.color);
border-radius:2px
}
.author-profile .author-desc{
line-height:1.6em
}
Comments
Post a Comment
Jika ada hal yang kurang jelas, misalnya tips dan trik yang tidak berfungsi, ulasan yang sudah usang, meski mengetahui ada ulasan yang memerlukan pembaruan terkadang kami malas untuk memperbaruinya, jadi silakan tanyakan saja melalui kolom komentar dan akan kita bahas bersama. Regards!