Skip to main content

Cara pasang Author image di Template Essential / Contempo

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: &quot;1:1&quot;,imageSizes: [50],sourceSizes: &quot;50px&quot;,imageClass: &quot;author-image&quot;}' name='responsiveImage'/>

Hasilnya akan seperti gambar dibawah ini.


Cara pasang Author image di Template Essential / Contempo


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: &quot;1:1&quot;,imageSizes: [50],sourceSizes: &quot;50px&quot;,imageClass: &quot;author-image&quot;}' 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 == &quot;Blog&quot;' data='post' name='postFooterAuthorProfile'/>


Seperti contoh gambar dibawah ini.


Jika belum mau muncul juga, sungguh terlalu, yang jelas di Template yang saya pakai mau kok muncul.

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