Skip to Content
Anasayfa » Genel Kullanım » Drupal Eklentileri » Flag: Kullanım ve Özelleştirme

Flag eklentisinde ikon kullanımı

onur serkan, Sal, 18/11/2008 - 21:02 tarihinde.

Bu anlatımda flag metinlerine ikon ekleme ve flag metinlerini ikon ile değiştirme konularını ele alacağız. Bu yöntemleri kullanarak sitenizde tanımlamış olduğunuz her değişik flag için ayrı ikonlar kullanabilmeniz mümkün.

#1 Flag metinlerine ikon ekleme

Bu işlemi CSS kullanımıyla gerçekleştirmek mümkün. Yapmamız gereken şey metinlere biraz padding uygulayıp sağa kaydırmak ve böylece açılan yere de ikonları bir arkaplan resmi olarak eklemek. Bunun için aşağıda verilen örnek css kodunu kullanabilirsiniz.

Not: Kodda flagadi yazan yerlere oluşturduğunuz flag'in makine adını (ing: machine-name) yazınız.

.flag-flagadi a {
  padding-left: 20px;
}

.flag-flagadi a.flag-action {
  background: url(images/sevdim.png) no-repeat left center;
}

.flag-flagadi a.unflag-action {
  background: url(images/sevmedim.png) no-repeat left center;
}

#2 Flag metinlerini ikon ile değiştirme

Önceki uygulamada flag metninin yanına CSS kullanarak bir ikon eklemiştik. Şimdi ise metni tamamen kaldırmaya ve yerine bir ikon koymaya çalışacağız. Bunun için biraz elimizi drupal koduna bulaştırmak gerekiyor.

Flag eklentisi, işlevlerini beraberinde gelen tema üzerinden sunuyor. Bu temada çeşitli değişkenler kullanılıyor; bunlardan biri de flag metnini içeren $link_text değişkeni. Drupal'in bize sunduğu değişkenlerin içeriklerini temada kullanılmadan önce değiştirebilme esnekliğinden yararlanarak, bu değişkende yer alan flag metnini bir <img> etiketi ile değiştirebilmemiz mümkün. Bu yöntem şöyle çalışıyor:

  1. Aşağıdaki kodu temanızın template.php dosyasına ekliyorsunuz.
    function phptemplate_preprocess_flag(&$vars) {
      $image_file = path_to_theme() . '/flag-' . $vars['flag_name_css'] . '-' . ($vars['action'] == 'flag' ? 'off' : 'on') . '.png';
      if (file_exists($image_file)) {
        $vars['link_text'] = "<img src='$image_file' />";
      }
    }
  2. Her flag için "imleme (işaretleme)" ve "iptal etme" ikonlarını sırasıyla flag-flagadi-on.png ve flag-flagadi-off.png olarak adlandırarak tema ana klasörüne atıyorsunuz. İkon adlarının yapısını değiştirirseniz yukarıdaki kodu da buna uygun olarak değiştirmeniz gerektiğini unutmayın.
    Not: Dosya isimlerinde flagadi yazan yerlere oluşturduğunuz flag'in makine adını (ing: machine-name) yazınız.
  3. flag/theme klasöründe yer alan flag.tpl.php dosyasının bir kopyasını alıp tema dizininize koyuyorsunuz.
  4. Son olarak Drupal'in önbelleğini siliyorsunuz (Yönet » Site Ayarları » Performans).
4 strings, Sal, 18/11/2008 - 21:31 tarihinde.

en son kod'da flagadı yazan yer yok.

onur serkan, Çrş, 19/11/2008 - 03:26 tarihinde.

Notu 2. madde yerine yanlışlıkla 1. maddeye yazmışım. "flagadi" kodda değil dosya isimlerinde var ve bunların değiştirilmesi gerekiyor. Anlatımı bu şekilde düzelttim. Uyarı için teşekkürler.

dainty, Pzt, 16/02/2009 - 18:16 tarihinde.

//editör notu: İlgili mesaj buraya taşınmıştır.

muhibbi, Cmt, 02/01/2010 - 20:11 tarihinde.

birinci maddedeki kodları nereye ekleyeceğiz?

muhibbi, Cuma, 08/01/2010 - 17:42 tarihinde.

ceaplayabilecek biri yok mu, ilk kodları flag modülündeki hangi css dosyasına ve nereden ekleyeceğiz?

etcetera9, Cuma, 08/01/2010 - 18:00 tarihinde.

sayfaya etki eden herhangi bir CSS dosyasına yazılacak. Kullanılan temanın ana CSS'i (style.css gibi) olabilir...

Mikuru, Pzt, 26/04/2010 - 14:33 tarihinde.

Her şeyi adım adım tekrar tekrar kontrol ederek yaptım ancak ilk aşamayı başarıyla tamamlamama rağmen ikinci aşamayı bir türlü yapamadım. Yani şu an resmin yanında bir de yazı mevcut. Acaba nerede hata yapıyorum

olajawun, Çrş, 28/04/2010 - 01:05 tarihinde.

Eğer yazıyı silip yerine ikon koymak istiyorsanız css de bu değişikliği yapmanız yeterli.

text-indent:-9999px;
background: url(resim.png) no-repeat;

Mikuru, Sal, 04/05/2010 - 13:59 tarihinde.

OLAJAWUN sizin dediğiniz yöntemi biliyorum ancak o şekilde de olmadı. Herşeyi tek tek yaptığım halde hata nerde anlayamadım. Uuzn zamandır hata arıyorum. Ben bu işi neden beceremedim yaa :(

Mikuru, Sal, 04/05/2010 - 14:23 tarihinde.

evet hatanın ne olduğunu buldum. :)

sadece flag.tpl.php dosyasını taşımak işe yaramıyor. Aynı zamanda flag.css ve flag.js dosyalarını da tema klasörüne atmak gerekiyor.

Geliştirmede şimdiki aşama ise flagı node başlığının yanına taşımak. Aynı bildirgeçte olduğu gibi. Bunu nasıl yapacağım hakkında bilgisi olan var mı?

olajawun, Çrş, 05/05/2010 - 00:43 tarihinde.

Doğru kodu uyguladığınıza emin misiniz, en basit ve kesin çözüm text-indent tir çünkü.

cihan, Çrş, 05/05/2010 - 11:55 tarihinde.

mikuru-> eklediğin kodların yerini değiştirerek bana yazdırabilirsin gibi geliyor. Uğraşmadım bu konuda ama node title ın yanına aldığında flag yazdırma komutlarını olacak gibi geldi.

kaptan, Per, 19/05/2011 - 16:54 tarihinde.

Node title yanına koymak biraz uğraştıracak çünkü flah in imleme yazısı links içinde bulunuyor. yani yorum yaz, devamını oku gibi nodelere ait linklerin içinde bulunuyor. Önce bu links değişkenini araştırmak gerekiyor.. Bende şuanda flag'i node titlenin yanına almalıyım ama node title değişkenine bağlı css kodlarınıda düzenlemek gerekiyor yoksa sığmaz flag aşağı kayar. Çözümü bulan arakadaşlar varmı?

Not: content templatede böyle bir <?php print $node->content['#content_extra_fields']['flag']['label'] ?> kod veriyor flag için sanırım doğru yoldayım ama yine saatlerim gidecek..

kaptan, Sal, 24/05/2011 - 00:21 tarihinde.

çözüm http://drupal.org/node/295383 burda arayan olursa...