İçeriğe Yönlendir

Web Sitesi Editörüne Mobil Uyumlu Resim Yükleme


Nihat Palolu

Recommended Posts

Nihat Palolu

Web sitemi google sıralamalarında daha da üst sıralara çıkarmak için ürün açıklamalarının olduğu editör bölümüne resim yüklemeyi aşağıdaki gibi yaptım.

Bu resimleri bilgisayarda ürün açıklamasının sağına, tablet ve telefonda ise ürün açıklamasının altına gelecek şekilde yapamadım.

 

Yapamayınca resim boyutlarını 350x350 yapıp yükledim. Şu an bilgisyarda, tablette ve telefonda ürün açıklamalarının altına geliyor.

Bilgisyarda sağa gelsin, tablet ve telefonda ise alta gelsin hem de ortalansın istiyorum.

 

Bilenler yardımcı olabilir mi?

 

Şu an kullandığım bu;

 

<table class="image-table">
    <tbody>
        <tr>
            <td><img alt="deneme" src="UserFiles/Image/images/denme.jpg" title="deneme" /></td>
        </tr>
    </tbody>
</table>

Yorum bağlantısı
Harun Kocaçalışkan

Siteniz herhangi bir CSS Framework'u kullanıyor mu? (Bootstrap vs.)

  • Beğen 2
Yorum bağlantısı
Selim Bilgin

Sayfa linki var mı?

Bu şekilde table içine koymak doğru değil ama doğrusunu söylemek için kodu görmek lazım.

  • Beğen 1
Yorum bağlantısı
Nihat Palolu
Harun Kocaçalışkan yazdı:

Siteniz herhangi bir CSS Framework'u kullanıyor mu? (Bootstrap vs.)

 

İnanın hiç bilmiyorum, anlamıyorum yani :)

Selim Bilgin yazdı:

Sayfa linki var mı?

Bu şekilde table içine koymak doğru değil ama doğrusunu söylemek için kodu görmek lazım.

 

Örnek link vereyim :)

 

Link

Yorum bağlantısı
Selim Bilgin

Örnek olmaz, birebir site lazım. :) 

 çünkü bahsettiğiniz şekilde yapmak için responsive bi kod yazmak lazım, bootstrap vs. varsa kolay da yoksa css de yazmak lazım. Buradan yazılacak iki satır ile olacak bir şey değil yani. :) 

  • Beğen 1
Yorum bağlantısı
Mehmet Göktürk

table komutu malesef internet explorer icat edilince microsoftun bilmemneliği (siz doldurun orayı) yüzünden çalışmaz hale getirildi.

 

Sizin bu durumda elle yazıyorsanız Div kullanmanız gerekir.

 

responsive kod yazmak için javascript ile windowwidth felan bunları okuyup karar almanız gerek javascript içinde. Tüfek icat oldu mertlik bozuldu. Aslında Orjinal mozilla netscape sorunsuz çalışıyordu. table da gayet güzeldi.

  • Beğen 1
Yorum bağlantısı
Selim Bilgin

Modern css frameworkleri sıfır JS ile responsive'i çok güzel kotarıyor. Basit bir grid yapısıyla çok rahat yapılır Nihat Bey'in isteği. Ama yine kod bilmek lazım tabi yapmak için.

  • Beğen 1
Yorum bağlantısı
Nihat Palolu
Selim Bilgin yazdı:

Örnek olmaz, birebir site lazım. :) 

 çünkü bahsettiğiniz şekilde yapmak için responsive bi kod yazmak lazım, bootstrap vs. varsa kolay da yoksa css de yazmak lazım. Buradan yazılacak iki satır ile olacak bir şey değil yani. :) 

 

Birebir site verdiğim linkteki site, hatta o sitenin 5-6 sene önceki versiyonunda yanyana resim yükleme kodunu foruma sormuştum siz kısa bir kod vermiştiniz bana.

