PHP- Veritabanından resim getirme sorunu.

harakiri

Merhaba, php'de veritabanından resimleri çekerken sıkıntı yaşıyorum. Foreach döngüsüyle beraber aynı formatta cardlar oluşturursam sıkıntı yok ama seyler.eksisozluk.com adresindeki gibi resim boyutları ve kartların boyutları farklı olunca foreach kullanamıyorum. her kart için ayrı kontrol sağlamak gerekiyor gibi bu da bir sürü php dosyası çağırmak demek oluyor. Bir yerlerde ta işin temelinde bir hata yaptım galiba ama sürdürülebilir bir çözüm bulmam gerekiyor. Çok da tecrübeli biri değilim öğrenmeye çalışıyorum. Resimler her zaman url ya da serverda olmak zorunda olmadığı için bir kontrol mekanizması yazdım

<?php

$random_img = rand(1,9);									
$sabit_resim = "<img src='public/img/duz/img_".$random_img.".jpg' style='width: 100%; height:140px; filter: blur(.1rem);' border:2px solid red;>";
$dosya = "public/upload/$resim1";
$resim_url = $resim1;									
$find_letters = array('jpg', 'jpeg', 'png','gif','svg');
//print_r($resim_url_length);

$match = (str_replace($find_letters, '', substr($resim_url,-4)) != substr($resim_url,-4));
//resim_url son 4 karakteri array içeirisndeki 4 karakterle eşleşiyorsa 1 eşleşmiyorsa false dönüyor

if (empty($resim1)) {
echo "";
?>
<script>
$( '#icerik_resim' ).css('display', 'none');
</script>													

<?php																			
}elseif (file_exists($dosya)) {
echo "<img style='width:100%; height:250px' src='".$dosya."'>";


	//print_r($dosya);
}elseif (strlen($resim_url)>=3) { //Eğer databaseden gelen verinin uzunluğu 3 karakterden fazlaysa
	
	if (filter_var($resim_url, FILTER_VALIDATE_URL)!==false && $match==true) {
		
		echo "<img style='width:100%; height:250px' src='".$resim_url."'>";
		//echo "<img style='width:100%; height:400px' src='".$resim_url."'><span>Resim Bilgisi</span>"; resim altına yazı eklemek için													
	}else{?>
		<script>
			$( '#icerik_resim' ).css('display', 'none');
		</script>													

		<?php
	}
	//print_r($resim_url);
}else{
	echo $sabit_resim;
	echo '<div style="position:absolute; left:15px; bottom:5px; text-decoration: none;"><span>Merhaba</span></div>';
}

?>

Bu kod ile belirli ölçülerde img tagı getiriyorum ama cardlardaki boyutlar birbirinden farklı olacağı için her farklı card için bu kodun olduğu ayrı php dosyası çağırmam gerekecek onun yerine ne yapabilirim bilmiyorum.

şu anki anasayfa görüntüsü bu:

Halil Han BADEM

Merhaba,
resim boyutuna göre card boyutunu mu iyileştirmek istiyorsunuz tam olarak?

harakiri

Halil Han BADEM kart boyutuna göre resim boyutunu ayarlamak istiyorum. foreach ile listeleme ya da grid yapınca sıkıntı yok çünkü tüm link/card/blok vs. aynı şekilde ama görüntüdeki gibi dizilim yapınca for each kullanamıyorum çünkü yazdığım resim kontrol kodu tek bir img tagı getiriyor. Büyük ihtimal 4 farklı kontrol php dosyası çağıracağım 4 farklı card görünümü olduğu için şimdilik başka bir yolunu bulamadım.

liste görünümünde hepsi aynı göründüğü için resim kontrol dosyasından tek ölçüye sahip bir resim gönderiyordum ama şu anda bu anasayfadaki tasarımda işe yaramıyor:
liste görünümü:

Halil Han BADEM

harakiri Eğer kart boyutunu alabiliyorsanız -ki alabilirsiniz. JavaScript ile kontrol edip o şekilde tek bir dosyada halledebilirsiniz. JavaScript DOM ile nesnelere erişin ve gerekli kontrolleri sağlayıp işlemlerinizi tamamlayabilirsiniz.

