FikirBulutu
frturan, Cuma, 28/08/2009 - 00:45 tarihinde.Site Url'si: http://www.fikirbulutu.com
Kategori: Blog
Versiyon: Drupal 6.x
Hani bazen olur ya: Şöyle bir şey olsa ya dersiniz.
İşte öyle şeyleri toplamaya çalıştığım bir blog FikirBulutu.
Aklıma gelen, genellikle tasarım ağırlıklı fikirleri paylaşıyorum.
Tabi Fikrini Paylaş sayfasıyla her türlü fikri dinlemeyi de seviyorum.
- Yeni yorum ekle
- 1040 kez okundu
Görsel olarak güzel, kullanışlı ve sade olmuş. Tema hazırlardan değil sanırım. Fikir de güzel. Tebrikler...
Evet tema da güzel, içerik te. Sanırım bi yarım saat sitenizde eğlendim.
Böyle Drupal siteleri çıkınca ben seviniyorum. Ülkemizin insanlarının en azından bir kısmı akıllı düşünebiliyor diyorum. (Joomla'ya atfen) Tebrik ediyorum.
Gercekten de hos ve sade bir site olmus.Ben haber sitemde ana sayfada ddbblock ile manset haber sistemi yaptim.Bunun disinda sitemde fotonews diye bir bolum olusturmak istiyorum.Bunun icin de Content Slider i kullandim.Siz sitenizde kayan fotograflari gostermek icin hangi eklentiyi kullandiniz?Boyle bir seyi cok aradim ama bulamadim.TRT nin ana sayfasinda da ana haberler o tarzda gosteriliyor ve cok hosuma gidiyor
Eklenti kullanmadan yaptım.
Views ile son yazılan 7 yazıyı html-listesi halinde oraya koydum, daha sonra jCarousel'i kullanarak bu listeyi kayan resimlere çevirdim.
Views i orta duzeyde kullaniyorum.Icerikleri cesitli tarzlarda gosterebliyorum.J Carousel kullanarak listeyi kayan resimlere ceviremedim.Nasil yaptiginizi sevgili Onur un DDBslideshow dersinde anlattigi tarzda anlatamaz misiniz?
Öncelikle CCk ve ImageField eklentileri ile her yazıya resim ekleyebilme özelliğini ekledim.
Adım1
Daha sonra views'ten Fields kısmı için: Düğüm: Başlık ve İçerik: Thumnailleri göstermesini istedim.
Bunları bir blok halinde göstermesini istedim: Sol taraftan "Block" seçip, "Add Display" butonuna basarak.
İçerik: Thumnail'in ayarlarından "Exclude from display" seçtim.
Düğüm: Başlık'ın ayarlarında ise "Link this field to its node" ve "Rewrite the output of this field" seçtim.
Resimde gözüken rewrite şeklini de CSS ile şekillendirirken yardımcı olsun diye böyle yaptım.
Adım2
Daha sonra bu oluşturduğum bu block'u, temama ekleyebilmem için; Carouselin gözükeceği yere bir block oluşturdum.
page.tpl.php 'de Carousel'in olmasını istediğim yere:
<?php print $carousel_area ?>
</div>
temamınadı.info 'ya:
regions[carousel_area] = Carousel
bu şekilde eklemeler yapıp, "Önbellekteki verileri sil"dikten sonra "Bloklar"sayfarındaki "carousel_area" adlı block'a, views'te oluştusuğum blocku koydum.
Şimdi anasayfama gidince, views'ten gelen son 7 yazı, resimler ve yanında yazı adlarıyla beraber "html-list" halinde duruyordu.
Adım3
jCarousel'i etkinleştirmek için:
page.tpl.php 'de 'ın içine:
<script type="text/javascript" src="/themes/bulutlu/javascripts/jcarousel.js"></script>,
<script type="text/javascript">
$("#block-views-Son7-block_1 .item-list").jCarouselLite({
auto: 3200,
speed: 500,
visible: 4
});
</script>
bu şekilde ekledim. Yalnız buradaki "#block-views-Son7-block_1" vies'ten oluşturduğum block'un, anasayfaya (daha önce html-list halinde gözüktüğünü söylemiştim) sağtuşla tıklayıp kaynak kodunu göster diyerek baktığım kaynak kodunda gözüken ID ismi.
Adım4
Artık jQuery ve jCarousel etkinleşti ve şekillendirme kaldı.
style.css dosyamı açtım ve:
#carouselArea .block { height:240px; overflow: hidden;}
.view-content { padding:0px; }
#carouselArea .view-content {}
#block-views-Son7-block_1 div.item-list { padding:0px; margin:0 auto; width:960px; overflow: hidden;}
#block-views-Son7-block_1 div.item-list ul { width:960px; overflow: hidden;}
#block-views-Son7-block_1 .item-list ul li { list-style-type:none; padding:0px; margin: 0 5px; width:223px; height:211px; border: 1px solid #bdc3c5; background:#dceaee;}
#block-views-Son7-block_1 .item-list ul li:hover {background:#b9dfba;}
#block-views-Son7-block_1 .item-list { text-align:left; }
#block-views-Son7-block_1 .item-list ul li a { text-align:left; font-family:"Trebuchet MS", Sans-Serif; color:#0a4374; font-size:18px; letter-spacing:-1px;}
#block-views-Son7-block_1 .item-list ul li a:hover{ text-decoration: none; }
#block-views-Son7-block_1 .item-list ul li a img { float:left; display:block; border-bottom: 1px solid #bbb; width:223px; height:165px;}
#block-views-Son7-block_1 .item-list ul li a span { float:left; width:213px; padding:13px 0px 15px 10px; display: block; font-weight:normal;}
.views-row-even {margin:0px; padding:0px; }
.views-admin-links, .views-hide, #carouselArea h2 {display:none;}
şeklinde biçimlendirme girdim. Sen de kendi istediğin gibi girersin.
Bitirken
Evet yaptıklarım bunlar. Belki gereksiz yere kendimi yormuş olabilirim, daha kolay bir yolu vardır. Ama bildiğim yol buydu ve bu şekilde yaptım. Umarım anlaşılır olmuştur ve işine yarar.
Oncelikle zaman ayirip boyle bir anlatima girdigin icin cok tesekkur ederim.Bana biraz karmasik geldi cunku kod bilgim yok.DDBslideshow u da hazir dosyalari kullanarak yapmistim.
Simdi, benim temamda Carousel i gosterecegim yer oldugundan yeni bir block olusturmama gerek yok.Ilk adim olarak Views le gostercegim icerikler icin baslik ve image attackla ekledigim fotograflari html listesi halinde gosterip ve bu blogu Son7-block_1 olarak adlandirdiktan sonra adim 3 ve adim 4 te verdigin kodlari aynen ilgili yerlere eklesem acaba olur mu?
Adım3'te yazdığım "#block-views-Son7-block_1 .item-list" alanının içerisinde < li> ler bulunursa, jCarousel bunu algılar ve işler.
Mesela benim kodum şu şekildeydi:
<div class="block block-views" id="block-views-son7-block_1">
...
<div class="view-content">
<div class="item-list">
<ul>
<li class="views-row views-row-1 views-row-odd views-row-first">
..İçerik 1
</li>
<li class="views-row views-row-1 views-row-odd views-row-first">
..İçerik 2
</li>
...
</ul>
</div>
</div>
</div>
</div>
(Adım3 scriptinde belirttiğim yerleri yukarıda görebilirsin İsimleri "#block-views-Son7-block_1" ve ".item-list".
Adım3'te arka arkaya yazmış olmam: "#block-views-Son7-block_1" 'un içindeki ".item-list" 'e bak ve bu alanın içindeki html-listi kaydır anlamında. Sen de sadece tek bir şeyin içinde de olabilir, bu durumda sadece onu yazarsın.)
Olmadi.Yazdigim gibi views le son7 adiyla bir block olusturdum.Image ve basliklari html listesi halinde gosteriyorum.Su durumda block yerinde fotogrfalar va basliklari alt alta gorunuyoror.Jcarousel devreye girmedi.Adim3 ve 4 te yazdigin kodlari hic degistirmeden ilgili yerlere ekledim.Unutmadan onbellelkteki verileri de temizledim.Son yazdigin kodlar da nerden cikti?
Son yazdığım kodlar kendi siteme ait: Adım3'te niye "#block-views-Son7-block_1 .item-list" yazdığımı göstermek içindi.
<script type="text/javascript" src="/themes/bulutlu/javascripts/jquery.js"></script>
<script type="text/javascript" src="/themes/bulutlu/javascripts/jcarousel.js"></script>,
<script type="text/javascript">
$("#block-views-Son7-block_1 .item-list").jCarouselLite({
auto: 3200,
speed: 500,
visible: 4
});
</script>
Niye devreye girmediğini bilemiyorum. Ben de acemiyim, bu ilk projem.
Yalnız şunu sorayım belki orada olabilir sorun. Yukarıdaki kodda (Adım3) "/themes/bulutlu/javascripts/jquery.js" ve "/themes/bulutlu/javascripts/jcarousel.js" şeklinde gözüken satırları kendi sitene göre ayarlamanda bir sorun olabilir.
jquery.js ve jcarousel.js olması gereken yerde değil veya farklı isim altında kayıtlı olabilirler.
(Benim temamın adı bulutlu, onun içinde de javascripts diye bir klasör açıp, script dosyalarını oraya koydum.
Bu nedenle de "/themes/bulutlu/javascripts/jcarousel.js" şeklinde yazdım.)
Ondan kaynakli olabilir!Ugrastim ama olmadi.Benim tema ve modullerim iki ayri dosya olarak sites/all klasorunun icinde.Jcarusel ve diger modullerde modul klasorunun icinde.Tema olarak Newsflash temasini kullaniyorum.Bu durumda yukarida belittigin satirlari nasil yazmaliyim?
Ayrica ben views ten add yapip isim olarak son7 yazdim.Daha sonra image ve basliklari fieldsten ekledikten sonra vs block adi olarak Son7-block_1 yazdim.Verdigin kodlari da aynen kopyalayip ekledim.Olsaydi iyi olurdu.Hazir olan sitem icin sadece bu degisikligi yapmak isterdim
Bu tarzda cozum bulamya calismak zor olabilir.3 asamada soyle cozebilir miyiz?1.adim olarak bana image attack ve node title lerin fields ve filtre olarak story in secildigi stil (html list,items to display 7 vs seklinde nasil yaptiysan) bir views olusturup bunu export etsen ve ben de bunu import etsem 2. ve 3. adim olarak ise page.tpl ve stil.css kodlarini yazsan ve bunlari yapistirsam daha kolay olmaz mi?
Umarım yardımcı olur:
Views Export:
$view->name = 'son7';
$view->description = 'son7';
$view->tag = '';
$view->view_php = '';
$view->base_table = 'node';
$view->is_cacheable = FALSE;
$view->api_version = 2;
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
$handler = $view->new_display('default', 'Defaults', 'default');
$handler->override_option('fields', array(
'field_thumbr_fid' => array(
'label' => '',
'alter' => array(
'alter_text' => 0,
'text' => '<img src="[field_thumbr_fid]" alt="" />',
'make_link' => 0,
'path' => '',
'link_class' => '',
'alt' => 'resim',
'prefix' => '',
'suffix' => '',
'help' => '',
'trim' => 0,
'max_length' => '',
'word_boundary' => 0,
'ellipsis' => 0,
'strip_tags' => 1,
'html' => 0,
),
'link_to_node' => 0,
'label_type' => 'none',
'format' => 'image_plain',
'multiple' => array(
'group' => TRUE,
'multiple_number' => '',
'multiple_from' => '',
'multiple_reversed' => FALSE,
),
'exclude' => 1,
'id' => 'field_thumbr_fid',
'table' => 'node_data_field_thumbr',
'field' => 'field_thumbr_fid',
'override' => array(
'button' => 'Override',
),
'relationship' => 'none',
),
'title' => array(
'label' => '',
'alter' => array(
'alter_text' => 1,
'text' => '[field_thumbr_fid]<span class="title">[title]</span>',
'make_link' => 0,
'path' => '',
'link_class' => '',
'alt' => '',
'prefix' => '',
'suffix' => '',
'help' => '',
'trim' => 0,
'max_length' => '',
'word_boundary' => 1,
'ellipsis' => 1,
'strip_tags' => 0,
'html' => 0,
),
'link_to_node' => 1,
'exclude' => 0,
'id' => 'title',
'table' => 'node',
'field' => 'title',
'relationship' => 'none',
'override' => array(
'button' => 'Override',
),
),
));
$handler->override_option('sorts', array(
'created' => array(
'order' => 'DESC',
'granularity' => 'day',
'id' => 'created',
'table' => 'node',
'field' => 'created',
'relationship' => 'none',
),
));
$handler->override_option('filters', array(
'type' => array(
'operator' => 'in',
'value' => array(
'makale' => 'makale',
),
'group' => '0',
'exposed' => FALSE,
'expose' => array(
'operator' => FALSE,
'label' => '',
),
'id' => 'type',
'table' => 'node',
'field' => 'type',
'relationship' => 'none',
),
'status' => array(
'operator' => '=',
'value' => '1',
'group' => '0',
'exposed' => FALSE,
'expose' => array(
'operator' => FALSE,
'label' => '',
),
'id' => 'status',
'table' => 'node',
'field' => 'status',
'relationship' => 'none',
),
));
$handler->override_option('access', array(
'type' => 'none',
));
$handler->override_option('cache', array(
'type' => 'none',
));
$handler->override_option('items_per_page', 7);
$handler->override_option('style_plugin', 'list');
$handler->override_option('row_options', array(
'inline' => array(
'field_thumbr_fid' => 'field_thumbr_fid',
'title' => 'title',
),
'separator' => '',
));
$handler = $view->new_display('block', 'Blok', 'block_1');
$handler->override_option('block_description', '');
$handler->override_option('block_caching', -1);
page.tpl.php:
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>">
<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript" src="/javascripts/jcarousel.js"></script>
<script type="text/javascript">
$("#block-views-son7-block_1 .item-list").jCarouselLite({
auto: 2500,
speed: 500,
visible: 4
});
</script>
</head>
<body>
<div id="carouselArea">
<?php print $carousel_area ?>
</div>
...
Asıl İçerik
...
<?php print $closure ?>
</body>
</html>
page.tpl.php içerisindeki blocku içeren bölüm bu:
views ile oluşturduğum blocku, blocklar sayfasından "carousel_area" isimli alana koyuyorum.
<?php print $carousel_area ?>
</div>
style.css:
#carouselArea .block { height:240px; overflow: hidden;}
.view-content { padding:0px; }
#carouselArea .view-content {}
#block-views-Son7-block_1 div.item-list { padding:0px; margin:0 auto; width:960px; overflow: hidden;}
#block-views-Son7-block_1 div.item-list ul { width:960px; overflow: hidden;}
#block-views-Son7-block_1 .item-list ul li { list-style-type:none; padding:0px; margin: 0 5px; width:223px; height:211px; border: 1px solid #bdc3c5; background:#dceaee;}
#block-views-Son7-block_1 .item-list ul li:hover {background:#b9dfba;}
#block-views-Son7-block_1 .item-list { text-align:left; }
#block-views-Son7-block_1 .item-list ul li a { text-align:left; font-family:"Trebuchet MS", Sans-Serif; color:#0a4374; font-size:18px; letter-spacing:-1px;}
#block-views-Son7-block_1 .item-list ul li a:hover{ text-decoration: none; }
#block-views-Son7-block_1 .item-list ul li a img { float:left; display:block; border-bottom: 1px solid #bbb; width:223px; height:165px;}
#block-views-Son7-block_1 .item-list ul li a span { float:left; width:213px; padding:13px 0px 15px 10px; display: block; font-weight:normal;}
.views-row-even {margin:0px; padding:0px; }
.views-admin-links, .views-hide, #carouselArea h2 {display:none;}
On numara bir site olmuş, içerik olarak gerçekten çok mükemmel. Böyle güzel çalışmalar görme umuduyla.
gerçekten süper anlatmışsın, aynısını bende yaptım siteme, teşekkür ediyorum
Sonra hosting ile ilgili problemler cikinca ugrasnaya biraz ara vermistim.Onu yapmak icin tekrar ugrasacagim ama
sade tasarim ve icerikler, siteyi kullanilir ve merak edilir hale getirmis, guncellemelerde biraz sikinti var sanirim.
Ayrica carousel ile ilgili anlatimiz icinde tesekkurler, Drupal' in ne kadar esnek bir yapi oldugunu ispat eder bir yaklasim bicimi gercekten...
tekrar elinize saglik
kolay gelsin.
Biliyorsun ki sitendeki carousel gorunumu cok hosuma gitmisti.Epeyi ugrasmistim bunun icin ama yapamamistim.Sonunda Jcarousel for Views eklentisiyle bir carousel gorunumu olusturdum.www.turkishgreeknews.org adresinden bakabilirsin.Bu gorunumu sendeki gorunume benzer bir gorunume donusturebilir miyim?
Keşke burada parça parça anlatmak yerine "views ile döner başlık" adında bir ders yazmış olsaydınız. Böylece hem dersler çoğalacak ve daha çabuk bulunacaktı. Hemde site için yapılan yorumların dışına çıkılmayacaktı...
Sistemi çok güzel yaptım. Ben bunu haber & Duyuru yazıların ana sayfada blok şeklinde gösteriminde kullanacağım. Şu an haliyle çok güzel oldu.
Yalnız bir sorunum olacaktı. 223 x 165 px. resim yüklemem gerekiyor. Ben hangi boyutta yüklersem yükleyeyim bunu otomatik olarak bu boyutlara getirip gösterimini yapabilir miyiz ?
Bunlar yüklü. Ancak uğraşlarımı rağmen yapamadım. :s
-image
-imageapi
-imagecache
-imagefield
Normal resim yüklediğimde blok görüntüsü bozuluyor... Yardımlarınız için teşekkürler.