CKEditorde Resimleri Responsive Yapma

Websitenizdeki CKEditor ile oluşturduğunuz içeriklerde eklediğiniz resimlerin responsive (ekran ebadına göre otomatik boyutlanma) olmaması sorunu ile karşılaşmış olabilirsiniz. Bu sorunu kolay bir yöntemle çözeceğiz. CKEditorde Resimleri Responsive Yapma yazımıza başlayalım.

CKEditor arayüzü görünümü

Bunu CKEditor ün imageresponsive plugini ile de yapabilirsiniz ancak biz kodlarımıza css ile müdahale edeceğiz.

Websitemizde Vizyon sayfamız vizyon.php olsun. CKEditor ile yönetim panelimizde yazdırılacak olan vizyon içeriğimizi düzenleyip veritabanına kaydettikten sonra vizyon.php de kodlarımı bu şekilde yazıyorum.

<div class="container">
	<div class="row">
		<div class="col-12">
			<div class="card text-center"> 
				<div class="card-body">
					<?php echo $vizyon; ?>
				</div>
			</div>
		</div>
	</div>
</div>

Buradaki div taglarının sınıf tanımları bootstrap kodlarıdır. Siz bootstrap kullanmıyorsanız dikkate almanıza gerek yok.

Burada önemli olan veritabanında kayıtlı olan vizyon içeriğimizi yazdırdığımız php kodlarının bulunduğu div tagı.

<div class=”card-body”> ye bir class tanımı daha ekleyelim, bu class adı ckeditor_img olsun. Siz istediğiniz adı verebilirsiniz.

<div class="card-body ckeditor_img">
   <?php echo $vizyon; ?>
</div>

Son durumda kod bloğumuz bu şekilde olacak.

<div class="container">
	<div class="row">
		<div class="col-12 mt-2">
			<div class="card text-center"> 
				<div class="card-body ckeditor_img">
					<?php echo $vizyon; ?>
				</div>
			</div>
		</div>
	</div>
</div>

Şimdi de tanımladığımız bu class a responsive özelliği vermek için meta tagları ekleyeceğiz.

/*CKEDITOR de image boyutlandırma*/
	@media only screen and (max-width:767px){
	.ckeditor_img img{
		width:100% !important;
		height:auto !important;
		}
	}
	@media only screen and (min-width:768px) and (max-width:991px){
	.ckeditor_img img{
		width:95% !important;
		height:auto !important;
		}
	}
	@media only screen and (min-width:992px){
	.ckeditor_img img{
		width:85% !important;
		height:auto !important;
		}
	}

Meta taglarına aşina değilseniz ufak bir açıklama yapayım. Burada min-width ve max-width kodları ile ekran boyutlarını belirtiyoruz.

Örneğin aşağıdaki kod bloğunda ekran boyutu 768px den 991px e kadarki ebatlarda resimlerin, ekranın %95 ini kapsamasını istediğimizi belirttik.

@media only screen and (min-width:768px) and (max-width:991px){
.ckeditor_img img{
   width:95% !important;
   height:auto !important;
  }
}

Eğer sitenizdeki tüm css kodlarınızı tek dosyadan okutuyorsanız o dosyaya kopyalıyoruz. Sadece belli bir sayfaya etki etmek istiyorsanız kodların en üst kısmına <style> tag ı açarak css kodlarımızı taglar arasına kopyalıyoruz.

siteadiniz.com/vizyon.php yi tarayıcınızda açtığınızda ekranı küçülttükçe resmin artık küçüldüğünü göreceksiniz.

Diğer yazılarımız için tıklayınız.

CKEditor ün resmi sitesi için tıklayınız.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir