Bir çok smf kullanıcısı sitelerinin daha çabuk açılmasını sağlamak ve seo puanlarını yükseltme amacıyla resim optimizasyonu yapmak istemekte. Smfnin kod yapısından anlayan arkadaşlar internetteki mevcut kaynaklardan faydalanarak bu resim optimizasyonu işlemini yapabilmekte. Ancak şimdiye kadar smf için hazırlanmış bir kaynağa rastlamadım. Forum anasayfası için bu işin nasıl yapılacağını SMF'de Resim Optimizasyonu - Ayrıntılı Örnek Anlatım başlıklı konuda anlatmıştım. şimdi de bu şekilde CSS sprites ile üye grup ranklarını nasıl birleştirileceğini örnek bir site üzerinden anlatacağım. Hepimizin sitesi kodlama ve içerik bakımından birbirinden farklı olduğu için yapılacak olan resim optimizasyonu çalışması temelde her site için aynı olmasına rağmen kodlamasında farklılıklar olacaktır.

ışlem Basamakları:
1. Öncelikle admin panelde yönetim / üyeler / üye grupları tıklayıp aşağıdaki resimde görüldüğü üzere üye gruplarımızı görüntülüyoruz. Örnek sitede 15 tane üye grubumuz var.


2. Üye gruplarına ait bu 15 adet resimi sırayla pcye indirip bir zip programı ile ranklar.zip adıyla zipliyoruz. Bu iş için ben 7zip programını kullanıyorum.

3. CSS Tümle?ik Resim Üreteci | Project Fondue sitesine gidip açılan sayfada bilgisayarımızdan ranklar.zip dosyasını çekip, aşağıdaki resimde görüldüğü gibi ayarlamaları yaptıktan sonra Tümleşik Resim Dosyasını && CSS Kodlarını Üret butonuna tıklıyoruz.


4. Sistem bize css kodlarını ve birleştirilmiş resimi verecektir. Verilen css kodlarını bir yere not edip birleştirilmiş resimi de pcye indiriyoruz.
Alınan css kodlarımız birleştirilmiş resimimiz şu şekilde:
Kod:

.ranklar-dj2{ background-position: 0 0; width: 150px; height: 50px; }
.ranklar-SBT0nursal{ background-position: 0 -100px; width: 150px; height: 50px; }
.ranklar-SBTadmin{ background-position: 0 -200px; width: 150px; height: 50px; }
.ranklar-SBTadmine{ background-position: 0 -300px; width: 150px; height: 50px; }
.ranklar-SBTban{ background-position: 0 -400px; width: 150px; height: 50px; }
.ranklar-SBTdr{ background-position: 0 -500px; width: 150px; height: 50px; }
.ranklar-SBTf-terapist{ background-position: 0 -600px; width: 150px; height: 50px; }
.ranklar-SBTmdr{ background-position: 0 -700px; width: 150px; height: 50px; }
.ranklar-SBTmedikal{ background-position: 0 -800px; width: 150px; height: 50px; }
.ranklar-SBTpdr{ background-position: 0 -900px; width: 150px; height: 50px; }
.ranklar-SBTrhb{ background-position: 0 -1000px; width: 150px; height: 50px; }
.ranklar-SBTtrc{ background-position: 0 -1100px; width: 150px; height: 50px; }
.ranklar-SBTuye{ background-position: 0 -1200px; width: 150px; height: 50px; }
.ranklar-SBTvip-uye{ background-position: 0 -1300px; width: 150px; height: 50px; }
.ranklar-super-uye{ background-position: 0 -1400px; width: 112px; height: 30px; }



5. CSS Tümle?ik Resim Üreteci | Project Fondue sitesinden indirdiğimiz resime birlestirilmis_ranklar.png ismini verip kullandığımız temanın images klasörüne atıyoruz.

6. CSS Tümle?ik Resim Üreteci | Project Fondue sitesinden almış olduğumuz yukarıda vermiş olduğum css kodlarını da aşağıdaki örnekte görüldüğü şekilde editleyip smfye uyarlayıp kullandığımız temanın css dosyasının en altına ekliyoruz.
Kod:

