Canlı önizleme
Nasıl kullanılır?
Fotoğraf, video ve metinden Behance'e gömülebilir bir ızgara — beş dakikada.
1EkleDrive / YouTube linki, dosya adresi ya da metin bloğu.
2SıralaSürükle-bırak, satırları böl, tam genişlik ver.
3TasarlaYerleşim, boşluk, renk ve davranışları ayarla.
4YayınlaGoogle'a kur, Behance'e gömme kodunu yapıştır.
1 Öğeleri ekleyin
Soldaki Ekle adımında kutuya bir bağlantı yapıştırıp Gride ekle deyin. Grid, öğeleri eklediğiniz sırayla dizer ve her birini orijinal en-boy oranında gösterir; kırpma yapmaz.
- Google Drive: dosyaya sağ tık → Paylaş → “Bağlantıya sahip olan herkes – Görüntüleyici” → bağlantıyı kopyala. Paylaşım kapalıysa grid boş görünür.
- YouTube / Vimeo linki, doğrudan
.jpg .png .mp4adresi ya da hazır bir<iframe>gömme kodu da olur. - Drive bağlantısından dosyanın fotoğraf mı video mu olduğu anlaşılmaz — Tür alanından seçin.
- Videodan kare seç: bilgisayarınızdaki kopyadan istediğiniz saniyeyi kapak yapar; dosya hiçbir yere yüklenmez.
2 Sıralayın, satırları kurun
Öğeler adımında kartları sürükleyerek sıralarsınız; grid bu sırayı korur.
- Tam genişlik: öğe satırı tek başına kaplar.
- Yeni satır: o öğeden itibaren yeni satır başlar — Behance'teki gibi kompozisyon kurmanızı sağlar.
- Bağlantılar: medya ya da kapak adresini sonradan değiştirin; grid dizilimi bozulmaz.
- Oran: kapaktan otomatik ölçülür. Gerekirse 16:9, 1:1 gibi sabit bir oran seçebilirsiniz.
3 Metin blokları ekleyin
Metin bloğu ekle ile satır aralarına yazı koyabilirsiniz. Metin blokları her zaman tam genişlik kaplar; listede iki öğe arasına taşıyarak istediğiniz satırın arasına yerleştirirsiniz.
- Karışık kalınlık: yazının bir kısmını seçip Hafif · Normal · Orta · Yarı · Kalın · Ekstra düğmelerine basın. Aynı metnin yarısı kalın, yarısı ince olabilir. Sıfırla seçimi temel kalınlığa döndürür.
- Yazı tipi: Sistem, Inter, Poppins, Montserrat, DM Sans, Oswald, Bebas Neue, Playfair Display, Lora, Roboto Mono.
- Punto 1400 px tasarım genişliğine göredir; dar ekranda grid ile birlikte orantılı küçülür.
- Hizalama, satır aralığı, üst/alt boşluk ve renk ayrı ayrı ayarlanır.
4 Tasarımı ayarlayın
- Satırlar: Behance ızgarası gibi; öğeler aynı yükseklikte satırlara dizilir, genişlikleri oranlarına göre hesaplanır.
- Sütunlar: masonry düzeni.
- Boşluk ve köşe yarıçapı her ekranda orantılı ölçeklenir.
- Grid arka planı ve lightbox arka planı ayrı ayrı seçilir.
- Dar ekranda 2 sütuna düş kapalıyken grid mobilde orantılı küçülür ve Behance'te kaydırma çubuğu çıkmaz — önerilen ayar budur.
Gömme genişliği Behance'in içerik genişliğidir; 1400 px çoğu proje için doğrudur. İframe yüksekliği bu değere göre hesaplanır.
5 Google Apps Script kurulumu
Behance'in “Göm” modülü yalnızca onaylı sağlayıcıların iframe kodunu kabul eder; kendi barındırdığınız bir adresi reddeder. google.com adresleri kabul edildiği için gridi Google'ın ücretsiz Apps Script servisinde yayınlıyoruz. Kurulum bir kez yapılır, sonrasında yalnızca HTML'i güncellersiniz. Gereken: bir Google hesabı ve yaklaşık beş dakika.
Aşağıdaki görüntüler gerçek kurulumdan alınmıştır; hesap adresi ve dağıtım kimliği örnek değerlerle değiştirilmiştir.
1
Yeni proje açın ve adlandırın
script.google.com adresine gidin; boş bir proje açılır. Sol üstteki “Adsız proje” yazısına tıklayın, adını Medya Grid yapıp Yeniden adlandır deyin.
Ad yalnızca sizin içindir, yayını etkilemez.
2
Kod.gs içeriğini değiştirin
Kod alanında hazır gelen function myFunction() { } satırlarının tamamını silin (Ctrl+A → Delete) ve uygulamadaki Yayınla adımında bulunan “Bu kodu kopyala” düğmesiyle aldığınız kodu yapıştırın.
Bu kod iki iş yapar: adres …/exec ise index, …/exec?g=video ise video dosyasını açar; ayrıca sayfanın Behance içine gömülebilmesi için gereken izni verir.
3
Yeni bir HTML dosyası ekleyin
Sol paneldeki Dosyalar başlığının yanındaki + düğmesine basın ve açılan menüden HTML’i seçin — Komut Dosyası’nı değil.
4
Dosyaya
index adını verinDosya adını uzantısız yazın; Google .html kısmını kendisi ekler. Enter’a basınca dosya oluşur.
Dosya adı büyük/küçük harfe duyarlıdır: Index ile index aynı şey değildir.
5
Grid HTML’ini yapıştırın ve kaydedin
Açılan dosyada hazır gelen her şeyi silin, uygulamadaki “HTML’i kopyala” ile aldığınız grid kodunu yapıştırın ve Ctrl+S ile kaydedin. Üstte “Dosya kaydedildi” yazısını görmelisiniz.
Kaydetmeden dağıtırsanız yayına eski içerik çıkar.
6
Dağıt → Yeni dağıtım
Sağ üstteki mavi Dağıt düğmesine basın ve Yeni dağıtım’ı seçin.
7
Tür: Web uygulaması
Açılan pencerede sol üstteki dişli simgesine basıp Web uygulaması’nı seçin. Diğer türler (Çalıştırılabilir API, Eklenti, Kitaplık) işinize yaramaz.
8
Erişim ayarları — en kritik adım
Şu kullanıcı olarak çalıştır: Ben — grid sizin Drive dosyalarınızı gösterebilsin diye.
Erişimi olanlar: Herkes — Behance’i gezen kişilerin Google hesabı yoktur. “Yalnızca ben” ya da “Google hesabı olan herkes” seçilirse ızgara onlarda boş görünür.
9
Adresi kopyalayın
Dağıt’a bastığınızda dağıtım oluşur ve size bir Web uygulaması URL’si verilir; …/exec ile biter. Bu adresi uygulamadaki Yayınla adımına yapıştırın, ardından dosya adını (index ya da örn. video) yazın. Gerekirse ?g= ekini uygulama kendisi ekler.
Aynı adresi sonradan Dağıt → Dağıtımları yönet penceresinden de kopyalayabilirsiniz. Editörün üstündeki …/dev adresi yalnızca size çalışır; Behance’te boş görünür.
İzin ekranı çıkarsa: bu grid yalnızca HTML sunduğu için çoğu hesapta Google izin istemez ve dağıtım tek adımda biter. İstediği durumda ekran korkutucu görünse de kendi kodunuza izin veriyorsunuzdur: Yetkilendirmeyi incele → hesabınızı seçin → “Google bu uygulamayı doğrulamadı” ekranında Gelişmiş → “Medya Grid (güvenli değil) sayfasına git” → İzin ver. Hesap başına bir kez yapılır.
↻ Gridi güncellemek
Grid içeriğini değiştirdiğinizde yeni dağıtım oluşturmayın — yeni dağıtım yeni bir adres üretir ve Behance’teki kod eski gridi göstermeye devam eder. Mevcut dağıtıma yeni sürüm verin:
Apps Script’te index dosyasına yeni HTML’i yapıştırın → Ctrl+S → Dağıt → Dağıtımları yönet → sağ üstteki ✎ kalem → Sürüm: Yeni sürüm → Dağıt. Adres değişmez, Behance’teki koda dokunmanız gerekmez.
Yalnızca gridin yüksekliği değiştiyse (öğe eklediniz/çıkardınız, punto ya da satır düzeni değişti) Behance’teki gömme kodunu da yenileyin — iframe yüksekliği o kodun içinde yazılıdır.
+ Aynı projede birden fazla grid
Yeni grid için + → HTML ile yeni bir dosya açın (örn. video), o gridin HTML’ini içine yapıştırın ve yeni sürüm dağıtın. Uygulamada dosya adını yazdığınızda gömme kodu …/exec?g=video olarak çıkar. Kod.gs’e bir daha dokunmazsınız.
! Sık yapılan hatalar
- “Bu uygulamaya erişim yetkiniz yok” → dağıtımda Erişimi olanlar: Herkes seçilmemiş.
- Değişiklik yayına yansımıyor → kaydettiniz ama yeni sürüm dağıtmadınız.
- “Script function not found: doGet” → Kod.gs boş kalmış ya da kaydedilmemiş.
- Sayfa açılıyor ama grid boş → HTML dosya adı ile panele yazdığınız ad tutmuyor (harf duyarlı), ya da Drive paylaşımı kapalı.
- Behance kodu kabul etmiyor → adres
/execile bitmiyor;/devadresi çalışmaz.
i Bilmekte fayda var
- Yayınlanan sayfa bağlantıyı bilen herkese açıktır; gizli kalması gereken içerik koymayın.
- Google, kişisel hesapların web uygulamalarının altına ince bir “başka bir kullanıcı tarafından oluşturuldu” şeridi ekler.
- Apps Script ücretsizdir; bu kullanım günlük kotaların çok altındadır.
- Fotoğraf ve videolar Drive’da kalır — Apps Script yalnızca gridin HTML’ini sunar, dosya taşımaz.
6 Önizleyin ve test edin
Sağdaki sahne, Behance'teki iframe ile birebir aynı oranda çalışır. Alttaki çubuktan Tam · 1400 · 1000 · 600 · Mobil genişliklerini deneyin; üstteki rozet oluşacak iframe boyutunu ve öğe sayısını gösterir.
- Fotoğrafa tıklayınca lightbox, videoya tıklayınca oynatıcı açılır; ok tuşlarıyla gezinir, Esc ile kapatırsınız.
- Mobilde video önce tam ekran denenir; ortam izin vermiyorsa oynatıcı grid'in kendi içinde açılır — kullanıcı asla Drive'a atılmaz.
- Metin blokları tıklanmaz, lightbox sayacına da dahil edilmez.
Sık sorulanlar
Grid boş ya da kırık görünüyor
Neredeyse her zaman Drive paylaşımıdır: dosya “Bağlantıya sahip olan herkes – Görüntüleyici” olmalı. Kendi hesabınızda açılıyor olması yetmez.
Behance “Bu gömme kodu geçerli değil” diyor
Behance yalnızca onaylı sağlayıcıları kabul ediyor. Google (Apps Script) ve itch.io çalışır; CodePen ve kendi barındırdığınız adresler reddedilir.
Önizlemede YouTube videosu açılmıyor
Sayfayı bilgisayarınızdan file:// ile açtıysanız YouTube oynatıcıyı engeller (Hata 153). Netlify'daki adresten kullanın; Drive ve Vimeo her durumda çalışır.
Gridi değiştirdim, Behance'te eski hâli duruyor
Apps Script'te yeni HTML'i kaydettikten sonra yeni sürüm dağıtmayı unutmayın; dağıtım yapılmadan yayındaki sürüm değişmez.
Apps Script “Google bu uygulamayı doğrulamadı” diyor
Bu grid yalnızca HTML sunduğu için çoğu hesapta izin ekranı hiç çıkmaz. Çıkarsa kendi hesabınızda kendi kodunuza izin verdiğiniz için normaldir: Gelişmiş → “… (güvenli değil) sayfasına git” → İzin ver. Hesap başına bir kez yapılır.
Yeni dağıtım mı, yeni sürüm mü?
Güncellemede her zaman yeni sürüm: Dağıt → Dağıtımları yönet → kalem → Sürüm: Yeni sürüm → Dağıt. “Yeni dağıtım” yeni bir adres üretir; Behance'teki kod eski gridi göstermeye devam eder.
Çalışmamı nasıl saklarım?
Üst çubuktaki Kaydet ile projeyi .json olarak indirin, Proje yükle ile geri alın. Tarayıcı belleği temizlenirse kayıt dosyanız elinizde kalır.
Bu sayfayı üst çubuktaki Nasıl kullanılır? düğmesinden tekrar açabilirsiniz.