Yorum bağlantısı
Nihat Palolu
Mehmet Göktürk yazdı:

table komutu malesef internet explorer icat edilince microsoftun bilmemneliği (siz doldurun orayı) yüzünden çalışmaz hale getirildi.

 

Sizin bu durumda elle yazıyorsanız Div kullanmanız gerekir.

 

responsive kod yazmak için javascript ile windowwidth felan bunları okuyup karar almanız gerek javascript içinde. Tüfek icat oldu mertlik bozuldu. Aslında Orjinal mozilla netscape sorunsuz çalışıyordu. table da gayet güzeldi.

 

Hocam inanın terimlerin ne olduğunu bile bilmiyorum.

Kod ile ilgili tek aklımda kalan 89'da commodore 64'ü tv'ye bağlayıp bir sayfa kod yazıp ekran rengi değiştirmek veya birkaç nota çalmak :)

Yorum bağlantısı
Mehmet Göktürk
Nihat Palolu yazdı:

 

Hocam inanın terimlerin ne olduğunu bile bilmiyorum.

Kod ile ilgili tek aklımda kalan 89'da commodore 64'ü tv'ye bağlayıp bir sayfa kod yazıp ekran rengi değiştirmek veya birkaç nota çalmak :)

poke yapar dururdun demek

  • Beğen 1
Yorum bağlantısı
Ali Darbaz
(düzenlendi)
Nihat Palolu yazdı:

 

Hocam inanın terimlerin ne olduğunu bile bilmiyorum.

Kod ile ilgili tek aklımda kalan 89'da commodore 64'ü tv'ye bağlayıp bir sayfa kod yazıp ekran rengi değiştirmek veya birkaç nota çalmak :)

 

Kacher demi çalışıyorsunuz. Bir ara yutuberler kacher testleri yapmaya başlamıştı. İlk ozaman tanıdım kacher firmasını. Sinan Koç kacher ile motorsiklet yıkıyordu.  bende o video ile tanımıştım.  Bu aralar insanlar evlerinden çıkamıyor. Otoparklarında vakit geçirmek için araba yıkıyorlar. Bence yeniden bir sosyal medya ( yutube instagram vs) üzerinden Kacher reklamı yapılsa hiç fena olmazdı. Çünkü basınçlı suya araba götüremiyoruz maalesef :D

tarihinde Ali Darbaz tarafından düzenlendi
  • Beğen 1
Yorum bağlantısı
Selim Bilgin
Nihat Palolu yazdı:

 

Birebir site verdiğim linkteki site, hatta o sitenin 5-6 sene önceki versiyonunda yanyana resim yükleme kodunu foruma sormuştum siz kısa bir kod vermiştiniz bana.

 

Pardon ben örnek deyince başka site sandım. Sanki ben de hatırladım öyle bir şey. :)

Bootstrap var sayfada, yani şu örnekteki gibi yapabilirsiniz. 3 ve 9 değerini toplam 12 olacak şekilde değiştirerek sağ ve sol kolonların oranını ayarlayabilirsiniz. Mobilde alt alta geleceklerdir.

 

https://gist.github.com/ysb/ab960047d09d7bab1fa273e3661c78fc

  • Beğen 1
Yorum bağlantısı
Nihat Palolu
Selim Bilgin yazdı:

 

Pardon ben örnek deyince başka site sandım. Sanki ben de hatırladım öyle bir şey. :)

Bootstrap var sayfada, yani şu örnekteki gibi yapabilirsiniz. 3 ve 9 değerini toplam 12 olacak şekilde değiştirerek sağ ve sol kolonların oranını ayarlayabilirsiniz. Mobilde alt alta geleceklerdir.

 

https://gist.github.com/ysb/ab960047d09d7bab1fa273e3661c78fc

 

Buradan kopyalayıp değiştirmeden direkt yapıştırdım.

 

Bilgisayarda; resmi küçültüp sola yasladı, açıklamayı resmin sağına aldı.

