Arkadaşlar merhaba, hazır bir template ile bir site hazırlıyorum. Fakat bir noktada tıkandım.

Daha Basit Bir Anlatım yapmak gerekirse, https://bootsnipp.com/snippets/4Myjm buradaki görünümü php ile nasıl çağırabilirim? Farklı gridler'den oluşuyor.


Siteye "Bizden Haberler" kısmı ekleyeceğim. Hazır template'nin bir bölümünü bu alana kullanmak istiyorum. Veritabanına eklediğim içerikleri çekebiliyorum bir problem yok. Fakat ekran görüntüsünde gördüğünüz hali ile nasıl listeleyeceğimi bilemedim. Ekran görüntüsünde gördüğünüz ilk fotoğraf "futbol takımı" ben panelden ekledim fakat tüm ekleyeceklerim o şekilde görünecek. Ama ben templatede olduğu gibi büyüklü küçüklü görünmesini istiyorum. Fakat boyutlandırmalar için farklı Div alanları kullanılmış. Kodlarım şu şekilde;

<section class="ls page_portfolio section_padding_top_110 columns_padding_0">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
            
                <div class="isotope_container isotope row masonry-layout">

                        <?php
$pop = mysql_query("SELECT * FROM `urunler` order by id desc limit 10");
$p = 0;
$po = mysql_num_rows($pop);
if($po=="0"){ echo '<li>Galeri bulunamadı!</li>';
}else{
while($p < $po)
{
$resim = mysql_result($pop,$p,"resimyolu");
$baslik = mysql_result($pop,$p,"baslik");
$sefurl = mysql_result($pop,$p,"sefurl");
?>    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="<?=$site->siteurl;?>/<?php echo $resim; ?>" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="<?=$site->siteurl;?>/galeri-<?php echo $sefurl; ?>.html"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="<?=$site->siteurl;?>/galeri-<?php echo $sefurl; ?>.html"><?php echo $baslik; ?></a>
                                </h4>
                            </div>
                        </div>
                    </div>
<?php
$p++;
} }
?>

                    <div class="isotope-item margin_0 col-lg-4 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery2.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery2.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery3.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery3.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery4.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery4.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery5.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery5.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery6.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery6.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery14.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery14.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery8.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery8.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery9.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery9.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-4 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery15.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery15.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery11.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery11.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                    <div class="isotope-item margin_0 col-lg-2 col-md-4 col-sm-6">
                        <div class="vertical-item gallery-item content-absolute text-center cs">
                            <div class="item-media">
                                <img src="imagesgallery12.jpeg" alt="">
                                <div class="media-links">
                                    <div class="links-wrap">
                                        <a class="p-view prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="imagesgallery12.jpeg"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="item-content darken_gradient">
                                <h4 class="item-meta greylinks">
                                    <a href="gallery-single.html">Consetetur sadipscing elitr, sed diam nonumy</a>
                                </h4>
                            </div>
                        </div>
                    </div>

                </div><!-- eof .isotope_container.row -->



            </div>
        </div>
    </div>
</section>