(1) Gerekli Modüller (Sürüm: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) Modülleri Takın
Drupal7'de yönetici bölümünden modüller yükleyebilirsiniz, ancak yine de bu yeni özelliğin bir anlamı olmadığını hissediyorum, çünkü Druapl sitesindeki modül bağlantısını aramamız ve ardından yapıştırmayı yönetici modülü kurulum alanına kopyalamamız gerekiyor. çılgın. Eğer wordpress gibi küçük bir arama şöleni gibi bir şey yapmış olsaydı çok iyi olurdu. Her neyse, sadece eski şekilde indirip istall edeceğim (hala bu eski yolu tavsiye ederim).
Drupal sitesinden tüm modülleri indirin ve sitenizin / sites / all / modülleri dizinine kurun. Http://www.yoursitename.com/node#overlay=admin/modules adresine gidin ve bu modülleri aşağıdaki gibi etkinleştirin;
(1) Görünümler (2) Görünümler Kullanıcı Arabirimi (3) Görünümler Slayt Gösterisi (4) Görünümler Slayt Gösterisi: Döngü (5) Kaos araçları (6) Bağlantı (7) Kütüphaneler (8) Belirteç (İsteğe bağlı) (3) Görüntü Önbelleği Oluştur
Drupal7'de imagecache çekirdek modülün bir parçasıdır ve Görüntü stilleri olarak adlandırılır. Şimdi buradan biri tam boyutlu kaydırıcı görüntüsü diğeri de küçük resim görüntüsü için iki görüntü önbelleği oluşturalım. Bu öğreticide tam boyutlu kaydırıcı görüntü için 935x293 (piksel) boyut ve küçük resim için 210x100 (piksel) boyut kullanıyorum. Not: csn ertelenecek bu yapılandırmalar ihtiyaçlarınıza bağlıdır.
- Tam boyutlu Slider görüntü ayarları
Http://www.yoursitename.com/node#overlay=admin/config/media/image-styles adresine gidin ve yeni stil ekle bağlantısını tıklayın (1) Görüntü stili adı verin ve yeni stil oluştur düğmesini tıklayın (2) ) Bir sonraki yapılandırma ekranında istediğiniz yeni stili seçin ve ardından ekle düğmesine tıklayın (Bu öğreticide yeniden boyutlandırma stili seçiyorum) (3) Bir sonraki ekranda genişliği ve yüksekliği ayarlayın ve efekt ekle düğmesine tıklayın. (Ayarlar seçtiğiniz stile bağlı olarak değişebilir). Genişliği 935 ve yüksekliği 293 piksel olarak ayarladım.
Aynı işlemi küçük resim için de yapın. (küçük resim boyutu için genişliği 210, yüksekliği 100 piksel olarak ayarlıyorum.) (4) Yeni İçerik Türü Oluştur
Yeni bir içerik türü oluşturalım, Gösterge tablosu menü çubuğundan Yapı'yı ve ardından içerik türlerini tıklayın, ardından yeni içerik türü ekle bağlantısını tıklayın.
(1) İnsan tarafından okunabilir bir ad verin, Özellikli Kaydırıcı olarak adlandırdım (machiine adı, insan tarafından okunabilir ada göre otomatik olarak oluşturulacaktır) (2) Kısa ve ilgili bir açıklama verin (3) Gönderme formu ayarları, varsayılan ayarlar (4) Yayınlama seçenekleri, yalnızca yayınladım (diğer tüm ayarlar işaretlenmemiş) (5) Görüntü ayarları, Yazarın ve tarih bilgilerinin işaretini kaldırdım. (6) Yorum ayarları, Gizli (devre dışı) ayarladım (7) Menü ayarları, Varsayılan ayarlar olarak bırakıyorum. (8) Kaydet ve alan ekle düğmesini tıklayın (5) Yeni Alanlar Oluşturun
Burada bu örnekte sadece iki dosya oluşturuyorum ve bunlar görüntü alanı ve bağlantı alanı. Kaydırıcı imajımızı yüklemek için görüntü alanını ve kaydırıcımızın bağlanmasını istediğimiz özel bir bağlantı oluşturmak için bağlantı alanını kullanacağız.
Görüntü Alanı Ayarları
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
Bu alanı gerektiği gibi ayarladım, bu görüntülerin diğer görüntülerden düzenli olarak düzenlenebilmesi için kaydırıcı resmi adı verilen bir dosya yöneticisi adı ekledim. Maksimum yükleme boyutunu ve çözünürlüğünü burada ayarlayabilirsiniz, alt ve başlık alanını etkinleştirdim ve son olarak Ayarları kaydet düğmesini tıklayın.
Aynı yöntemi kullanarak bağlantı alanını da oluşturun.
Bağlantı Alanı Ayarları (1) Etiket: Slider Bağlantısı (2) Alan: slider_link (3) Alan türü: bağlantı (4) Widget (form öğesi): bağlantı (5) Kaydet düğmesini tıklatın, Bağlantı alanı yapılandırmaları her şeyi varsayılan ayarlara bırakır . Alanı aşağıda gösterildiği gibi yeniden düzenledim; Başlık alanı Görüntü alanı Bağlantı alanı Gövde alanı (gerekli değilse bu alanı da kaldırabilirsiniz) Ekranı Yönet Ekranı yönet sekmesinde, alanın çıkışının nasıl görüntüleneceğini belirleyebilirsiniz. Bağlantı alanını gizli olarak ayarladım ve resim etiketini de gizli olarak ayarladım Drupal7: alanları yönet (6) Özellik Kaydırıcı İçeriği Oluştur
Bu eğitim için dört özellikli kaydırıcı içeriği oluşturdum.
(1) İçerik ekle bağlantısını tıklayın (2) Öne Çıkan Slider içeriği oluşturun (3) Uygun bir başlık adı verin (4) Slider resmi yükleyin (5) Alternatif ve başlık alanı adları verin (6) İstediğiniz yere bir bağlantı başlığı ve URL verin bağlanacak kaydırıcı (7) Eğer SEO dostu bir URL takma ad verebilir isterseniz yol alanı dışında tüm diğer ayarları varsayılan olarak bırakın. (8) İçeriği kaydedin.
Aynı şekilde daha fazla Öne Çıkan Slider içeriği oluştur (Dört içerik oluşturdum) (7) Yeni Görünüm Oluştur
Şimdi yeni Slayt Gösterisi görünümümüzü oluşturma zamanı. Gösterge Tablosu menüsünden Yapı'yı ve ardından Görünümler'i tıklayın.
(1) Yeni görünüm ekle bağlantısını tıklayın (2) Görünüm adı verin, Özellikli Kaydırıcı olarak adlandırdım (machiine adı otomatik olarak oluşturulacak) (3) Uygun bir görünüm açıklaması verin (4) Özellikli Kaydırıcı türünü göster (İçeriğiniz tür adı). (5) Bir Sayfa Oluştur seçeneğinin işaretini kaldırın ve Blok oluştur'u işaretleyin (6) Blok başlığını yazın ve sayfa 5'teki "alanlar" öğelerinin "Slayt gösterisi" olarak görüntüleme biçimini seçin (görüntülemek istediğiniz öğe sayısını girebilirsiniz) (7 ) "Devam ve düzenle" düğmesini tıklayın Alan Ayarları Önce Bağlantı alanını ekleyelim (her şeyin düzgün çalışması için bağlantı ilk alan olmalıdır), bu nedenle ekle simgesine tıklayın ve Gruplar'dan İçerik'i seçin İçerik Ekle: Bağlantı, Tıklayın Bir sonraki yapılandırma penceresindeki "Ekle ve yapılandır düğmesi" "Etiket oluştur" un işaretini kaldırın. "Kontrol" Ekrandan hariç tut. "Uygula düğmesini" tıklayın
Şimdi resim alanı ekleyelim, bu yüzden ekle simgesini tıklayın ve Gruplar'dan içerik ekle filtresini seçin İçerik Ekle: resim alanı (Not: yalnızca bu kaydırıcı içerik türü için oluşturduğumuz görüntü alanını seçtiğinizden emin olun.) "Ekle ve yapılandır düğmesine dokunun. "Bir etiket oluştur" un işaretini kaldırın.
Biçimlendirici: Görüntü (Colorbox veya lightbox yüklediyseniz, bunları burada seçebilirsiniz!) Görüntü Stili: Tam ekran (Yukarıdaki adımda oluşturduğunuz görüntü önbelleğini seçin) Görüntüyü bağla: Hiçbir şey Stil Ayarları: Varsayılan ayarları bırak Sonuç davranışı yok: Bırak varsayılan ayarlar Sonuçları Yeniden Yaz: Bu alanı bir bağlantı olarak gönder seçeneğini işaretleyin Bağlantı yolu: [view_node] (Not: Kaydırma çubuğunu biraz kaydırın ve Core Token modülü tarafından oluşturulan değiştirme modellerini görebilirsiniz (bağlantı alanını ilk olarak ayarlamadıysanız) bağlantı alanı seçeneğini burada göremezsiniz) yalnızca kopyala [view_node] sonra yukarı kaydırın ve bağlantı yolu alanına yapıştırın.) "Uygula düğmesini" tıklayın
Son olarak, küçük resim için bir alana daha ihtiyacımız var, bu yüzden ekle simgesine tıklayalım ve filtrelerden Gruplar İçerik Ekle İçerik: görüntü alanını seçelim (Not: yalnızca bu kaydırıcı içerik türü için oluşturduğumuz görüntü alanını seçtiğinizden emin olun.) Bir sonraki yapılandırma penceresinde "Ekle ve yapılandır düğmesi" ni tıklayın "Etiket oluştur" un işaretini kaldırın ve EKRANDAN KAPSAM DIŞI KONTROL EDİN Biçimlendirici: Görüntü (Colorbox veya ışık kutusu yüklediyseniz, bunları burada seçebilirsiniz!) Resim Stili: Küçük resim (Imagecache'i seçin Yukarıdaki adımda oluşturdunuz) Görüntüyü bağla: Hiçbir Şey Stil Ayarları: Varsayılan ayarları bırak Sonuç davranışı yok: Varsayılan ayarları bırak Sonuçları yeniden yaz: Bu alanı bir bağlantı olarak çıkar Bağlantı yolu: [view_node] (Not: Kaydırma çubuğunu biraz Core Token modülü tarafından oluşturulan değiştirme modellerini görebilirsiniz (eğert Bağlantı alanını önce bağlantı alanı seçeneğini göremiyoruz olarak ayarlayın) yalnızca kopyala [view_node] sonra yukarı kaydırın ve bağlantı yolu alanına yapıştırın.) "Uygula düğmesini" tıklayın
Görünüm Filtreler Ayarları
Görünümlerde3, içerik türünü ve diğer ayarları seçerken filtreler başlangıçta oluşturulur! Ek dosyalamaya ihtiyacınız varsa buradan oluşturabilirsiniz!
Görünüm Stili Ayarları
Slayt Gösterisini Biçimlendir | yerleşimler ve aşağıdaki gibi ayarlanan bir sonraki yapılandırma penceresinde; (1) Liste türü: Sırasız liste (2) Sarıcı sınıfı: Varsayılan ayarları bırak (3) Stil> Cilt: deafult (4) Slaytlar> Slayt gösterisi türü: döngü (5) Çevrim seçenekleri jQuery döngüsü eklentisini indirmeniz ve jquery'yi kopyalamanız gerekir. cycle.all.min.js sitesine sites / all / library / jquery.cycle Eklentiyi http://malsup.com/jquery/cycle adresinde bulabilirsiniz .
İNGİLİZCE İNGİLİZCE Sitede / tüm dizininde "kütüphaneler" adlı bir klasör oluşturun ve bu dizinde "jquery.cycle" adlı başka bir klasör oluşturun ve son olarak yalnızca "jquery.cycle.all.min.js" dosyasını kopyalayıp yapıştırın. bu dizin.
(6) Transittion: Fade (7) Eylem: fareyle duraklatma (8) Internet Explorer Tweaks: varsayılan (9) Widget'lar: Üst ve Alt seçeneklerinden birini veya her ikisini de seçebilirsiniz (burada alt kısmı seçiyorum ve aşağıdaki gibi ilerleme ayarları;) (10) Alt Widget'lar> Çağrı Cihazı> Çağrı cihazı tipi: Alanlar (11) Çağrı cihazı alanı: İçerik: Görüntü (Not: başparmak için eklediğimiz sonuncusu, her iki alan aynı şekilde adlandırılacağı için hata yapma.) (12) Slaytı Etkinleştir ve Çağrı Cihazı Üzerinde Duraklatma: işaretli, kontroller ve sürgü sayacı işaretli değil. (13) Uygula düğmesine tıklayın.
Alan Ayarlarını Göster'i Biçimlendir
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) Özel Bölge Oluşturma (isteğe bağlı adım)
(1) Tema klasörünüzde temanızın_adı.info dosyasını açın ve aşağıda gösterilenler gibi yeni bir bölge ekleyin; areas [featured_slider] = Sunulan Slider ve .info dosyasını kaydedin. (2) Temalar page.tpl.php dosyanızı açın ve bu kodu slaydınızın aşağıda gösterildiği gibi gösterilmesini istediğiniz yere ekleyin;
Varsayılan page.tpl.php şablonunda herhangi bir değişiklik yapmanıza gerek kalmaması için page - front.tpl.php gibi özel bir ön sayfa şablonu bile oluşturabilirsiniz. [9] Bloğu etkinleştirin ve yapılandırın
Şimdi bu blok, bloklar devre dışı bırakılmış alanında görünür olacaktır, bu yüzden Gösterge Tablosu menüsünden Yapı> Engelle'ye gidin ve bloğu bir tema varsayılan bölgesine veya oluşturduğumuz özel bölgeye (featured_slider) etkinleştirin. (Bölgeler, kullandığınız temaya göre değişir.)
Blok Yapılandırma Ayarları Bloğu etkinleştirdikten sonra bloğu yapılandırmak için bir bağlantı alırsınız, bu nedenle Yapılandır bağlantısını ve aşağıdaki gibi ayarlanan ayarları tıklayın;
(1) Blok başlığı (blobk başlığının görüntülenmesini istemiyorsanız sadece yazın) (2) Yine tüm temaya özel Bölge ayarlarını alırsınız. Görünürlük ayarlarında (3) Sayfalar> Bloğu belirli bir sayfada göster: Yalnızca listelenen sayfalar'ı seçin ve bu bloğun yalnızca ön sayfada görüntülenmesini sağlayın. CSS THUMBNAILS INLINE'I GÖRÜNTÜLEME İPUÇLARI
Küçük resimleri satır içinde görüntülemek için bu CSS kodlarını tema stil sayfanıza ekleyin. .views-slayt gösterisi-kontroller-alt .views-slayt gösterisi-çağrı cihazı-alan-madde {float: left; kenar boşluğu: 20px 6px; } Gerekli ayarlamaları yapın.