Make logo dynamic
August 21, 2025 · AI Conversations
make it dynamic by set url
### ✅ 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)?
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?