.ranklar-dj2{ background: url(../images/birlestirilmis_ranklar.png) 0 0; width: 150px; height: 50px; }
.ranklar-SBT0nursal{ background: url(../images/birlestirilmis_ranklar.png) 0 -100px; width: 150px; height: 50px; }
.ranklar-SBTadmin{ background: url(../images/birlestirilmis_ranklar.png) 0 -200px; width: 150px; height: 50px; }
.ranklar-SBTadmine{ background: url(../images/birlestirilmis_ranklar.png) 0 -300px; width: 150px; height: 50px; }
.ranklar-SBTban{ background: url(../images/birlestirilmis_ranklar.png) 0 -400px; width: 150px; height: 50px; }
.ranklar-SBTdr{ background: url(../images/birlestirilmis_ranklar.png) 0 -500px; width: 150px; height: 50px; }
.ranklar-SBTf-terapist{ background: url(../images/birlestirilmis_ranklar.png) 0 -600px; width: 150px; height: 50px; }
.ranklar-SBTmdr{ background: url(../images/birlestirilmis_ranklar.png) 0 -700px; width: 150px; height: 50px; }
.ranklar-SBTmedikal{ background: url(../images/birlestirilmis_ranklar.png) 0 -800px; width: 150px; height: 50px; }
.ranklar-SBTpdr{ background: url(../images/birlestirilmis_ranklar.png) 0 -900px; width: 150px; height: 50px; }
.ranklar-SBTrhb{ background: url(../images/birlestirilmis_ranklar.png) 0 -1000px; width: 150px; height: 50px; }
.ranklar-SBTtrc{ background: url(../images/birlestirilmis_ranklar.png) 0 -1100px; width: 150px; height: 50px; }
.ranklar-SBTuye{ background: url(../images/birlestirilmis_ranklar.png) 0 -1200px; width: 150px; height: 50px; }
.ranklar-SBTvip-uye{ background: url(../images/birlestirilmis_ranklar.png) 0 -1300px; width: 150px; height: 50px; }
.ranklar-super-uye{ background: url(../images/birlestirilmis_ranklar.png) 0 -1400px; width: 112px; height: 30px; }

Burada yaptığımız şu aslında yaparken size de kolaylık olsun:
CSS Tümle?ik Resim Üreteci | Project Fondue sitesinden aldığımız kodları notepad++ programında boş bir txt sayfasına yapıştırıp aşağıdaki işlemi yapıyoruz:
Bul:
Kod:

background-position:

Tümünü Değiştir:
Kod:

background: url(../images/birlestirilmis_ranklar.png)

7. Ekteki img_trans.gif isimli resimi temamızın images klasörüne atıyoruz.

8. css dosyamıza eklediğimiz kodları sa şu şekilde değiştiriyoruz:
Kod:

.DJ{ background: url(../images/birlestirilmis_ranklar.png) 0 0; width: 150px; height: 50px; }
.ranklar-SBT0nursal{ background: url(../images/birlestirilmis_ranklar.png) 0 -100px; width: 150px; height: 50px; }
.Admin{ background: url(../images/birlestirilmis_ranklar.png) 0 -200px; width: 150px; height: 50px; }
.Onursal{ background: url(../images/birlestirilmis_ranklar.png) 0 -300px; width: 150px; height: 50px; }
.Banned{ background: url(../images/birlestirilmis_ranklar.png) 0 -400px; width: 150px; height: 50px; }
.Doktor{ background: url(../images/birlestirilmis_ranklar.png) 0 -500px; width: 150px; height: 50px; }
.Fizyoterapist{ background: url(../images/birlestirilmis_ranklar.png) 0 -600px; width: 150px; height: 50px; }
.Moderatör{ background: url(../images/birlestirilmis_ranklar.png) 0 -700px; width: 150px; height: 50px; }
.Medikal{ background: url(../images/birlestirilmis_ranklar.png) 0 -800px; width: 150px; height: 50px; }
.PDR{ background: url(../images/birlestirilmis_ranklar.png) 0 -900px; width: 150px; height: 50px; }
.Rehabilitasyon{ background: url(../images/birlestirilmis_ranklar.png) 0 -1000px; width: 150px; height: 50px; }
.Tercüman{ background: url(../images/birlestirilmis_ranklar.png) 0 -1100px; width: 150px; height: 50px; }
.Üye{ background: url(../images/birlestirilmis_ranklar.png) 0 -1200px; width: 150px; height: 50px; }
.Vip{ background: url(../images/birlestirilmis_ranklar.png) 0 -1300px; width: 150px; height: 50px; }
.Süper{ background: url(../images/birlestirilmis_ranklar.png) 0 -1400px; width: 112px; height: 30px; }

Burada yaptığımız işlem şu:
Örneğin 9. satırda şu kod vardı:
Kod:

.ranklar-SBTmedikal{ background: url(../images/birlestirilmis_ranklar.png) 0 -800px; width: 150px; height: 50px; }

Bu kod Medikal üye grubunun rankına ait. Yönetim panelindeki üye gruplarındaki Medikal üye grubuna dahil üyelerin görünen adı da dikkat ederseniz Medikal.

Kodun başındaki .ranklar-SBTmedikal yazısını
Kod:

.ranklar-SBTmedikal

şu şekilde değiştirince
Kod:

.Medikaledikal

kodumuz şu hale geldi:
Kod:

.Medikal{ background: url(../images/birlestirilmis_ranklar.png) 0 -800px; width: 150px; height: 50px; }

Diğer 14 üye grubuna da aynı işlemi uyguladım.

Son olarak da Display.template.php dosyamızda şu kodu bulup:
Kod:

', $message['member']['group_stars'], '
';

şununla değiştirip işlemi tamamlıyoruz:
Kod:


';

Mümkün olduğunca sade bir şekilde anlatmaya çalıştım.
Anlatımı ve kodlamayı inceleyerek sizler de yapabilirsiniz.
Bu anlatımın uygulandığı örnek siteyi (geçici demo) aşağıdaki linkten görebilirsiniz.
Spina Bifida - Anasayfa

Orjinal konu: SMF'de Resim Optimizasyonu - Ayr

Kaynak: CSS sprites ile üye grup ranklarını birleştirmek