Arkaplanlı Makale/Kategori Alanı

Arkaplanlı Makale/Kategori Alanı

Verilan arkaplan genişliğini otomatik olarak yükseklik bazlı yayar. Bir satıra fotoğraflı 4 adet nesne getirir. Nesneler linklendirilebilir.

HTML

Sadece HTML olarak kullanmak istenildiği zaman aşağıdaki kodu direkt olarak kullanabilirsiniz. Kodun açılışındaki bilgidetay sınıfın bulunduğu div stilindeki linki değiştirerek arkaplanı değiştirmek mümkündür.

<div class="container-fluid coverbg bilgidetay" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/bg1.jpg);">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>kurumsal</h1>
<p>En güzel web sitesi sizi en iyi anlatan web sitesidir. İçerik açısından zengin ve kuvvetli, göz alıcı görseller içeren bir sayfa her zaman kullanıcının daha faza dikkatini çekecek ve kendinizi en iyi biçimde ifade etmenizi sağlayacaktır.</p>
</div>
</div>
<div class="row">
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/1.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/2.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/3.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/4.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/5.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/6.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/7.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/8.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/9.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/10.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/11.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay=".1s">
<a href="#">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/12.jpg)"></div>
</div>
<h5>Haber Örnek Başlığı</h5>
</a>
</div>
</div>
</div>
</div>

CSHTML - Kategorinin Altındaki Makaleleri Getir

Getirmek istediğiniz kategori numarasını aşağıda kırmızı ile işaretli yere yazarak o kategorinin başlığını, kısa açıklamasını ve içerisindeki 12 makaleyi sıra numarasına göre küçükten büyüğe getirebilirsiniz. Bu kod başlık uzunluklarından dolayı oluşabilecek kaymaları engellemek amacıyla her 4 nesnede 1 row oluştururarak bağımsız satırlar açacak şekilde yazılmıştır. Arka plan resmini panele bg1.jpg adında yüklemeliyiz.

@{
MakaleKategori componeKategori = Partial.Kategori(1, dilk);
IEnumerable<Makale> componeMakaleler = Partial.MakalelerID(componeKategori.MakaleKategoriID, 0, 12, "", false);
int componeMakalesay = componeMakaleler.Count();
int componeDongusay = Convert.ToInt32(Math.Ceiling(componeMakalesay / Convert.ToDouble(4)));
double componeWowtime = 0.1;
<div class="container-fluid coverbg bilgidetay" style="background-image: url(/Resim/Upload/bg1.jpg);">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>@componeKategori.MakaleKategoriAdi.HtmlEncode()</h1>
@MvcHtmlString.Create(componeKategori.MakaleKategoriAciklama)
</div>
</div>
@for (int componen = 0; componen < componeDongusay; componen++)
{
<div class="row">
@foreach (Makale componeMakale in componeMakaleler.Skip(componen * 4).Take(4))
{
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay="@(componeWowtime.ToString().Replace(",", "."))s">
<a href="@Partial.MakaleLink(componeMakale.MakaleID)">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(@componeMakale.MakaleKucukResim)"></div>
</div>
<h5>@componeMakale.MakaleBaslik.HtmlEncode()</h5>
</a>
</div>
componeWowtime = componeWowtime + 0.2;
}
</div>
}
</div>
</div>
}

CSHTML - Kategorinin Alt Kategorileri Getir

Getirmek istediğiniz kategori numarasını aşağıda kırmızı ile işaretli yere yazarak o kategorinin başlığını, kısa açıklamasını ve içerisindeki 12 alt kategoriyi sıra numarasına göre küçükten büyüğe getirebilirsiniz. Bu kod başlık uzunluklarından dolayı oluşabilecek kaymaları engellemek amacıyla her 4 nesnede 1 row oluştururarak bağımsız satırlar açacak şekilde yazılmıştır. Arka plan resmini panele bg1.jpg adında yüklemeliyiz.

@{
MakaleKategori componeKategori = Partial.Kategori(1, dilk);
IEnumerable<MakaleKategori> componeAltkategoriler = Partial.KategorilerAltID(componeKategori.MakaleKategoriID);
int componeAltkategorisay = componeAltkategoriler.Count();
int componeAltDongusay = Convert.ToInt32(Math.Ceiling(componeAltkategorisay / Convert.ToDouble(4)));
double componeAltWowtime = 0.1;
<div class="container-fluid coverbg bilgidetay" style="background-image: url(/Resim/Upload/bg1.jpg);">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>@componeKategori.MakaleKategoriAdi.HtmlEncode()</h1>
@MvcHtmlString.Create(componeKategori.MakaleKategoriAciklama)
</div>
</div>
@for (int componen = 0; componen < componeAltDongusay; componen++)
{
<div class="row">
@foreach (MakaleKategori componeAltkategori in componeAltkategoriler.Skip(componen * 4).Take(4))
{
<div class="col-sm-3 haberitem wow fadeIn animated" data-wow-duration=".5s" data-wow-delay="@(componeAltWowtime.ToString().Replace(",", "."))s">
<a href="@Partial.KategoriLink(componeAltkategori.MakaleKategoriID)">
<div class="haberframe">
<div class="habergorsel" style="background-image: url(/Resim/MakaleKategori/@(componeAltkategori.MakaleKategoriID))"></div>
</div>
<h5>@componeAltkategori.MakaleKategoriAdi.HtmlEncode()</h5>
</a>
</div>
componeAltWowtime = componeAltWowtime + 0.2;
}
</div>
}
</div>
</div>
}