Bulan: April 2019

Menambahkan satu kalimat pada item thumbnail di Umbraco

/ novrian / Tinggalkan komentar

Halo, saya akan berbagi sebuah tips mengenai menampilkan satu kalimat saja pada daftar item. Biasanya, ini dilakukan untuk membuat thumbnail pada halaman home atau halaman daftar item pada CMS Umbraco versi 8.

Oke. Taruhlah saya ingin berada pada halaman articleList. Ingin menampilkan daftar article dengan property judul, gambar, tanggal pembuatan artikel, dan satu kalimat pembuka pada artikel untuk menarik pembaca.

Saya bisa menggunakan query builder yang disediakan umbraco untuk melakukan iterasi pengambilan article. Misalkam kode iterasi pengambilan item article seperti ini:

var Articles = Umbraco.Content(Guid.Parse("xxxxxxx-xxxx-xxxx-xxxx-xxxxxx"))
.Children("articlePage")
.Where(x => x.IsVisible())
.OrderByDescending(x => x.CreateDate);

kode di atas, akan ditampilkan dalam bentuk razor seperti ini:

@foreach (var item in Articles)
{
string description = Html.StripHtml(item.Value("mainArticle")).ToString();


<a href="@item.Url" class="col-sm-4">
                <div class="card tubeHome">
                    <div class="card-img-top" style="background-image: url(@item.Value("picture"))">

                    </div>
          
                    <div class="card-body">
                        <h4 class="card-title">@item.Name</h4>
                        <p>@description.Substring(0, description.IndexOf('.') + 1) ...</p>
                        <p class="card-text"><small class="text-muted">@item.CreateDate.ToString("dd MMM yyyy HH:mm")</small></p>
                    </div>
                </div>
            </a>

}

Pada kode di atas, akan ditampilkan judul, url artikel, gambar, tanggal pembuatan, dan satu kalimat pembuka artikel.

Kode pengambilan kalimat artikel adalah

string description = Html.StripHtml(item.Value("mainArticle")).ToString();

Saya memggunakan richtext editor untuk property konten artikel utama. Richtext editor akan menyimpan konten dalam bentuk html. Agar tidak merusak tampilan, tag html harus dihilangkan dengan kode @Html.StripHtml().

Kemudian, diambillah sebuah kalimat awal dari konten artikel utama dengan kode description.subString(0, description.indexOf('.')+1). Kode ini akan melihat urutan tanda titik pertama, ditambah satu. kemudian mengambil string dari range tersebut, sehingga didapatkan satu kalimat.

Demikian kodenya. Semoga bermanfaat.