Mobilde; resim üste açıklama alta geldi. Resmin boyutu aynı kaldı.

 

Rakamların toplamı 12'yi geçmeyecek şekilde deneyip istediğim şekli bulacağım yani, doğrumu?

Yorum bağlantısı
Nihat Palolu
Ali Darbaz yazdı:

 

Kacher demi çalışıyorsunuz. Bir ara yutuberler kacher testleri yapmaya başlamıştı. İlk ozaman tanıdım kacher firmasını. Sinan Koç kacher ile motorsiklet yıkıyordu.  bende o video ile tanımıştım.  Bu aralar insanlar evlerinden çıkamıyor. Otoparklarında vakit geçirmek için araba yıkıyorlar. Bence yeniden bir sosyal medya ( yutube instagram vs) üzerinden Kacher reklamı yapılsa hiç fena olmazdı. Çünkü basınçlı suya araba götüremiyoruz maalesef :D

 

Yok, karcher'de çalışmıyorum. Yetkili servisiyim. Reklam yapıyorlar. O yutuberlar önce kullanma kılavuzlarını okusunlar :)

Yorum bağlantısı
Selim Bilgin
Nihat Palolu yazdı:

 

Buradan kopyalayıp değiştirmeden direkt yapıştırdım.

 

Bilgisayarda; resmi küçültüp sola yasladı, açıklamayı resmin sağına aldı.

Mobilde; resim üste açıklama alta geldi. Resmin boyutu aynı kaldı.

 

Rakamların toplamı 12'yi geçmeyecek şekilde deneyip istediğim şekli bulacağım yani, doğrumu?

 

Evet.

Açıklama üstte olmasını istiyorsanız açıklamayı üste alın kodda. Ama masaüstünde de solda olacaktır bu sefer. 

Mobilde farklı sıralama yapmak da mümkün de o çok karıştırır olayı.

  • Beğen 1
Yorum bağlantısı
Nihat Palolu
Selim Bilgin yazdı:

 

Evet.

Açıklama üstte olmasını istiyorsanız açıklamayı üste alın kodda. Ama masaüstünde de solda olacaktır bu sefer. 

Mobilde farklı sıralama yapmak da mümkün de o çok karıştırır olayı.

 

Rakamları 6-6 yaptım güzel odu. Açıklamayı üste alamadım, yarın çalışayım biraz, yapamazsam yazarım. Teşekkür ederim.

  • Teşekkür 1
Yorum bağlantısı
  • 1 ay sonra...
Osman Karasu
(düzenlendi)
Nihat Palolu yazdı:

Web sitemi google sıralamalarında daha da üst sıralara çıkarmak için ürün açıklamalarının olduğu editör bölümüne resim yüklemeyi aşağıdaki gibi yaptım.

Bu resimleri bilgisayarda ürün açıklamasının sağına, tablet ve telefonda ise ürün açıklamasının altına gelecek şekilde yapamadım.

 

Yapamayınca resim boyutlarını 350x350 yapıp yükledim. Şu an bilgisyarda, tablette ve telefonda ürün açıklamalarının altına geliyor.

Bilgisyarda sağa gelsin, tablet ve telefonda ise alta gelsin hem de ortalansın istiyorum.

 

Bilenler yardımcı olabilir mi?

 

Şu an kullandığım bu;

 

<table class="image-table">
    <tbody>
        <tr>
            <td><img alt="deneme" src="UserFiles/Image/images/denme.jpg" title="deneme" /></td>
        </tr>
    </tbody>
</table>

 

Bu durum tamamen css ile alakalı bir durum.Eğer web siteniz responsive (mobil ve tablet uyumlu) ise; css yardımı ile istediğiniz gibi düzenleyebilirsiniz.Ayrıca boostrap.css dosyası içerisinde responsive tablo için tanımlar mevcuttur ama kafanız karışabilir biraz araştırma yapmanızı tavsiye ederim.Responsive olduğunu varsayıyorum ve web dosyalarınızın olduğu bölümde büyük ihtimalle css adında bir klasör içerisinde de genellikle responsive.css adında bir css dosyası vardır.

