Make logo dynamic

User
in sliverstripe Header.ss

make it dynamic by set url

Assistant
In SilverStripe you shouldn’t hardcode image paths inside your template. Instead, make it dynamic so editors can update it via the CMS.

### ✅ Steps

1. **Add a DB field / relation for Logo** in your `Page.php` or `SiteConfig`.
Usually, logo is better in `SiteConfig` so it’s global.

use SilverStripeORMDataObject;
use SilverStripeSiteConfigSiteConfig;
use SilverStripeAssetsImage;
use SilverStripeAssetAdminFormsUploadField;

class SiteConfigExtension extends DataExtension
{
    private static $has_one = [
        'SiteLogo' => Image::class,
    ];

    public function updateCMSFields(FieldList $fields)
    {
        $fields->addFieldToTab(
            'Root.Main',
            UploadField::create('SiteLogo', 'Website Logo')
        );
    }
}

👉 Add this extension to `mysite/_config/config.yml` (or `app/_config/config.yml` in SS4/SS5):

SilverStripeSiteConfigSiteConfig:
  extensions:
    - SiteConfigExtension

2. **Run dev/build**

/dev/build?flush=1

3. **Update your `Header.ss`**

<% with $SiteConfig %>
    <% if $SiteLogo %>
        <img src="$SiteLogo.ScaleWidth(200).URL" alt="Wohnung mieten Berlin">
    <% else %>
        <img src="themes/template/images/logo.png" alt="Wohnung mieten Berlin">
    <% end_if %>
<% end_with %>

Now your logo is dynamic:
– If an editor uploads a logo in **Settings → Logo**, it will show that.
– Otherwise it falls back to your theme’s default `themes/template/images/logo.png`.

👉 Do you want me to make this only configurable in **Settings (SiteConfig)** or per **Page** (each page can have its own logo)?

User
give me url like function
Assistant
Got it 👍 You want something like `$SiteLogoURL` available directly in the template, instead of writing the whole “ logic.

You can create a small function in a **DataExtension** for `SiteConfig`.

### 1. Extension with function

use SilverStripeORMDataExtension;
use SilverStripeSiteConfigSiteConfig;

class SiteConfigExtension extends DataExtension
{
    private static $has_one = [
        'SiteLogo' => SilverStripeAssetsImage::class,
    ];

    public function updateCMSFields(SilverStripeFormsFieldList $fields)
    {
        $fields->addFieldToTab(
            'Root.Main',
            SilverStripeAssetAdminFormsUploadField::create('SiteLogo', 'Website Logo')
        );
    }

    // ✅ Function that returns URL
    public function getSiteLogoURL()
    {
        if ($this->owner->SiteLogo()->exists()) {
            return $this->owner->SiteLogo()->URL;
        }
        return 'themes/template/images/logo.png'; // fallback
    }
}

### 2. Config in `app/_config/config.yml`

SilverStripeSiteConfigSiteConfig:
  extensions:
    - SiteConfigExtension

Run `/dev/build?flush=1`

### 3. Use in `Header.ss`

<img src="$SiteConfig.SiteLogoURL" alt="Wohnung mieten Berlin">

✅ Now you always have a clean function `$SiteLogoURL` available.

Do you want me to also make it **resizable** (like automatically `ScaleWidth(200)`), or just always return the original file URL?

Leave a Comment

Your email address will not be published. Required fields are marked *