# Header’da Dinamik Logo – Detaylı Rehber (TYPO3 v13)

Bu belge **yalnızca TYPO3 v13** (13.4.x) için yazılmıştır. Header logosunun backend (panel) üzerinden nasıl yönetildiğini, v13’e özgü PAGEVIEW, Sets ve DataProcessor yapısını ve tüm ilgili dosyaları adım adım açıklar.

---

## İçindekiler

1. [Genel Bakış](#1-genel-bakış)
2. [Ön Koşullar ve Kavramlar](#2-ön-koşullar-ve-kavramlar)
3. [Kullanıcı Rehberi – Logo Ekleme / Değiştirme](#3-kullanıcı-rehberi--logo-ekleme--değiştirme)
4. [Mimari ve Veri Akışı](#4-mimari-ve-veri-akışı)
5. [Dosya Referansı](#5-dosya-referansı)
6. [Teknik Detaylar](#6-teknik-detaylar)
7. [Sorun Giderme ve SSS](#7-sorun-giderme-ve-sss)

---

## 1. Genel Bakış

### 1.1 Amaç

- Header’daki logo, **sabit bir dosya yolu** yerine **panelden yönetilebilir** hale getirilir.
- İki kaynak desteklenir:
  - **Ana sayfa (kök sayfa) Resources:** Kullanıcı dosya yükler veya medyadan seçer → **önerilen**.
  - **Constants / settings:** Varsayılan veya yedek logo **yolu** (örn. `/assets/images/logo/logo.svg`).

### 1.2 Öncelik Sırası

| Sıra | Kaynak | Açıklama |
|------|--------|----------|
| 1 | Ana sayfa Resources (media) | Kök sayfanın “Kaynaklar” sekmesindeki **ilk dosya** (FAL). Varsa header’da bu kullanılır. |
| 2 | `site.logo` (settings/Constants) | TypoScript/Constants ile verilen **yol** (string). Resources’ta dosya yoksa kullanılır. |
| 3 | Varsayılan (fallback) | Kodda sabit: `/assets/images/logo/logo.svg`. Hiçbiri tanımlı değilse bu gösterilir. |

### 1.3 Kısa Özet

- **Kullanıcı:** Web > Page → Ana sayfa (Home) → Düzenle → **Resources** → Files/Media’ya logo ekler → kaydeder. Eklenen ilk dosya header’da logo olur.
- **Geliştirici:** `RootPageLogoProcessor` kök sayfanın `media` alanını okur; `Services.yaml` ile DataProcessor olarak kayıtlıdır; TypoScript’te `root-page-logo` ile PAGEVIEW’a bağlanır. Layout, `headerLogo` ve `logo` değişkenlerini Header partial’ına geçirir; Header önce `headerLogo`, yoksa `logo`, yoksa fallback kullanır.

---

## 2. Ön Koşullar ve Kavramlar

### 2.1 TYPO3 Sürümü

- **TYPO3 v13** (test edilen: 13.4.x). Bu rehberde anlatılan yapı (PAGEVIEW, Sets, settings.yaml, root-page-logo DataProcessor) v13’e özgüdür.
- v12 veya daha eski sürümlerde PAGEVIEW yerine FLUIDTEMPLATE ve ayrı constants.typoscript kullanılır; uyarlama gerekir.

### 2.2 Kullanılan TYPO3 Bileşenleri

- **PAGEVIEW:** Sayfa çıktısını Fluid şablonlarla üretir; `dataProcessing` ile veri hazırlar.
- **DataProcessor:** Ham veriyi işleyip Fluid’e değişken olarak verir (örn. menü, dosyalar). Bizim eklediğimiz: **RootPageLogoProcessor** (identifier: `root-page-logo`).
- **FAL (File Abstraction Layer):** Sayfa “Resources” (media) alanı sys_file_reference ile dosyalara bağlanır; Fluid’de `f:image` ile kullanılır.
- **Site set / settings.yaml:** Site paketindeki varsayılan ayarlar (Constants ağacına dönüşür); `site.logo` burada tanımlanır.

### 2.3 Terimler

- **Kök sayfa (root page):** Sitenin en üst sayfası (Site Management > Sites’ta “Root Page” olarak atanmış; genelde “Home”). UID’si `site.getRootPageId()` ile alınır.
- **Resources / Media:** Sayfa düzenleme formunda “Resources” sekmesi, “Files” bölümü, “Media” alanı — TCA’da `pages.media` (FAL).
- **headerLogo:** Fluid’e geçen FAL dosya nesnesi (FileReference); kök sayfa media’nın ilk elemanı.
- **logo:** Fluid’e geçen string (dosya yolu); `settings.site.logo` kaynaklı.

---

## 3. Kullanıcı Rehberi – Logo Ekleme / Değiştirme

### 3.1 Yöntem A: Ana Sayfa Resources (Dosya Yükleme / Medya Seçimi)

Bu yöntemde kullanıcı doğrudan dosya ekler; logo otomatik olarak header’da görünür.

**Adımlar (TYPO3 v13 Backend):**

1. Backend’de **Web** modülüne girin; sol menüden **Page** (Sayfa) seçin.
2. Sayfa ağacında **Ana sayfayı (Home)** seçin (sitenin en üstündeki sayfa).
3. Üst araç çubuğundan **Düzenle (Edit)** ile sayfayı açın.
4. Sekmelerden **Resources**’a tıklayın.
5. **Files** bölümünde **Media** altında:
   - **Select & upload files:** Bilgisayardan logo dosyası (PNG, SVG, JPG vb.) yükleyin.
   - **Create new relation:** Filelist’ten mevcut bir dosyayı seçin.
   - **Add media by URL:** Harici bir URL’den medya ekleyin.
6. Eklenen dosya listede **ilk sırada** olsun (header’da kullanılan logo bu dosyadır). Sırayı sürükleyerek değiştirebilirsiniz.
7. **Save** ile kaydedin.
8. Frontend’i yenileyin; logo header’da görünür.

**Notlar:**

- Birden fazla dosya eklenebilir; sadece **ilk** dosya logo olarak kullanılır.
- Alternatif metin (alt text) ve diğer metadata, Resources alanındaki her dosya için ayrı ayrı düzenlenebilir; `f:image` varsayılan olarak “Logo” alt metnini kullanır (Header partial’da `alt="Logo"`).

### 3.2 Yöntem B: Site Settings ile Logo Yolu (Yedek / Varsayılan Yol)

Resources’ta dosya yoksa veya sadece bir yol vermek istiyorsanız, **Site Management > Settings** üzerinden site ayarlarında logo yolu (`site.logo`) verilebilir.

**Adımlar (TYPO3 v13):**

1. **Site Management > Settings** modülüne gidin.
2. **Edit site settings** (Site ayarlarını düzenle) ile ayarları açın.
3. Logo yolu için ilgili alanı doldurun (formda “Logo” / `site.logo` veya site ayarlarına karşılık gelen alan). Örnek: `/fileadmin/logo/benim-logom.svg` veya `/assets/images/logo/logo.svg`
4. Kaydedin; gerekirse **Flush TYPO3 and PHP cache** çalıştırın.

**Öncelik:** Ana sayfa Resources’ta en az bir dosya varsa header’da o kullanılır; `site.logo` yalnızca Resources boşsa (veya DataProcessor dosya döndürmüyorsa) devreye girer.

### 3.3 Logo Kaldırma / Varsayılana Dönme

- **Resources’taki dosyayı kaldırın:** Ana sayfa → Düzenle → Resources → ilgili dosyayı silin → Save. Header, `site.logo` varsa onu, yoksa fallback’i kullanır.
- **Site ayarlarındaki yolu kaldırın:** Site Management > Settings → Edit site settings içinde logo alanını boş bırakın veya silin. Resources’ta dosya yoksa fallback (`/assets/images/logo/logo.svg`) kullanılır.

---

## 4. Mimari ve Veri Akışı

### 4.1 Genel Akış (Şema)

```
┌─────────────────────────────────────────────────────────────────────────────┐
│ 1. İstek (Frontend)                                                          │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 2. PAGEVIEW (TypoScript: page.10)                                            │
│    - dataProcessing çalıştırılır                                             │
│    - 5 = root-page-logo  →  headerLogo (FAL veya null)                       │
│    - 10 = files, 20 = menu, 30 = page-content, ...                            │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 3. RootPageLogoProcessor                                                      │
│    - Site’tan rootPageId alınır                                               │
│    - Root line’dan kök sayfa kaydı bulunur                                    │
│    - FileCollector: pages.media → ilk dosya                                    │
│    - processedData['headerLogo'] = ilk dosya veya null                        │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 4. Layout (Default.html)                                                      │
│    - Header’a arguments: mainnavigation, logo (settings.site.logo),          │
│      headerLogo (processor çıktısı)                                          │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 5. Header Partial                                                             │
│    - headerLogo var mı? → f:image image="{headerLogo}"                       │
│    - logo (yol) var mı? → <img src="{logo}">                                  │
│    - Hiçbiri yok   → <img src="/assets/images/logo/logo.svg">                  │
└─────────────────────────────────────────────────────────────────────────────┘
```

### 4.2 Settings / Constants Kaynağı

- **settings.site.logo:** Set’teki `settings.yaml` içinde `site.logo` olarak tanımlanır; site ayarlarına dönüşür ve Fluid’de `settings.site.logo` olarak okunur.
- Panelden **Site Management > Settings** → Edit site settings ile bu değer düzenlenir. (v13’te TypoScript modülünde “Constant Editor” yerine Site Settings’e yönlendirme çıkar.)

---

## 5. Dosya Referansı

Aşağıdaki dosyalar dinamik header logo özelliği için kullanılır. Proje kökü: `packages/testproject/` (veya sizin site paketi adınız).

| Dosya | Amaç |
|-------|------|
| `Classes/DataProcessing/RootPageLogoProcessor.php` | Kök sayfa media’dan ilk dosyayı alıp view’a `headerLogo` olarak verir. |
| `Configuration/Services.yaml` | RootPageLogoProcessor’ı `data.processor` tag’i ve `root-page-logo` identifier ile kaydeder. |
| `Configuration/Sets/SitePackage/settings.yaml` | Varsayılan logo yolu: `site.logo`. |
| `Configuration/Sets/SitePackage/TypoScript/page.typoscript` | PAGEVIEW içinde `dataProcessing.5 = root-page-logo`, `5.as = headerLogo` tanımı. |
| `Resources/Private/PageView/Layouts/Default.html` | Header partial’ına `logo` ve `headerLogo` argümanlarını geçirir. |
| `Resources/Private/PageView/Partials/Header.html` | Logo gösterim mantığı: headerLogo → logo (yol) → fallback. |

---

## 6. Teknik Detaylar

### 6.1 RootPageLogoProcessor.php

**Tam yol:** `packages/testproject/Classes/DataProcessing/RootPageLogoProcessor.php`

**Sorumluluklar:**

- `DataProcessorInterface` implemente eder; TYPO3 frontend’in DataProcessor zincirinde çalışır.
- Request’ten `site` ve `frontend.page.information` alır.
- `site->getRootPageId()` ile kök sayfa UID’sini alır.
- `pageInformation->getLocalRootLine()` ile root line alınır; bu dizide `uid === rootPageId` olan kayıt kök sayfa kaydıdır.
- `FileCollector::addFilesFromRelation('pages', 'media', $rootPageRecord)` ile kök sayfanın `media` (FAL) alanındaki dosyalar toplanır.
- Toplanan dosyaların ilki `$files[0]` alınır; yoksa `null`. Bu değer `processorConfiguration['as']` ile belirtilen değişkene (varsayılan: `headerLogo`) yazılır.

**Önemli noktalar:**

- `if.` konfigürasyonu desteklenir: `processorConfiguration['if.']` varsa `$cObj->checkIf()` ile kontrol edilir; false ise işlem yapılmaz.
- Kök sayfa root line’da bulunamazsa (örn. mount point senaryosu) processor hiçbir şey eklemez; `headerLogo` atanmaz, Layout’taki mevcut `headerLogo` (yoksa null) kullanılır.

### 6.2 Services.yaml

**Tam yol:** `packages/testproject/Configuration/Services.yaml`

**Örnek içerik:**

```yaml
services:
  _defaults:
    autowire: true
    autoconfigure: true

  Gfdhfhgfgg\Testproject\DataProcessing\RootPageLogoProcessor:
    tags:
      - { name: 'data.processor', identifier: 'root-page-logo' }
```

- **Tag `data.processor`:** Bu sınıfı TYPO3’ün DataProcessor registry’sine ekler.
- **identifier `root-page-logo`:** TypoScript’te `dataProcessing.5 = root-page-logo` yazıldığında bu sınıf çağrılır. Namespace/ sınıf adı yerine identifier kullanılır.

### 6.3 settings.yaml (Site Set)

**Tam yol:** `packages/testproject/Configuration/Sets/SitePackage/settings.yaml`

**Logo ile ilgili kısım:**

```yaml
# Logo: Header'da kullanılır. Panelden değiştirmek için: Site Management > Settings → Edit site settings.
site:
  logo: '/assets/images/logo/logo.svg'
```

- Bu yapı site ayarlarına dönüşür; Fluid tarafında `settings.site.logo` olarak erişilir.
- **Site Management > Settings** ile `site.logo` panelden düzenlenebilir.

### 6.4 TypoScript (PAGEVIEW dataProcessing)

**Dosya:** `Configuration/Sets/SitePackage/TypoScript/page.typoscript`

**İlgili blok:**

```typoscript
10 = PAGEVIEW
10 {
    paths { ... }
    dataProcessing {
        5 = root-page-logo
        5.as = headerLogo
        10 = files
        ...
    }
}
```

- **5 = root-page-logo:** `root-page-logo` identifier’lı DataProcessor’ı (RootPageLogoProcessor) çalıştırır.
- **5.as = headerLogo:** Processor’ın ürettiği değer (ilk FAL dosyası veya null) view’da `headerLogo` değişkeni olarak kullanılır.

### 6.5 Layout (Default.html)

**Dosya:** `Resources/Private/PageView/Layouts/Default.html`

**İlgili satır:**

```html
<f:render partial="Header" arguments="{mainnavigation: mainnavigation, logo: settings.site.logo, headerLogo: headerLogo}" />
```

- **logo:** Constants/settings’ten gelen yol string’i.
- **headerLogo:** RootPageLogoProcessor’dan gelen FAL nesnesi veya null. Değişken adı TypoScript’teki `5.as` ile aynı olmalıdır.

### 6.6 Header Partial (Logo Gösterimi)

**Dosya:** `Resources/Private/PageView/Partials/Header.html`

**Mantık (özet):**

1. `{headerLogo}` doluysa: `<f:image image="{headerLogo}" alt="Logo" />` — FAL ile render.
2. Değilse `{logo}` (yol) doluysa: `<img src="{logo}" alt="Logo" />`.
3. İkisi de boşsa: `<img src="/assets/images/logo/logo.svg" alt="Logo" />`.

Bu blok hem masaüstü hem mobil logo linkleri için (ör. `nav-img` ve `lg:hidden` içinde) tekrarlanır; her iki yerde de aynı öncelik sırası uygulanır.

---

## 7. Sorun Giderme ve SSS

### Logo görünmüyor

- **Kök sayfa doğru mu?** Site Management > Sites’ta ilgili sitenin “Root Page” alanı, logo eklediğiniz sayfayı göstermeli.
- **Resources’ta dosya var mı?** Ana sayfa → Düzenle → Resources → Media’da en az bir dosya olmalı ve **ilk sırada** olan logo olarak kullanılır.
- **Cache:** Backend’de “Flush TYPO3 and PHP cache” deneyin; frontend’de tarayıcı önbelleğini veya CDN’i temizleyin.
- **Site ayarları:** Sadece yol kullanıyorsanız Site Management > Settings’te `site.logo` doğru ve erişilebilir bir path mi kontrol edin (örn. `/fileadmin/...` veya `/assets/...`).

### Logo eski dosyayı gösteriyor

- Resources’ta sırayı değiştirdiyseniz, **ilk** dosya kullanılır. Yeni logoyu en üste taşıyın veya eski dosyayı kaldırın.
- Cache’i temizleyin.

### FAL / f:image hatası

- `headerLogo` gerçekten bir `FileReference` / `File` nesnesi mi kontrol edin. Başka bir processor veya override aynı değişken adını (örn. `headerLogo`) string olarak atıyorsa `f:image` hata verebilir; bu durumda öncelik sırası veya değişken adları gözden geçirilmeli.

### Farklı dillerde farklı logo

- Bu dokümandaki yapı tek bir kök sayfa ve tek bir “ilk dosya” kullanır. Dil bazlı logo için ya kök sayfanın dil overlay’indeki `media` alanı kullanılır (TYPO3 dil overlay’i media’yı destekliyorsa) ya da processor genişletilip mevcut dil bilgisine göre farklı bir sayfa/alan okunabilir; bu ayrı bir geliştirme konusudur.

### Başka bir sayfanın medyasını logo yapmak

- Varsayılan davranış sadece **kök sayfa** (root page) media’sını okur. Farklı bir sayfa UID’sini kullanmak için `RootPageLogoProcessor` içinde `$rootPageId` yerine sabit bir UID veya TypoScript’ten gelen bir konfigürasyon kullanılabilir; bu da özelleştirme gerektirir.

---

## Ek: Hızlı Kontrol Listesi

- [ ] Ana sayfa (root page) doğru tanımlı (Site Management > Sites).
- [ ] Ana sayfa → Düzenle → Resources → Media’da en az bir dosya var.
- [ ] `RootPageLogoProcessor` sınıfı mevcut ve namespace doğru.
- [ ] `Services.yaml`’da `data.processor` tag’i ve `root-page-logo` identifier kayıtlı.
- [ ] `page.typoscript`’te PAGEVIEW dataProcessing’de `5 = root-page-logo` ve `5.as = headerLogo` tanımlı.
- [ ] Layout’ta Header’a `logo` ve `headerLogo` geçiriliyor.
- [ ] Header partial’da öncelik: headerLogo → logo → fallback.
- [ ] Gerekirse cache temizlendi.

---

*Bu belge **TYPO3 v13** (13.4.x) ve `testproject` site paketi (Sets yapısı) için hazırlanmıştır. Farklı extension/site paketi adları kullanıyorsanız dosya yolları ve namespace’leri buna göre uyarlayın. v12 veya önceki sürümlerde Sets ve PAGEVIEW olmadığı için ilgili bölümler geçerli değildir.*
