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

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

w

Connecting to %s