Kategoriler
Kodlama

Bulunmayan bozuk/broken resimlere CSS dokunuşu

Bu makalede web sitesinde bulunmayan 404 veren görsellerin daha yakışıklı görünmesi için basit bir CSS kodu paylaştım.

Web sayfalarında bazı nedenlerle bazı görseller gösterilemeyebilir, bu durumlarda sayfada resim yerine hiç güzel olmayan bir görüntü oluşur ve biz bu vereceğim CSS kodu ile onu yakışıklı hale getireceğiz.

Peki tüm bunları neden yapıyoruz? Nedeni hem siteyi ziyaret eden kullanıcıları düşündüğümüzü göstermek ve onlara daha iyi bir deneyim sunmak hem de aslında Google algoritmasının bu tür kullanıcı deneyimi ve detaylı geliştirmeleri göz ön ünde bulundurduğunu bilmemiz.

Normal şartlarda sitede eğer bir görsel bozuk/kırık/broken ise şu şekilde görünür;

Normal kırık img görüntüsü
Normal kırık img görüntüsü

Bizim yapacağımız CSS geliştirmesi ile aşağıdaki gibi görünecektir;

CSS ile yaptığımız kırık img görüntüsü
CSS ile yaptığımız kırık img görüntüsü

CSS ile sayfada bulunamayan bozuk/kırık resimlerin daha güzel görünmesi için aşağıdaki kodu kullanabilirsiniz:

img::after{
  content: "\2639"" " attr(alt);
  display: flex;
  justify-content: center;
  place-items: center;
  align-items: center;
  background-color: #fff;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Kod içerisindeki “content: "\2639" " " attr(alt);” kısmını dilerseniz kendiniz manuel bir değer atayabilirsiniz, bu haliyle ilgili bozuk görselin “alt="alt bilgi metni"“’ni göstermektedir.

Canlı olarak test etmek için https://broken-img-css.glitch.me/ adresine bakabilirsiniz ve örnek kodlama aşağıda:

Ayrıca bulunamayan görseller konusunda yazdığım şu 3 makaleyi de incelemenizi öneririm:

WordPress wp-content hack: wp-content klasöründe var olmayan görseller için 404 sayfası yerine varsayılan bir resim göstermek.
Kırık görselleri bulmak [jQuery]: jQuery ile bir sayfadaki kırık kullanılmayan görselleri kaldırmak veya yerine başka görseli göstermek.
.htaccess ipucu: bulunamayan bozuk resim linkleri yerine resim göstermek

Güzel kodlamalar dilerim.