Konfigurera Logotypväxling i mallar

I den här guiden beskrivs hur du konfigurerar platshållare för logotyper i mallar för att aktivera funktionen för logotypbyte i GenStudio for Performance Marketing. Använd de här riktlinjerna för att se till att platshållaren visas korrekt i olika bildstorlekar och proportioner.

Snabbinställningar

Använd följande grundläggande mallkod för din logotypbild:

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="my-logo"
>

Obligatoriskt:

Valfritt:

Lär dig platshållarkantlinjen

Om ingen logotyp är markerad innehåller {{brand_logo}} en genomskinlig bild på 1 × 1 pixel. Formatet {{defaultLogo}} använder automatiskt en kontur så att platshållaren visas:

outline: clamp(1px, 0.1em, 5px) dashed #FFF;

Kantbeteende:

Kantstorlek

Funktionen clamp() anpassar konturtjockleken till mallstorleken:

Formel: 0.1em är lika med 10 % av den ärvda teckensnittsstorleken, klämd mellan 1px och 5px.

Anpassa platshållarkantlinjen

Du kan åsidosätta standardkonturen med CSS-klasser. Stilen {{defaultLogo}} använder baskonturen och klassen kan anpassa färg, bredd och stil.

HTML-mall:

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-custom-border"
>

CSS för mall:

.logo-custom-border {
  outline-color: #0066CC !important;
  outline-width: 2px !important;
  outline-style: dotted !important;
}

Ange rekommenderad logotypstorlek

Om du vill vara säker på att platshållaren är synlig och att layouten inte ändras anger du en explicit storlek i CSS-klassen:

HTML-mall:

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-standard"
>

CSS för mall:

.logo-standard {
  width: 120px;
  height: 60px;
}

Kontrollera logotypens placering

Använd object-fit och object-position för att kontrollera hur logotypen skalas i behållaren.

Logotypcentrerad (vanligaste)

Logotypen skalas så att den får plats inom 150 × 80 pixlar, centrerad både vågrätt och lodrätt.

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-centered"
>

.logo-centered {
  width: 150px;
  height: 80px;
  object-fit: contain;
  object-position: center center;
}

Vänsterjusterad logotyp

Logotypen skalas så att den passar, justeras mot vänsterkanten, lodrätt centrerad.

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-left"
>

.logo-left {
  width: 200px;
  height: 60px;
  object-fit: contain;
  object-position: left center;
}

Logotyp i det övre högra hörnet

Logotypen skalas så att den passar, placerad i det övre högra hörnet.

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-top-right"
>

.logo-top-right {
  width: 100px;
  height: 100px;
  object-fit: contain;
  object-position: right top;
}

Fullständiga exempel

Minimal konfiguration

<img src="{{brand_logo}}" style="{{defaultLogo}}">

Rekommenderad konfiguration

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="brand-logo"
>

.brand-logo {
  width: 120px;
  height: 60px;
  object-fit: contain;
  object-position: center center;
}

Avancerad konfiguration med anpassad kantlinje

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="sponsor-logo"
>

.sponsor-logo {
  width: 180px;
  height: 90px;
  object-fit: contain;
  object-position: left center;
  outline-color: #0066CC !important;
  outline-width: 2px !important;
  outline-style: solid !important;
}

Flexibel konfiguration med storleksgränser

Använd egenskaperna min-* och max-* för responsiva mallar eller olika logotyper.

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-flexible"
>

.logo-flexible {
  min-width: 20px;
  min-height: 20px;
  max-width: 200px;
  max-height: 100px;
  object-fit: contain;
  object-position: center center;
}

Så här fungerar det:

Referens för CSS-egenskaper

God praxis

Gör:

Gör inte:

Felsökning

Kanten är inte synlig:

Platshållaren är för liten (1px):

Kanten försvinner inte efter växling:

Logotypen beskärs:

Logotypen är för liten eller för stor:

Anpassad kantlinje visas inte: