SharePoint Haber Uygulaması #6 – Page Layouts

Merhabalar Arkadaşlar,
Bu yazımızda sizlere Page Layouts özelliğinden bahsedeceğim. Nedir bu Page Layouts? Yenilir mi, içilir mi?

Page Layouts içerik türlerimizin istediğimiz şekilde görüntülenmesinde yardımcı olan bir görüntüleme yöntemidir. Görüntülerken bildiğimiz html dilini kullanacağız. Daha iyi anlamanıza yardımcı olması için örneğimizi yapalım.
İlk olarak SP Designer ile portalimize bağlanıp navigasyon menüsünden Page Layouts bölümüne geçelim.
ContentTypes_29
Görselde gördüğünüz üzere New Page Layout butonuna basalım.
ContentTypes_30
Content Type bölümünden bir önceki makalelerimizde oluşturduğumuz HK grubunda yer  alan Haberler içerik türünü seçelim. URL olarak Haberler ismini verelim.
ContentTypes_31
Dosyayı advanced modda açalım.
ContentTypes_32
Eğer açık değilse View bölümünde yer alan Task Panes kısmından Toolbox ı seçelim.
ContentTypes_33
Toolbox ımız açılacak ve içerisinde kendi eklediğimiz sütunlar dahil ilgili content type a ait sütunları görüyoruz.
ContentTypes_34
Kod kısmında PlaceHolderMain content placeholder’ımızın içerisine 5 adet (kullanacağımız sütun sayısı kadar) li elementi içeren bir ul elementi oluşturalım. ul elementimizin daha iyi gözükmesi için varsayılan olarak gelen dotted liste tipini kaldıralım. Bu işlem için ul etiketinin içerisinde style=”list-syle:none;” css kodunu yazalım.
ContentTypes_35
Daha sonra görünme sırasına göre sağ tarafta yer alan toolbox’ımızın içerisindeki sütunları sürükle bırak yöntemi ile ilgili li elementlerinin içerisine yerleştirelim.
ContentTypes_36
Şu hali ile bir deneme yapalım ve sayfamızın nasıl göründüğüne ait bir fikir oluşsun.
Bunun için site içeriğinden Pages kitaplığına ve oradan Haberler klasörünü açalım. Files tabından New Document butonuna basıp Haberler içerik türümüzü seçelim.
PageLayouts_01
Karşımıza ilk çıkan ekranda Başlık, sayfa ismini ve Page Layout’u soran ekran geliyor.
Başlık kısmına haberimizin başlığını girmeliyiz. Page Layout olarak zaten Haberler deçili olarak gelecektir. Kaydet butonuna bastığımızda URL ismi otomatik olarak dolduğunu görebileceksiniz.
PageLayouts_02
Görebileceğiniz gibi Denem-Haber isminde bir dosyamız oluştu. İLgili dosyanın ismine tıkladığımızda dosyanın içeriğini görebileceğiz.
PageLayouts_03
Başlık olarak dosyanın ismini görebilirsiniz. Yine altta başlık için yazdığımız metin ve tarih gözükecektir.
PageLayouts_04
Sayfamızı düzenlemek için Page tabından Edit butonuna basalım.
PageLayouts_05
Karşımıza düzenleme formu çıkacaktır.
Başlık kısmımız zaten dolu geliyor. Comment kısmını hatırlarsanız Haber açıklaması için kullanacaktık. Oraya küfür eder gibi “Lorem ipsum dolor sit amet” yazabilirsiniz.
Haber detay kısmına geldiğinizde zengşn metin editörü aktif hale gelecektir. Haber detayını oraya yazabilirsiniz.
PageLayouts_06PageLayouts_07
Resim kısmına bilgisayardan resim yükleyebilirsiniz veya daha önce SharePoint resim kitaplığına yüklediğiniz bir resimi seçebilirsiniz.
PageLayouts_08
Bu kısımda gördüğünüz üzere sizlere resim konusunda birçok özellik sunuyor.
PageLayouts_09
Eğer yeni bir resim eklemek isterseniz resimde işaretli olan kısımda gözüken Yeni öğe ekle kısmını kullanabilirsiniz.
PageLayouts_10
PageLayouts_11
Resimi SharePoint’e yükledikten sonra sizlere isteğe bağlı olarak resim hakkında bazı bilgileri girmenizi isteyecektir. Kaydet deyip devam edebilirsiniz.
PageLayouts_12
Resmimiz kitaplığa eklendiğine göre haber sayfamıza da ekleyebiliriz.
PageLayouts_13
PageLayouts_14
Bu kısımda Image Renditions kısmı dikkatinizi çekebilir. Bu konuya bir sonraki makalemizde değineceğiz.
PageLayouts_15PageLayouts_16
İçerik ve resmimizi ekledikten sonra sayfamız aşağıdaki gibi olacaktır.
PageLayouts_17
Bu aşamadan sonra sayfamızı kaydedelim.
PageLayouts_19
Sayfanın en üstünde sarı bar içerisinde Check-In seçeneği gözükecektir. O bağlantıya tıklayarak kullanımı bırakabiliriz.
PageLayouts_20
Versiyonlama mantığından eğer girmek isterseniz sizlere bu işlem için açıklama alanı bırakılmıştır.
PageLayouts_21
Sayfayı check-in yaptıktan sonra Publish diyerek yayınlayabiliriz.
PageLayouts_22
Sayfamız ile işimiz bittikten sonra dikkat edeceğimiz husular şunlardır;

  1. Adres satırında Pages/Haberler/Deneme-Haber.aspx yazıyor
  2. Başlık URL ismi ile aynı
  3. Başlık tekrarlamış
  4. Hemen altında açıklama
  5. Tarih
  6. İçerik
  7. Resim

PageLayouts_23
Bu hali ile çok hoş bir görüntüye sahip olmadığını düşünüyorum.
PageLayouts_24
Biraz makyaj yaparak sayfamızı daha göze hitap eder bir hale getirelim.
PageLayouts_25
Haber Detay kısmında ilk kelimenin başına imleç ile tıklayalım.
PageLayouts_26
Açılan Zengin Metin Editörü tablarından Insert kısmından Picture’ı seçelim ve kaynak olarak SharePoint’den kısmını seçelim.
PageLayouts_27
 
PageLayouts_28
Bizden bir görsel seçmemizi istiyor ve bu haber için kullandığımız görseli tekrar seçelim.
PageLayouts_29
Haber Detay metnimizin en başına büyük bir görseli eklediğini görüyoruz.
PageLayouts_30
İlgili resmi seçelim ve açılan Image tabına geçelim. Orada aşağıdaki görselde de gördüğünüz üzere Pick Rendition’ı seçelim ve daha önce varsayılan olarak eklenmiş olan 468 x 220 boyutunu seçelim.
PageLayouts_31
Position kısmından Left olarak seçelim.
PageLayouts_32
Daha bir göze hitap eder hale geldi. Sizin aklınıza daha faklı bir mizanpaj gelirse onu da kullanabilirsiniz.
PageLayouts_33
Sırasıyla tekrar kaydedip, check-in ve publish yapalım.
PageLayouts_34
PageLayouts_35
Şimdi eski haline göre daha iyi ama halen eksikliklerimiz var.
PageLayouts_36
Mesela Haberin Başlığı orada URL deki gibi gözüküyor.
PageLayouts_37
Bunu düzeltmek için PageLayout ‘umuzu açalım ve işaretli alandaki kısmı silip bir sonraki görselde yer alan değişikliği gerçekleştirelim.
PageLayouts_38
PageLayouts_39
Sayfamızı kaydedip tekrar baktığımızda haber başlığımızın normal gözüktüğünü görebiliriz.
PageLayouts_40
Bitti mi? Hayır!
Şimdi yapacağımız şey ikinci kez yazan haber başlığını sayfa görüntülemeden kaldırıp sadece düzenleme kısmındayken görünmesini sağlayacağız.
Bu işlem için SharePoint’in EditModePanel yeteneğini kullanacağız. aşağıdaki görselde nasıl yapıldığını görebilirsiniz.
PageLayouts_41
Kodda değişikliği yaptıktan sonra sayfamızı kaydedip yenileyelim ve sonucu görelim.
PageLayouts_42
Evet görüntüleme kısmında sayfamızdan ikinci haber başlığı kalktı ve düzenleme modundayken görünür hale geldi.
Durmuyoruz düzenlemeye devam ediyoruz. Haber açıklama kısmı için görsellik adına h2 etiketini ekliyoruz.
PageLayouts_43
Haber Detay kısmının altında gözüken resim haberin içeriği görüntülenirken gözükmesine gerek yok ama anasayfada yer alacak slider için lazım. Bu yüzden bu field’ı da gizliyoruz.
PageLayouts_44
Page Layout’umuzun son hali aşağıdaki gibidir.
PageLayouts_45
Şimdi sayfamıza tekrar bakarsak gayet güzel olduğunu görebilirsiniz.
PageLayouts_46
Sayfamızı düzenleme moduna aldığımızda gizlediğimiz bütün alanların gözüktüğünü görebilirsiniz.
PageLayouts_47
PageLayouts_48
Bir sonraki makalemizde görüşmek üzere.

TOC

  1. SharePoint Haber Uygulaması #1 – Giriş
  2. SharePoint Haber Uygulaması #2 – Publishing Feature
  3. SharePoint Haber Uygulaması #3 – Custom Master Pages
  4. SharePoint Haber Uygulaması #4 – jQuery News Slider
  5. SharePoint Haber Uygulaması #5 – Content Types
  6. SharePoint Haber Uygulaması #6 – Page Layouts
  7. SharePoint Haber Uygulaması #7 – Image Renditions
  8. SharePoint Haber Uygulaması #8 – Rest Api ile Slider Hazırlama
  9. SharePoint Haber Uygulaması #9 – XSLT ile Slider Hazırlama

Comments ( 4 )

Leave a Comment

E-posta hesabınız yayımlanmayacak.