print_r() ile echo farklı şekilde çalışıyorlar. echo komutu karşısındaki ifadenin bir string olduğunu varsayar. Siz echo $cikti_json; komutunu verdiğinizde echo'ya bir string değil bir array veriyorsunuz.
print_r() fonksiyonu içeriğindeki yapıya göre kendince bir formatta çıktı üretir.
Aslında echo'nun amacı gerçekten ekrana bi'şeyler yazdırmakken print_r()'nin amacı programcıya bir değerin değerini göstermektir. İkisinin hedef kitlesi farklı.
Kısacası, bir PHP array'ını echo ile ekrana yazdıramazsınız. Size array'ın içeriğini yazmak yerine sadece "Array" yazar.
Siz eğer $cikti_json değişkeninizdeki değerleri yazdırmak istiyorsanız onlara ayrı ayrı ulaşıp echo komutunu kullanmalısınız.
Örneğin şöyle bir json veriniz var diyelim:
[
{ "ad": "B. Kağan", "soyad": "ATAGÜN" },
{ "ad": "Tayfun", "soyad": "ERBİLEN" }
]
Siz bu değeri json_decode() fonksiyonuyla $cikti_json değişkenine aldınız:
$cikti_json=json_decode('[{ "ad": "B. Kağan", "soyad": "ATAGÜN" }, { "ad": "Tayfun", "soyad": "ERBİLEN" }]');
Şu şekilde, dizinizdeki kişilerin ad-soyad bilgilerini ekrana yazdırabilirsiniz:
for($i = 0; $i < count($cikti_json); $i++) {
echo "<div><strong>Ad:</strong> {$cikti_json[$i]->ad} - <strong>Soyad:</strong> {$cikti_json[$i]->soyad}</div>;
}
foreach ile yapmak için:
foreach($cikti_json as $item) {
echo "<div><strong>Ad:</strong> {$item->ad} - <strong>Soyad:</strong> {$item->soyad}</div>;
}
NOT: json_decode() komutu json içindeki array'ları kendi Array'ına, object'leri de kendi stdClass'ına çeviriyor'ına çeviriyor. stdClass içeriğine erişmek için dizilerdeki gibi [ ] içine key yazmak yerine -> ifadesinden sonra key yazmak gerekiyor.
Başka bir örnek vereyim. Bu sefer json bir dizi değil sadece object olsun.
$cikti_json=json_decode('{ "customer": "Emre", "shipmentAddress": "Samsun" }');
echo "Müşteri {$cikti_json->customer} için teslimat adresi {$cikti_json->shipmentAddress} olarak belirtilmiş.";
Merhaba. json'u decode edip bir PHP dizisi haline geirdikten sonra işlemlerinizi yapmanız daha uygun olacaktır. Aksi halde json'un string hali üzerinde, yani aslında düz bir metin üzerinde arama yaparak işlemlerinizi yapmanız gerekir ve bu çok sağlıklı olmaz. Hatta kodunuz geliştikçe json_decode()'nin yaptığı işi kendiniz yapmak zorunda kalabilirsiniz.
json_decode() ile değerleri PHP array'ına çevirdikten sonra veriler üzerinde istediğiniz gibi döngüler kurabilir, istediğiniz değerleri kolayca başka değişkenlere atayıp buradan insert işleminizi gerçekleştirebilirsiniz.
Merhaba. Öncelikle hazır kod beklemek yerine araştıracak bir yol beklemeniz beni memnun etti.
Eğer sitenizi JQuery ile kullanıyorsanız ajax size yardımcı olacaktır. ajax sayesinde sayfayı yenilemeden sunucunuza istek atıp yanıt alabilirsiniz. JQuery kullanmıyorsanız da XMLHttpRequest ile saf javascript kullanarak aynı işi yapabilirsiniz ama o zaman işler biraz daha çetrefilli hale geliyor.
Örnek olarak bir kurgu yapalım:
index.html
<html>
<head>
<title>Deneme</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { display:flex; flex-direction:row; }
.secim-alani { flex:1; height:100%; display:flex; align-items:center; justify-content:center; }
.secim-alani > #benimSelectim { width:200px; height:50px; border:1px solid #ccc; border-radius:3px; }
.ilceler-alani { flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ilceler-alani > h1 { padding:30px; width:100%; text-align:center; border-bottom:1px dashed #ccc; }
.ilceler-alani > .ilceler { flex:1; overflow-y:scroll; text-align:center; padding:30px; }
.ilceler-alani > .ilceler > div { padding:20px 0; }
</style>
</head>
<body>
<label class="secim-alani">
<select id="benimSelectim">
<option selected disabled>İl Seçin...</option>
<option value="Kayseri">Kayseri</option>
<option value="Samsun">Samsun</option>
</select>
</label>
<div class="ilceler-alani">
<h1>İlçeler</h1>
<div class="ilceler">
Lütfen önce il seçin.
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Basit bir tasarım verilmiş halde, sol tarafta il seçimi için oluşturulmuş bir select kutumuz, sağ tarafta da seçilecek ilin ilçelerini listeleyecek alanımız var.
Sayfamıza CDN yoluyla jquery'i çağırdık. Son olarak da index.js dosyamızı çağırdık.
Amacımız select kutusunda bir değişiklik olduğunda bunu yakalayıp ilcegetir.php dosyasına bağlanmak ve o şehirdeki ilçelerin listesini alıp ilçeler alanında göstermek.
index.js
$("#benimSelectim").on("change", function() { // benimSelectim id'li elementte change olayı meydana gelince bu fonksiyon çalışsın
var secilenSehir = $(this).val(); // Bu elementin değerini alıp secilenSehir değişkenine ata
$.ajax({
url: "ilcegetir.php", // ilcegetir.php'ye istek at
data: { il: secilenSehir }, // // ilcegetir.php'ye istek atarken il adıyla secilenSehir değişkenini de gönder.
method: "post", // POST yöntemiyle istek at.
success: function(response) { // ilcegetir.php'ye istek atılıp başarıyla sonuç dönmüşse bu fonksiyon çalışır.
$(".ilceler").html(response); // ilcegetir.php'den dönen değeri olduğu gibi ilceler class'lı alana yazdırsın.
},
error: function(error) { // ilcegetir.php'ye istek atıldığında bir hata oluşmuşsa bu fonksiyon çalışır.
alert("Bir hata oluştu");
console.log(error);
}
});
});
Son olarak da ilcegetir.php dosyamızı ayarlayalım.
ilcegetir.php
<?php
if(!isset($_POST["il"])) { // Eğer "il" adıyla bir değişken POST edilmemişse
echo "<div>Lütfen il seçin</div>"; // Ekrana bunu yaz
exit(); // Ve bu satırdan itibaren yanıt oluşturmayı bırak.
}
$il = $_POST["il"]; // POST edilen il değerini $il değişkenine ata.
// Burada veritabanından çekme örneği vermiyorum daha fazla uzatmamak için. Doğrudan if-else'le sonuç döndüreceğim.
if($il=="Kayseri") { // Eğer il "Kayseri" ise ekrana şunları yaz:
echo "<div>Hacılar</div>";
echo "<div>Koca Hasan</div>";
echo "<div>Melikgazi</div>";
echo "<div>Talas</div>";
exit(); // ve bu satırdan itibaren yanıt oluşturmayı bırak.
}
if($il=="Samsun") { // Eğer il Samsun ise ekrana şunları yaz:
echo "<div>İlkadım</div>";
echo "<div>Atakum</div>";
echo "<div>Canik</div>";
exit(); // ve bu satırdan itibaren yanıt oluşturmayı bırak.
}
// İl Samsun veya Kayseri değilse bir sorun var demektir... Ön taraftan sadece bu iki ili select kutusuna eklemiştik.
echo "<div>Şehir sadece Kayseri veya Samsun olabilir!</div>";
Umarım yardımcı olur. İyi çalışmalar.
Merhaba. Kodunuzdaki scrollRight() fonksiyonunuzdaki else bloğunda yer alan kaydırma işlemi şu şekilde:
slider.scrollBy({
left: window.innerWidth, // soldan ekran genişliği kadar kaydır.
behavior: "smooth" // yumuşak bir şekilde kaydır.
});
Slider'i hazır bulduğunuzu yazmışsınız. Muhtemelen slider tam ekran olacak şekilde düşünülerek kodlanmış ve "soldan ekran genişliği kadar kaydır" komutu verilmiş. Siz bunu "soldan slider genişliği kadar kaydır" olarak değiştirmelisiniz.
Yani bu kısmı şu şekilde değiştirmelisiniz:
slider.scrollBy({
left: slider.offsetWidth, // soldan slider genişliği kadar kaydır.
behavior: "smooth" // yumuşak bir şekilde kaydır.
});
Şunlar işinize yarayabilir:
aspect-ratio
Genişlik ve yüksekliği korur.
Örnek: img { width: 100px; aspect-ratio: 5/1; } şeklinde genişliği 100px yapar ve yüksekliği de onun 5'te 1'i kadar yapmış olursunuz. (5:1)
Örnek: img { width: 100%; aspect-ratio: 5/1; } şeklinde genişliği kapsayıcının genişliğine eşitlersiniz ve genişlik de yüksekliğin 5 katı olur. (5:1)
object-fit: cover
Görseli genişlik ve yüksekliği dolduracak şekilde boyutlandırarak kırpılmış şekilde gösterir.
Örnek: img { width: 100px; height: 100px; object-fit: cover; } şeklinde img tag'ının genişlik ve yüksekliğini 100x100px yaptık. Görselin boyutu örneğin 250x120px olsa bile görüntü kendini 100px'lik kareyi dolducacak şekilde boyutlandıracaktır.
Örnek: img { width: 100%; aspect-ratio:5/1; object-fit: cover; } şeklinde, img tag'ının genişliğini kapsayıcısının genişliğine eşitledik. Yüksekliğini genişliğinin 5'te 1'i kadar yaptık. Görselin gerçek ebatları ne olursa olsun bu genişlik ve yüksekliği dolduracak şekilde görüntülenmesini istedik.
Büyük ihtimalle bu örnekleri inceleyip kendi kodunuza uyaryarak sorunu çözebilirsiniz.
DÜZELTME
<div> için de aspect-ratio ile en-boy oranı koruyabilirsiniz.
Örnek: div { width:100px; aspect-ratio:5/1; }
Eğer <div> içindeki elementlerin <div>'in dışına taşmasını istemiyorsanız overflow: hidden; diyebilirsiniz.
Örnek: div { width:100px; aspect-ratio:2/1; overflow:hidden; }
Farklı kombinasyonları deneyin lütfen.
Merhaba. Dosya yapınızı bilmiyorum. Sayfaların uzantısı .php mi yoksa .html mi? Sayfa yönlendirmeleri nasıl yapılmış? Projeyi görmeden net cevap vermek zor.
Varsayımsal bir örnek üzerinden gidelim. Diyelim ki kök klasörünüzde şöyle bir dosyalama yapılmış:
- index.php (anasayfanız)
- hakkimizda.php
- iletisim.php
- template klasöründe: head.php, foot.php
- styles klasöründe: anasayfa.css, hakkimizda.css, iletisim.css
- scripts klasöründe: jquery.min.js, anasayfa.js, hakkimizda.js, iletisim.js
Tüm sayfalarda sabit title kullanıldığına göre tahmin ediyorum ki tüm sitenin tüm sayfaları şöyle kurgulanmış:
Örneğin hakkimizda.php:<?php include("template/head.php"); ?> <link rel="stylesheet" href="styles/hakkimizda.css" /> <h1>Hakkımızda Sayfası</h1> <p>Hakkımızda sayfasının içeriği</p> <script src="scripts/jquery.min.js"></script> <script src="scripts/hakkimizda.js"></script> <?php include("template/foot.php"); ?>Yani her sayfa önce head.php dosyasını include ediyor. Sonra kendi içeriğini bulunduruyor. Sonra da foot.php dosyasını include ediyor.
Haliyle aynı head.php dosyası her sayfada aynı şekilde göründüğünden,<title></title>da her sayfada aynı oluyor.
template/head.php:<html> <head> <title>Site Başlığı</title> </head> <body> <section id="contentPlaceHolder">template/foot.php:
</section> </body> </html>Tabi bu sıralamada hakkimizda.php dosyasının içeriği head.php dosyasının içeriğinden sonra geldiği için hakkimizda.php dosyasında oluşturacağınız bir değişkenle head.php dosyasına etki edemiyorsunuz.
Bu sorunu aşmak için kök dizininizde controller adında bir klasör oluşturun ve içine sayfalarınızla aynı isimde php dosyaları oluşturun: - controller
- anasayfa.php (index.php'nin controller'ı)
- hakkimizda.php
- iletisim.php
Ve hakkimizda.php sayfanızın içeriğini şu şekilde güncelleyin:
<?php include("controller/hakkimizda.php"); ?>
<?php include("template/head.php"); ?>
<link rel="stylesheet" href="styles/hakkimizda.css" />
<h1>Hakkımızda Sayfası</h1>
<p>Hakkımızda sayfasının içeriği</p>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/hakkimizda.js"></script>
<?php include("template/foot.php"); ?>
Sayfanızın başına controller/hakkimizda.php dosyasını include etmiş oldunuz. Bu controller dosyası sayfanın en başında çağırıldığı için burada oluşturacağınız değişkenleri template/head.php dosyanızdan da okuyabileceksiniz. Mesela controller'ınızın içine şunları yazın:
controller/hakkimizda.php
<?php
$pageTitle = "Hakkımızda Sayfası";
Sonra da template/head.php dosyanızdaki <title> alanını güncelleyin:
<html>
<head>
<title><?=(isset($pageTitle) ? $pageTitle : "Site Başlığı")?></title>
</head>
<body>
<section id="contentPlaceHolder">
Yani demiş oldunuz ki: Eğer $pageTitle adında bir değişken varsa buraya onu yaz. Yoksa "Site Başlığı" yaz.
Merhaba. Bahsettiğiniz olay bir CSS animation olayı. Sitedekinin aynısını alıp buraya eklemek hoş olmaz.
Diyelim ki şöyle bir yapınız var:
<nav>
<a><i class="icon">ikon</i> Link 1</a>
<a><i class="icon">ikon</i> Link 2</a>
<a><i class="icon">ikon</i> Link 3</a>
<a><i class="icon">ikon</i> Link 4</a>
</nav>
Stil olarak şu yapıyı kullanabilirsiniz:
nav.menu a {
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
}
nav.menu a:hover .icon {
animation: .5s cubic-bezier(0.35, 0.10, 0.20, 0.95) both salla;
transform-origin: top right;
}
@keyframes salla {
0%,to { transform: rotate(0) }
15% { transform: rotate(8deg) }
30% { transform: rotate(-8deg) }
45% { transform: rotate(6deg) }
56% { transform: rotate(-6deg) }
70% { transform: rotate(3deg) }
85% { transform: rotate(-3deg) }
95% { transform: rotate(2deg) }
}
Sitede aşağı yukarı buna benzer bir işlem yapılmış.
Evet, "veritabanı kullanmadan veritabanındaki veriyi hızlı bir şekilde çekip listelemenin" bir yolu var: Cache'lemek.
- Listeleme yapacağınız sayfaya girildiğinde bir kontrol yapmalısınız: Bu liste cache'lenmiş bir json dosyasında mevcut mu?
- Liste henüz cache'lenmemişse veritabanına bağlanıp büyük veriyi çekeceksiniz ve bir json dosyasına yazıp kaydedeceksiniz.
- Liste cache'lenmişse veritabanına hiç bağlanmayıp doğrudan json dosyasını döndüreceksiniz.
Sayfaya ilk giren talihsiz kişi veritabanına bağlanılıp cache'lenmesini sağlayacağı için biraz bekleyecek. Ama sonraki kişiler veriyi doğrudan json dosyasından alacakları için daha hızlı sonuç alacaklar.
Tabi burada önemli noktayı kaçırmamak lazım: - Veritabanından anlık olarak doğru veri okumanız gerekiyorsa bu yöntemi kullanamazsınız. Çünkü herkes son cache'lediğiniz veriyi görür.
- Verinin ne zaman cache'leneceğini ayarlamalısınız. Mesela son cache'lemenizin üstünden 2 saat geçmişse yeniden cache'lemeniz gerekiyor olabilir. Veya cache'lemeyi tamamen ayrı bir sayfadan sağlayabilirsiniz. Mesela yönetim panelinden bu veritabanı tablosunu etkileyecek bir değişim yapıldığında yeniden cache'leme yapılmasını sağlayabilirsiniz. Veya tüm değişiklikler yapıldıktan sonra bir "Cache'le" butonuna basılmasıyla birlikte bu işlemi yaptırabilirsiniz. İşin algoritması, verinin değişim sıklığına veya canlı verinin görüntülenme mecburiyetine göre değişir.
Bu cache'leme işlemini daha da üst seviyeye taşıyıp bütün bir sayfayı cache'leyebilirsiniz. Mesela "Yeni Ürünler" sayfasına ilk girişte PHP ile bu sayfayı oluşturduktan sonra çıktıyı bir html dosyası olarak kaydedersiniz ve eğer böyle bir html dosyası varsa doğrduan bu dosyanın görüntülenmesini istersiniz. Böylece sayfa her istekte yeniden render edilmemiş olur.
Sözün özü, cache'leme mekanizmalarını araştırmalısınız. Eğer bir framework kullanıyorsanız (Codeigniter, Laravel... gibi) bu tip mekanizmalar zaten framework içinde mevcuttur ama birkaç düzenlemeyle aktive edilmesi gerekir.
Merhaba. Bu sayfadayken firebug console'u açıp aşağıdaki kodları yapıştırırsanız sizinkine benzer bir test ortamını bu sayfada oluşturabilirsiniz:
$("body").prepend(`<div id="test"></div>`);
const $test = $("body > #test");
$test.append(`
<style>
#test { display:flex; flex-direction:row; align-items:flex-start; justify-content:space-evenly; width:100vw; padding:0 10px; }
#test > div { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; flex:1; margin:10px; }
#test > div > button.fa-edit { margin:5px; padding:10px; border:none; background:#ccc; color:#000; width:100%; cursor:pointer; }
#test > div > div { width:100%; display:flex; flex-direction:column; padding:5px 0; }
#test > div > div > input.submit-form__input { border:1px solid #ccc; background:#fff; padding:10px 0; text-indent:10px; margin:5px 0; }
</style>
`);
$test.append(`<div><button class="fa fa-edit">Buton A</button></div>`);
$test.append(`<div><button class="fa fa-edit">Buton B</button></div>`);
$test.append(`<div><button class="fa fa-edit">Buton C</button></div>`);
$buttons = $test.find("> div > button.fa-edit");
$buttons.on("click", function() {
$(this).next("div").remove();
$(this).after("<div></div>");
$inputContainer = $(this).next("div");
$inputContainer.append(`<input type="text" class="submit-form__input" value="${$(this).text().replace("Buton","Değer")} 1" />`);
$inputContainer.append(`<input type="text" class="submit-form__input" value="${$(this).text().replace("Buton","Değer")} 2" />`);
$inputContainer.append(`<input type="text" class="submit-form__input" value="${$(this).text().replace("Buton","Değer")} 3" />`);
$inputContainer.append(`<input type="text" class="submit-form__input" value="${$(this).text().replace("Buton","Değer")} 4" />`);
});
Kodu çalıştırdığınızda sayfanın üstünde sizinkiyle aynı class'a sahip 3 buton belirecek ve butonlara tıklandığında da sizinkilerle aynı class'lara sahip 4 input oluşacak.
Sizdeki kodları böylece simule ettikten sonra sizin yazdığınız kodu async/await olmadan yazıp çalıştırdım:
const butonlar = document.getElementsByClassName('fa-edit');
function degistir() {
for (buton of butonlar) {
buton.click();
let inputlar = document.getElementsByClassName('submit-form__input');
inputlar[1].value = 'deneme';
}
}
degistir();
Sonuç olarak bütün butonlara basıldı ve input'lar oluştu ama sizde de olduğu gibi 2.input'a "deneme" yazmadı. Aynen sizin de düşündüğünüz gibi bir durum var. Aslında kodunuz doğru ama butona tıklandığında input'lar oluşturulması henüz tamamlanmadığı için input'u bulup değişiklik yapamıyordu.
Sonra sizin denediğiniz gibi async/await ile denedim:
const butonlar = document.getElementsByClassName('fa-edit');
async function degistir() {
for (buton of butonlar) {
await buton.click();
let inputlar = document.getElementsByClassName('submit-form__input');
inputlar[1].value = 'deneme';
}
}
degistir();
Böyle yapınca da tıpkı sizdeki gibi bir Promise döndü. Bu normal. Oluşturduğunuz fonksiyon async olduğu için Promise dönüyor. Promise sonucunu elde etmek için fonksiyonu çağırırken await kullanmalısınız. Böylece fonksiyonunuz içindeki await sonucu tamamlanmadan (butonlara tıklanma olayının işlemleri bitmeden) sonraki işlemlere geçmeyecektir.
Cevabı lüzumsuzca uzattıktan sonra :D aslında tek satırda verebileceğim cevap şu:
await degistir(); olarak deneyin.
PHP ile yapmanız mümkün.
stackoverflow.com'da şöyle bir başlık var:
url'den gelen bir görseli nasıl boyutlandırabilirim ve küçük boyutlu bir görsel yapabilirim?
Gelen cevapta şöyle söylenmiş:
PHP'nin imagecopyresamled işlevini kullanabilirsiniz. php.net'ten basit bir örnek:
<?php
// Dosya ve yeni boyut oranı
$dosya = 'https://www.gravatar.com/avatar/81b67dbba3bd3f9317db992d098d3fc0?s=80&d=mp&r=g';
$oran = 0.5;
// İçerik türü
header('Content-type: image/jpeg');
// Yeni resmin boyutları
list($genislik, $yukseklik) = getimagesize($dosya);
$yeniGenislik = $genislik * $oran;
$yeniYukseklik = $yukseklik * $oran;
// Görüntüleri yükleyelim
$hedef = imagecreatetruecolor($yeniGenislik, $yeniYukseklik);
$kaynak = imagecreatefromjpeg($dosya);
// Görüntüyü örnekleyelim
imagecopyresampled($hedef, $kaynak, 0, 0, 0, 0, $yeniGenislik, $yeniYukseklik, $genislik, $yukseklik);
// Görüntüyü çıktılayalım
imagejpeg($hedef, null, 100);
?>
Yani PHP tarafında API üzerinden aldığınız görselleri bu yöntemle yeniden boyutlandırabiliyorsunuz. Tabi burada tek bir görselin çıktısı basılmış ve bu php dosyasının jpeg dosyası gibi davranması için header atanmış.
Bu sayfaya url verisini GET parametresi olarak iletirseniz size görseliin %50 küçültülmüş halini jpeg formatında dönecektir. Yani kodları şöyle düzenleyebiliriz:
kucult.php
<?php
if(!isset($_GET["url"])) exit();
// Dosya ve yeni boyut oranı
$dosya = $_GET["url"];
$oran = 0.5;
// İçerik türü
header('Content-type: image/jpeg');
// Yeni resmin boyutları
list($genislik, $yukseklik) = getimagesize($dosya);
$yeniGenislik = $genislik * $oran;
$yeniYukseklik = $yukseklik * $oran;
// Görüntüleri yükleyelim
$hedef = imagecreatetruecolor($yeniGenislik, $yeniYukseklik);
$kaynak = imagecreatefromjpeg($dosya);
// Görüntüyü örnekleyelim
imagecopyresampled($hedef, $kaynak, 0, 0, 0, 0, $yeniGenislik, $yeniYukseklik, $genislik, $yukseklik);
// Görüntüyü çıktılayalım
imagejpeg($hedef, null, 100);
?>
Böylece bize, url'si verilen bir görseli %50 küçülten kendimize ait bir url'miz var.
Diyelim ki siz görsellerinizi şu şekilde gösteriyordunuz:
<img src="https://www.gravatar.com/avatar/81b67dbba3bd3f9317db992d098d3fc0?s=80&d=mp&r=g" />
<img src="https://www.gravatar.com/avatar/150c62d1d24332b2d2d39ac57ae902a0?s=80&d=mp&r=g" />
Artık böyle göstermesiniz:
<img src="kucult.php?url=https://www.gravatar.com/avatar/81b67dbba3bd3f9317db992d098d3fc0?s=80&d=mp&r=g" />
<img src="kucult.php?url=https://www.gravatar.com/avatar/150c62d1d24332b2d2d39ac57ae902a0?s=80&d=mp&r=g" />
Yani görselinizin url'sini, kucult.php sayfanıza url key'i ile get parametresi olarak göndermelisiniz.
Bu yöntem çok da kullanışlı olmayacaktır. Çok sayıda görsel için PHP'yi (yani sunucuyu) her seferinde yormuş olacaksınız.
Eğer bu görsellerin boyutlandırılmış hallerini sunucunuza kaydetme imkânınız varsa daha performanslı bir işlem yapmış olursunuz.
Aslında bu işi front-end tarafında çözmeniz çok daha verimli olacaktır. Görsellere bir lazyload işlemi uygulamalısınız. Görsel ekranda görünmüyorsa html'inizden (DOM'dan) kalkmalı ve böylece tarayıcı o görseli konumlandırmakla uğraşmamalı. Front-end tarafında hangi teknolojiyi (JQuery, React, Vue, Svelte, Angular...) kullandığınızı bilemiyorum ama hepsinde bir lazyload modülü/plugin'i bulabilirsiniz.
JQuery için lazyload örneği olarak Google'da arama yaptığımda karşıma şöyle bir örnek çıktı:
JQuery ile Lazy Load Kullanarak Image Yükleme