Bu dosyanın içerisinde belli ölçülere göre kodlamalar vardır.

Eğer ilgili sayfadaki resimlerle ilgili bir tanımlama yapılmamış ise; bunu kendiniz oluşturmalısınız.Aşağıda birden farklı yöntem örnek olarak gösterilmiştir siz kolayınıza geleni yapabilirsiniz.

Son olarak gösterilecek resim en büyük olarak hangi ölçülerde gösterilecek ise; orjinal boyutları o ölçülerde olmalı ki; sistem piksel geçişlerinde istenilen ölçüleri resim içinde bulup gösterime sunabilsin.

 

        

<table class="image-table table-responsive">
    <tbody>
    <tr>
        <td>

            <div class="col-lg-4 col-md-6 col-sm-12">

                <img  src="UserFiles/Image/images/denme.jpg" title="deneme" alt="deneme" />

            </div>

            <div class="col-lg-8 col-md-6 col-sm-12">

                <p> Buraya ürün açıklaması gelecek</p>

            </div>

        </td>
    </tr>
    </tbody>
</table>

 

Normal şartlarda sadece resim ve ürün açıklamasını div içine alıp çözünürlük çerçevesi içine almanız sorunu çözecektir.Fakat image-table classı kararlı css yapısındaysa yukarıdaki çerçeveler işlevini görmesine rağmen istediğiniz düzgünlükte görünüm elde edemeyebilirsiniz.İstediğiniz gibi olmadığı takdirde aşağıdaki örnek kodlardan yola çıkarak nokta atışı yapıp istediğiniz çözünürlükte  istediğiniz ölçülerde istediğiniz gibi alt alta gösterebilirsiniz.

 

 

@media (min-width: 300px) and (max-width: 500px) {

   .image-table .imgs {
            min-width: 290px !important;
            max-width: 300px !important;
            height: auto;
            min-height: 147px !important;
            max-height: 150px !important;
            float: none;

            text-align : center !important;
            object-fit: fill;

           margin-bottom:20px;
        }

 .image-table .products-label{

        float: none;

        text-align : center !important;

}

}

@media (min-width: 768px) and (max-width: 991px) {

   .image-table .imgs {
            min-width: 290px !important;
            max-width: 300px !important;
            height: auto;
            min-height: 147px !important;
            max-height: 150px !important;
            float: none;

            text-align : center !important;
            object-fit: fill;

           margin-bottom:20px;
        }

 .image-table .products-label{

        float: none;

        text-align : center !important;

}

}

@media (min-width: 992px) and (max-width: 1199px) {

   .image-table .imgs {
            min-width: 350px !important;
            max-width: 360px !important;
            height: auto;
            min-height: 247px !important;
            max-height: 250px !important;
            float: none;

            text-align : right !important;
            object-fit: fill;
        }

 .image-table .products-label{

        float: none;

        text-align : left !important;

}

}

 

<table class="image-table table-responsive-lg">
    <tbody>
    <tr>
        <td>

            <div class="col-lg-4 col-md-6 col-sm-12">

                <img class="imgs"  src="UserFiles/Image/images/denme.jpg" title="deneme" alt="deneme" />

            </div>

            <div class="col-lg-8 col-md-6 col-sm-12">

                <p class="products-label"> Buraya ürün açıklaması gelecek</p>

            </div>

        </td>
    </tr>
    </tbody>
</table>

 

tarihinde Osman Karasu tarafından düzenlendi
  • Beğen 2
Yorum bağlantısı
  • Konuyu Görüntüleyenler   0 kullanıcı

    Sayfayı görüntüleyen kayıtlı kullanıcı bulunmuyor.

×
×
  • Yeni Oluştur...