harakiri

Halil Han BADEM şimdiye kadar javascriptsiz halletmeye çalıştım ama bu sefer gerekiyor gibi 😃

Halil Han BADEM

harakiri JS olmadan olmazz 😁

harakiri

Halil Han BADEM bu iş biraz zorladı beni. Herhangi bir örneğini bulabileceğim bir kaynak var mı? Foreach ile yapmam lazım.

Halil Han BADEM

harakiri Merhaba,
https://www.yazilimbilisim.net/javascript/javascript-html-dom/
buradan nesnelere nasıl ulaşabileceğine, DOM'un ne olduğuna bakabilirsin.
Zira isteğin ile direkt bir kaynak Bootstrap üzerinden bunlar var;
https://stackoverflow.com/questions/37287153/how-to-get-images-in-bootstraps-card-to-be-the-same-height-width/53252725
https://stackoverflow.com/questions/50461506/how-to-size-the-image-in-equal-length-in-bootstrap-card

İyi çalışmalar dilerim.

harakiri

Halil Han BADEM teşeşkkürler. Stackoverflowdaki kaynaklar tam olarak benim istediğim değil aslında çünkü onlar her kart için aynı collumn oranını kullanmış.

altta benim card yerleşimi bulunuyor.

<?php
	$ana_posts = json_decode(json_encode($anasayfa_posts), True); 
	// sorguyu array içeirisine attım ardından home_card_img*.php dosyalarında kullanmak için
	?>
		
    <div class="row">
    	<div class="col-md-7">						
    		<div class="card shadow-sm">
    			<a href="#">
    				<?php  require 'inc/images_homepage/home_card_img1.php';?>
    				<div class="card-body" style="min-height: 150px;">
    					<h4 class="card-title">John Doe</h4>
    					<p class="card-text">Some example text.</p>								
    				</div>
    			</a>
    		</div>
    	</div>

    	<div class="col-md-5">
    		<div class="card shadow-sm">
    			<a href="#">
    				<?php  require 'inc/images_homepage/home_card_img2.php';?>
    				<div class="card-body" style="min-height: 200px">
    					<h4 class="card-title">John Doe</h4>
    					<p class="card-text">Some example text.</p>								
    				</div>
    			</a>
    		</div>
    	</div>
    </div>

    <hr>

    <div class="row">

    	<div class="col-md-4">
    		<?php if ($ana_posts[2]) { ?>
    		<div class="card shadow-sm">
    			<a href="#">
    				<?php  require 'inc/images_homepage/home_card_img3.php';?>
    				<div class="card-body" style="min-height: 200px">
    					<h4 class="card-title">John Doe</h4>
    					<p class="card-text">Some example text.</p>								
    				</div>
    			</a>
    		</div>
    	<?php } ?>
    	</div>

     	<div class="col-md-4">
    		<?php if ($ana_posts[3]) { ?>
    		<div class="card shadow-sm">
    			<a href="#">
    				<?php  require 'inc/images_homepage/home_card_img4.php';?>
    				<div class="card-body" style="min-height: 200px">
    					<h4 class="card-title">John Doe</h4>
    					<p class="card-text">Some example text.</p>								
    				</div>
    			</a>
    		</div>
    	<?php } ?>
    	</div>
    	
    	<div class="col-md-4">
    		<div class="card shadow-sm">
    			<a href="#">
    				<?php  require 'inc/images_homepage/home_card_img5.php';?>
    				<div class="card-body" style="min-height: 200px">
    					<h4 class="card-title">John Doe</h4>
    					<p class="card-text">Some example text.</p>								
    				</div>
    			</a>
    		</div>
    	</div>
   	

    </div>
    <hr>
    <div class="row">
     	<div class="col-md-6 my-1">
    		<div class="card shadow-sm">
    			<a href="#">
    				<?php  require 'inc/images_homepage/home_card_img6.php';?>
    			<div class="card-img-overlay">
    				<h4 class="card-title">John Doe</h4>
    				<p class="card-text">Some example text.</p>
    				<a href="#" class="btn btn-primary">See Profile</a>
    			</div>
    			</a>
    		</div>
    	</div>
    	   	
    	<div class="col-md-6">

    		<div class="card shadow-sm mb-2 mt-1">
    			<a href="#">
    				<div class="row">
    					<div class="col-md-5">
    						<?php  require 'inc/images_homepage/home_card_img7.php';?>
    					</div>
    					<div class="col-md-7">
    						<div class="card-body" style="min-height: 140px;">
    							<h4 class="card-title">John Doe</h4>
    							<p class="card-text">Some example text.</p>								
    						</div>										
    					</div>
    				</div>
    			</a>
    		</div>

    		<div class="card shadow-sm mb-2 mt-1">
    			<a href="#">
    				<div class="row">
    					<div class="col-md-5">
    						<?php  require 'inc/images_homepage/home_card_img8.php';?>
    					</div>
    					<div class="col-md-7">
    						<div class="card-body" style="min-height: 140px;">
    							<h4 class="card-title">John Doe</h4>
    							<p class="card-text">Some example text.</p>								
    						</div>										
    					</div>
    				</div>
    			</a>
    		</div>							

    		<div class="card shadow-sm mb-2 mt-1">
    			<a href="#">
    				<div class="row">
    					<div class="col-md-5">
    						<?php  require 'inc/images_homepage/home_card_img9.php';?>
    					</div>
    					<div class="col-md-7">
    						<div class="card-body" style="min-height: 140px;">
    							<h4 class="card-title">John Doe</h4>
    							<p class="card-text">Some example text.</p>								
    						</div>										
    					</div>
    				</div>
    			</a>
    		</div>

    	</div>														
    </div>

