Flash header ekleme
cihan, Çrş, 17/03/2010 - 15:09 tarihinde.
Drupal sitelerimizde en zorlandığımız konu flash banner gibi düşünülsede en kolayı odur. Gerci bunu dinamik olarak yapan bir modül varmı bilmiyorum ben burada manuel olarak nasıl yaparız onu anlatacağım.
Aşamalı olarak anlatmak gerekirse:
- SWFobject javascript dosyasını sistemimize entegre edeceğiz.
- Tema dosyasında gerekli ayarlamaları yapacağız.
Şimdi sıra ile yapalım:
İlk olarak buradanSwfObject apisini indirip eklentiler bölümünden drupal sitemizde eklentiyi aktif ediyoruz.
Sıra tema dosyamızda değişiklik yapmaya geldi. Temamızı yüklediğimiz dizine ftp aracılığı ile ulaşarak page.tpl.php sayfasını bir editor yardımı ile açıyoruz.
Aşağıdakine benzer bir şekilde div tanımlaması olacaktır:
<div id="header"><div id="header-inner" class="clear-block">
....
....
</div></div>
....
....
</div></div>
Bu bölümün içersindeki kod satırlarını siliyoruz.
sildiğimiz satırlar drupalin temelindeki başlık, logo, açıklama metni, v.b. (belkide arama bölümüde dahildir) sitemizin üst header bölümünden kaldırmış oluyoruz.
Page.tpl.php dosyası içersindeki değiştireceğimiz kod satırları aşağıdakine benzer şekildedir:
<div id="header"><div id="header-inner" class="clear-block">
<?php if ($logo || $site_name || $site_slogan): ?>
<div id="logo-title">
<?php if ($logo): ?>
<div id="logo"><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a></div>
<?php endif; ?>
<?php if ($site_name): ?>
<div id='site-name'>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<strong><?php print $site_name; ?></strong>
</a>
</div>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!-- /#logo-title -->
<?php if ($search_box || $header_right): ?>
<div id="header-bar"><div id="header-bar-inner" class="region region-header-bar">
<?php if ($search_box): ?>
<h3 id="search-title"><?php print t('Search'); ?></h3>
<div id="search-box">
<?php print $search_box; ?>
</div> <!-- /#search-box -->
<?php endif; ?>
<?php if ($header_right): ?>
<div id="header-right-blocks" class="region region-header-right">
<?php print $header_right; ?>
</div> <!-- /#header-right-blocks -->
<?php endif; ?>
</div></div> <!-- /#header-bar-inner, /#header-bar -->
<?php endif; ?>
<?php endif; ?>
<?php if ($header): ?>
<div id="header-blocks" class="region region-header">
<?php print $header; ?>
</div> <!-- /#header-blocks -->
<?php endif; ?>
</div></div> <!-- /#header-inner, /#header -->
<?php if ($logo || $site_name || $site_slogan): ?>
<div id="logo-title">
<?php if ($logo): ?>
<div id="logo"><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a></div>
<?php endif; ?>
<?php if ($site_name): ?>
<div id='site-name'>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<strong><?php print $site_name; ?></strong>
</a>
</div>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!-- /#logo-title -->
<?php if ($search_box || $header_right): ?>
<div id="header-bar"><div id="header-bar-inner" class="region region-header-bar">
<?php if ($search_box): ?>
<h3 id="search-title"><?php print t('Search'); ?></h3>
<div id="search-box">
<?php print $search_box; ?>
</div> <!-- /#search-box -->
<?php endif; ?>
<?php if ($header_right): ?>
<div id="header-right-blocks" class="region region-header-right">
<?php print $header_right; ?>
</div> <!-- /#header-right-blocks -->
<?php endif; ?>
</div></div> <!-- /#header-bar-inner, /#header-bar -->
<?php endif; ?>
<?php endif; ?>
<?php if ($header): ?>
<div id="header-blocks" class="region region-header">
<?php print $header; ?>
</div> <!-- /#header-blocks -->
<?php endif; ?>
</div></div> <!-- /#header-inner, /#header -->
Yukarıdaki kod satırlarında:
<?php if ($logo || $site_name || $site_slogan): ?>
<div id="logo-title">
<?php if ($logo): ?>
<div id="logo"><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a></div>
<?php endif; ?>
<?php if ($site_name): ?>
<div id='site-name'>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<strong><?php print $site_name; ?></strong>
</a>
</div>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!-- /#logo-title -->
<?php if ($search_box || $header_right): ?>
<div id="header-bar"><div id="header-bar-inner" class="region region-header-bar">
<?php if ($search_box): ?>
<h3 id="search-title"><?php print t('Search'); ?></h3>
<div id="search-box">
<?php print $search_box; ?>
</div> <!-- /#search-box -->
<?php endif; ?>
<?php if ($header_right): ?>
<div id="header-right-blocks" class="region region-header-right">
<?php print $header_right; ?>
</div> <!-- /#header-right-blocks -->
<?php endif; ?>
</div></div> <!-- /#header-bar-inner, /#header-bar -->
<?php endif; ?>
<?php endif; ?>
<?php if ($header): ?>
<div id="header-blocks" class="region region-header">
<?php print $header; ?>
</div> <!-- /#header-blocks -->
<?php endif; ?>
<div id="logo-title">
<?php if ($logo): ?>
<div id="logo"><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a></div>
<?php endif; ?>
<?php if ($site_name): ?>
<div id='site-name'>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<strong><?php print $site_name; ?></strong>
</a>
</div>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!-- /#logo-title -->
<?php if ($search_box || $header_right): ?>
<div id="header-bar"><div id="header-bar-inner" class="region region-header-bar">
<?php if ($search_box): ?>
<h3 id="search-title"><?php print t('Search'); ?></h3>
<div id="search-box">
<?php print $search_box; ?>
</div> <!-- /#search-box -->
<?php endif; ?>
<?php if ($header_right): ?>
<div id="header-right-blocks" class="region region-header-right">
<?php print $header_right; ?>
</div> <!-- /#header-right-blocks -->
<?php endif; ?>
</div></div> <!-- /#header-bar-inner, /#header-bar -->
<?php endif; ?>
<?php endif; ?>
<?php if ($header): ?>
<div id="header-blocks" class="region region-header">
<?php print $header; ?>
</div> <!-- /#header-blocks -->
<?php endif; ?>
Kısımlarını siliyoruz.
<div id="header"><div id="header-inner" class="clear-block">
....
....
</div></div>
....
....
</div></div>
Görünümünü elde ediyoruz.
Flash dosyamızı drupale entegre ettiğimiz swfobject api formatı ile eklemek istersek:
<div id="header"><div id="header-inner" class="clear-block">
<?php
$url = "swf_dosyasının_adı.swf"; //path to flash file
$params = array('width' => 100, 'height' => 100 ); // Animasyonun boyutunu giriyoruz.
//Eklemek istediğimiz ses ve resim dosyaları yoksa bu bölümü silebilirsiniz.
$vars = array(
'file' => base_path() . path_to_theme() .'/files/song.mp3',
'image' => base_path() . path_to_theme() ./files/image.jpg,
);
//Eklenecek dosya yok ise buraya kadar silinir.
print theme("swfobject_api", $url, $params, $vars);
?>
</div></div>
<?php
$url = "swf_dosyasının_adı.swf"; //path to flash file
$params = array('width' => 100, 'height' => 100 ); // Animasyonun boyutunu giriyoruz.
//Eklemek istediğimiz ses ve resim dosyaları yoksa bu bölümü silebilirsiniz.
$vars = array(
'file' => base_path() . path_to_theme() .'/files/song.mp3',
'image' => base_path() . path_to_theme() ./files/image.jpg,
);
//Eklenecek dosya yok ise buraya kadar silinir.
print theme("swfobject_api", $url, $params, $vars);
?>
</div></div>
Bu şekilde eklemeyi başaramadı iseniz direk olarak html kodları ile ekleyebiliriz.
<div id="header"><div id="header-inner" class="clear-block">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="swf_dosya_adı.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf_dosya_adı.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div></div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="swf_dosya_adı.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf_dosya_adı.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div></div>
width="780" height="420" kısımlarını flash dosyanızın boyutları ile değiştirmeyi unutmayınız.
Sadece ana sayfada flash bannerımız ve diğer sayfalarda normal headerımız görünsün istersek:
<div id="header"><div id="header-inner" class="clear-block">
<?php if ($is_front): ?> // Veya <?php if ($page == 0): ?>
<?php
$url = "swf_dosyasının_adı.swf"; //path to flash file
$params = array('width' => 100, 'height' => 100 ); // Animasyonun boyutunu giriyoruz.
//Eklemek istediğimiz ses ve resim dosyaları yoksa bu bölümü silebilirsiniz.
$vars = array(
'file' => base_path() . path_to_theme() .'/files/song.mp3',
'image' => base_path() . path_to_theme() ./files/image.jpg,
);
//Eklenecek dosya yok ise buraya kadar silinir.
print theme("swfobject_api", $url, $params, $vars);
?>
<?php endif; ?>
<?php if ($page != 0): ?>
<?php if ($logo || $site_name || $site_slogan): ?>
<div id="logo-title">
<?php if ($logo): ?>
<div id="logo"><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a></div>
<?php endif; ?>
<?php if ($site_name): ?>
<div id='site-name'>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<strong><?php print $site_name; ?></strong>
</a>
</div>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!-- /#logo-title -->
<?php if ($search_box || $header_right): ?>
<div id="header-bar"><div id="header-bar-inner" class="region region-header-bar">
<?php if ($search_box): ?>
<h3 id="search-title"><?php print t('Search'); ?></h3>
<div id="search-box">
<?php print $search_box; ?>
</div> <!-- /#search-box -->
<?php endif; ?>
<?php if ($header_right): ?>
<div id="header-right-blocks" class="region region-header-right">
<?php print $header_right; ?>
</div> <!-- /#header-right-blocks -->
<?php endif; ?>
</div></div> <!-- /#header-bar-inner, /#header-bar -->
<?php endif; ?>
<?php endif; ?>
<?php if ($header): ?>
<div id="header-blocks" class="region region-header">
<?php print $header; ?>
</div> <!-- /#header-blocks -->
<?php endif; ?>
<?php endif; ?>
</div></div>
<?php if ($is_front): ?> // Veya <?php if ($page == 0): ?>
<?php
$url = "swf_dosyasının_adı.swf"; //path to flash file
$params = array('width' => 100, 'height' => 100 ); // Animasyonun boyutunu giriyoruz.
//Eklemek istediğimiz ses ve resim dosyaları yoksa bu bölümü silebilirsiniz.
$vars = array(
'file' => base_path() . path_to_theme() .'/files/song.mp3',
'image' => base_path() . path_to_theme() ./files/image.jpg,
);
//Eklenecek dosya yok ise buraya kadar silinir.
print theme("swfobject_api", $url, $params, $vars);
?>
<?php endif; ?>
<?php if ($page != 0): ?>
<?php if ($logo || $site_name || $site_slogan): ?>
<div id="logo-title">
<?php if ($logo): ?>
<div id="logo"><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a></div>
<?php endif; ?>
<?php if ($site_name): ?>
<div id='site-name'>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<strong><?php print $site_name; ?></strong>
</a>
</div>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php endif; ?>
</div> <!-- /#logo-title -->
<?php if ($search_box || $header_right): ?>
<div id="header-bar"><div id="header-bar-inner" class="region region-header-bar">
<?php if ($search_box): ?>
<h3 id="search-title"><?php print t('Search'); ?></h3>
<div id="search-box">
<?php print $search_box; ?>
</div> <!-- /#search-box -->
<?php endif; ?>
<?php if ($header_right): ?>
<div id="header-right-blocks" class="region region-header-right">
<?php print $header_right; ?>
</div> <!-- /#header-right-blocks -->
<?php endif; ?>
</div></div> <!-- /#header-bar-inner, /#header-bar -->
<?php endif; ?>
<?php endif; ?>
<?php if ($header): ?>
<div id="header-blocks" class="region region-header">
<?php print $header; ?>
</div> <!-- /#header-blocks -->
<?php endif; ?>
<?php endif; ?>
</div></div>
Yukarıdaki kod bölümü ile flash bannerımız sadece anasayfada gözükecek diğer sayfalarda drupal header normal olarak gözükecektir.
- Yeni yorum ekle
- 3269 kez okundu
bahsettiğin gibi kullandığım temanın page.tpl.php dosyasını açtım ama kodlar içerisinde
<div id="header"><div id="header-inner" class="clear-block">ile başlayan bir satır yok
olarak not düştüm konuya. Css ve html bilginizle header bölümünü kendiniz bulmanız gerekiyor her temaya göre farklılık gösterir.
Yakuter sitesindeki makalede neden normal kod yerine SWFobject kullanmamız gerektiğini açıklamış bilgi vermek istedim;
Flash nesneleriniz tüm tarayıcılarda sorunsuz bir şekilde görüntülenir,
Web standartlarına tamamen uyumludur,
Tasarımdaki diğer unsurlara uyum sağlar, altta/üstte kalma gibi bir sorunla karşılaşmazsınız,
Internet Explorer’daki flash nesneyi çalıştırmak için gereken fazladan bir tıklama sorunu ortadan kalkar.
Ben daha önceden www.gorunumreklam.com sitesinin yapımında kullandığım cooliris image gallery modulunu bahsettiğiniz anlatımı yaparak drupal sitemin header bölümüne eklemeyi denedim fakat -img- tagıyla başladığı için sorunlu çalıştı. Yani yeterli kod bilgim ve vaktim olmadığı için beceremedim.(Daha önce logo ile başımın dertte olduğunu belirtmiştim(: )
Benim asıl sorum ddb ile oluşturduğumuz görünümü (slideshow) bu anlattığınız şekilde header bölümüne ekleyebilirmiyiz?
bu site üzerinden ddb kurulumuna bakıp. Yeni bir blok alanı olarak headera yer atayıp bunu yapmak kolaydır. Yeni blok alanı oluşturmak da bu sitede bulunmaktadır.