her resim için farklı bir php dosyası çağırdım. toplam 9 tane php dosyası var fonksiyon olarak çağırırken sıkıntı yaşadım. Javascript kullanmak daha doğru olur belki ama beceremeyince yine böyle bir yol denedim. 9 resim sonrasında sayfalama olacak sql sorgusuna sayfanın idsi giince array yenilenecek en fazla 9 php dosyası çağırdım. foreach için if yapısı kullansam da belki olabilir ama şimdilik idareten bu işimi gördü.

home_card_img*.php dosyalarından biri:

<?php

$resim7= $ana_posts[6]['icerik_foto'];
$random_img = rand(1,9);									
$sabit_resim = "<img src='public/img/duz/img_".$random_img.".jpg' style='width: 100%; height:140px; filter: blur(.1rem);' border:2px solid red;>";
$dosya = "public/upload/$resim7";
$resim_url = $resim7;									
$find_letters = array('jpg', 'jpeg', 'png','gif','svg');
//print_r($resim_url_length);

$match = (str_replace($find_letters, '', substr($resim_url,-4)) != substr($resim_url,-4));
//resim_url son 4 karakteri array içeirisndeki 4 karakterle eşleşiyorsa 1 eşleşmiyorsa false dönüyor

if (empty($resim6)) {
echo "";
?>
<script>
$( '#icerik_resim' ).css('display', 'none');
</script>													

<?php																			
}elseif (file_exists($dosya)) {
echo "<img style='width:100%; height:140px' src='".$dosya."'>";


	//print_r($dosya);
}elseif (strlen($resim_url)>=3) { //Eğer databaseden gelen verinin uzunluğu 3 karakterden fazlaysa
	
	if (filter_var($resim_url, FILTER_VALIDATE_URL)!==false && $match==true) {
		
		echo "<img style='width:100%; height:140px' src='".$resim_url."'>";
		//echo "<img style='width:100%; height:400px' src='".$resim_url."'><span>Resim Bilgisi</span>"; resim altına yazı eklemek için													
	}else{?>


		<script>
			$( '#icerik_resim' ).css('display', 'none');
		</script>													

		<?php
	}
	//print_r($resim_url);
}else{
	echo $sabit_resim;
	echo '<div style="position:absolute; left:15px; bottom:5px; text-decoration: none;"><span>Merhaba</span></div>';
}

?>

Görünüm: