pageflow 15.7.1 → 16.0.0

data/entry_types/paged/config/initializers/features.rb

@@ -1,6 +1,8 @@
 Pageflow.configure do |config|
   config.for_entry_type(PageflowPaged.entry_type) do |entry_type_config|
     entry_type_config.features.register('highdef_background_images')
+    entry_type_config.features.register('force_best_video_quality')
+    entry_type_config.features.register('force_fullhd_video_quality')
 
     entry_type_config.features.register('auto_change_page')
     entry_type_config.features.register('delayed_text_fade_in')

data/entry_types/paged/config/locales/{new/help.de.yml → de.yml}

@@ -1,62 +1,33 @@
 de:
+  pageflow:
+    force_best_video_quality:
+      feature_name: Höchste Video Qualität erzwingen
+    force_fullhd_video_quality:
+      feature_name: FullHD Video Qualität erzwingen
+    video:
+      page_attributes:
+        smart_contain:
+          inline_help: Video skalieren, um die Darstellung von schwarzen Balken oben und unten (Letterboxing) bzw. rechts und links (Pillarboxing) zu vermeiden, wenn das Seitenverhältnis des Videos nur leicht vom Seitenverhältnis des Browser-Viewports abweicht.
+          label: Letterboxing/Pillarboxing vermeiden
   pageflow_paged:
     help_entries:
-      overview:
-        menu_item: Übersicht
-        text: |
-          # Übersicht
-
-          Dies ist der Editor zum Bearbeiten eines Pageflows. Mit
-          seiner Zweiteilung ermöglicht er die direkte Vorschau
-          während der Bearbeitung, zeigt Änderungen am Text oder neu
-          ausgewählte Dateien unmittelbar an und speichert diese
-          automatisch.
-
-          Die Seitenleiste kann durch einen Klick auf den Anfasser zur
-          Größenänderung ein- und ausgeblendet werden. Mit einem
-          Verschieben der Seitenleiste nach links und rechts kannst Du
-          die Größe des Vorschaufensters verändern. Wird das
-          Vorschaufenster schmal, und somit eher zu einem hochkantigen
-          Mobiltelefon-Format gestaucht, wird aus Platzgründen statt
-          der Navigationsleiste nur das Icon „Übersicht“ angezeigt.
-
-          Die Navigation des Editors ist unterteilt in die vier
-          Bereiche:
-
-          ## Titel und Optionen
-
-          Unter „Titel und Optionen“ kannst Du grundsätzliche
-          Parameter des Erscheinungsbildes, sowie Titel, Sprache,
-          Impressum etc. einstellen. Dazu können Texte festgelegt
-          werden, die beim Teilen des Beitrags über Social Media
-          Dienste angezeigt werden sollen.
-
-          Details findest Du unter: [Titel und Optionen](#pageflow_paged.help_entries.meta_data)
+      atmo:
+        menu_item: Atmo Audio
+        text: |-
+          # Atmo Audio
 
-          ## Dateien verwalten
+          Mit der „Atmo“ kann jede Seite, unabhängig vom Seitentyp, im Hintergrund Sound abspielen. Dabei kannst Du bestimmen, ob ein Sound nur auf einer Seite zu hören ist oder über mehrere Seiten ohne Unterbrechung läuft. Wähle dazu einfach für die benachbarten Seiten die selbe Audiodatei als Atmo aus.
 
-          Unter „Dateien verwalten“ lädst Du die Mediendateien hoch,
-          die im Pageflow verwendet werden sollen. Du kannst hier auch
-          bereits hochgeladene Videos, Fotos und Audios
-          wiederverwenden.
+          Auf diese Weise lassen sich Kapitel akustisch voneinander absetzen und zusammenhängende Seiten stärker verweben.
 
-          Details findest Du unter: [Dateien verwalten](#pageflow.help_entries.files)
+          Beim Seitentyp Video kann zusätzlich ausgwählt werden, ob der Hintergrundsound während der Video-Wiedergabe normal oder leiser weitergespielt oder ganz ausgeblendet werden soll.
 
-          ## Gliederung
+          Die Einstellung der Atmo-Sounds erreichst du bei jeder Seite über den Reiter „Optionen“.
 
-          Über die „Gliederung“ kannst Du Kapitel und Seiten
-          hinzufügen, also die eigentlichen Inhalte bearbeiten. Per
-          Drag&Drop lassen sich Seiten und Kapitel auch jederzeit
-          umsortieren.
+          Sollte Dich die Atmo während der Bearbeitung Deines Beitrags im Editor einmal stören, kannst Du sie mit der Tastenkombination „Alt + a“ vorübergehend stumm schalten. Um die Atmo wieder zu aktivieren, drücke einfach erneut „Alt + a“.
 
-          Details findest Du unter: [Kapitel und Seiten](#pageflow_paged.help_entries.outline)
+          **ACHTUNG:** Atmo-Audios können aufgrund technischer Einschränkungen der Browserhersteller auf mobilen Geräten und mit Safari auf Desktop nicht wiedergegeben werden.
       meta_data:
-        menu_item: Titel und Optionen
-        text: |
-          # Titel und Optionen
-
-          Allgemeine Einstellungen für den Beitrag. Bitte einen
-          Unterpunkt auf der linken Seite auswählen.
         appearance:
           menu_item: Erscheinungsbild
           text: |
@@ -111,6 +82,12 @@ de:
 
             ## Theme
             Lege ein Font-Template für den Beitrag fest.
+        menu_item: Titel und Optionen
+        text: |
+          # Titel und Optionen
+
+          Allgemeine Einstellungen für den Beitrag. Bitte einen
+          Unterpunkt auf der linken Seite auswählen.
       outline:
         menu_item: Kapitel und Seiten
         text: |
@@ -137,26 +114,58 @@ de:
           sich Pageflow, als ob keine Kapitelstruktur vorhanden
           ist. (Kapitel und Kapiteltitel werden in diesem Falle nicht
           in der Übersicht bzw. Navigation dargestellt).
+      overview:
+        menu_item: Übersicht
+        text: |
+          # Übersicht
 
-      storylines:
-        menu_item: Erzählstränge
-        text: "# Erzählstränge\n\nErgänzend zur linearen Erzählung von „oben nach unten“, können auch weitere (non-lineare) Erzählstränge als Exkurse zu vertiefenden Inhalten genutzt werden. \n\nIn diesem [Blogartikel](https://www.pageflow.io/neues-pageflow-update) findest Du ein Beispiel.\n\nMit „Erzählstrang“ ist hier die zusammenhängende Kapitel- und Seitenabfolge gemeint, durch die ein User hindurch scrollt. Zu unterscheiden ist zwischen dem sogenannten Haupterzählstrang, in dem ein User zu Beginn eines Pageflows einsteigt, und weiteren untergeordneten Erzählsträngen. \n\nUm vom Haupterzählstrang einen Abzweig zu erstellen, benutze eine „Verweise“-Seite (Mosaik, Collage oder Hotspot) und lege auf der jeweiligen Seite unter „Verweise“ die entsprechenden Verknüpfungen an. \n\nDabei kann durch das Festlegen einer „übergeordneten Seite“ bestimmt werden, zu welcher Seite der User am Ende des Erzählstrangs  gelangt.\n\nOptisch unterstützt werden diese Exkurse in untergeordnete Erzählstränge durch einen horizontalen Seitenübergangseffekt, der beim Eintreten und Verlassen dieser Stränge automatisch eingestellt ist. \n\nErstellt werden diese Erzählstränge in der Gliederung über ein Klick auf die Plus-Schaltfläche neben der Erzählstrang-Auswahl. Dabei öffnet sich automatisch ein neues Kapitel, in dem dann weitere Seiten angelegt werden können.\n\n\n### Übergeordnete Seiten\n\nIn jedem Untererzählstrang muss eine „Übergeordnete Seite“ festgelegt werden, die bestimmt, wohin ein User beim zurück-scrollen gelangt. Mit einem Klick auf das Stift-Symbol neben der Erzählstrang-Auswahl kann diese Zielseite ausgewählt werden. Durch die Auswahl einer übergeordneten Seite erscheint auf allen Seiten eines untergeordneten Erzählstrangs zudem automatisch ein „Zurück“-Button, der zu der übergeordneten Seite führt. \n\n\n### Kapitel-Hierarchie\n\nDurch die Verwendung mehrerer „untergeordneter“ Erzählstränge und der Festlegung von übergeordneten Seiten ergibt sich eine Kapitelhierarchie, wie man sie auch von Buch-Gliederungen kennt:\n\n1. (Hauptstrang), 1.1 (Übergeordneter Unterstrang), 1.1.1 (vertiefende Seite im übergeordneten Unterstrang) und so weiter.\n\nDiese Hierarchie kann nachträglich in der Erzählstrang-Auswahl über ein Klick auf Stift-Symbol geändert werden. Ein untergeordneter Erzählstrang kann an dieser Stelle zudem auch nachträglich zum Haupt-Erzählstrang umsortiert werden.\n\n\n### Scroll-Nachfolger\n\nFalls der User von der letzten Seite eines Unterkapitels (1.1.1) auf eine andere Stelle im Beitrag geleitet werden soll (z.B. 2.1), kann hierzu ebenfalls über das Stiftsymbol in den Erzählstrang-Einstellungen der sogenannte „Scroll-Nachfolger“ festgelegt werden. Um in dem Beispiel zu bleiben wäre der folgende Ablauf denkbar: 1 -> 1.1 -> 1.1.1 -> 2.1\n\nAchtung: Während des Editierens wird immer nur das aktuell ausgewählte Kapitel angezeigt. Um zu den anderen Erzählsträngen zu gelangen klicke auf das Auswahlmenü „Erzählstrang“."
-      page_options:
-        menu_item: Allgemeine Seitenoptionen
-        text: "# Allgemeine Seitenoptionen\n\n### Titel\n\nHier gibst Du den Titel der jeweiligen Seite ein. Dieser\nwird nicht nur als Überschrift des Fliesstextes der Seite\nausgespielt, sondern dient zudem als Titel innerhalb der\nNavigation und der Übersicht. Wird eine einzelne Seite in\nsozialen Netzwerken geteilt, ist dieser Titel zugleich auch\nder Titel des Social Media-Beitrages.\n\n### Titel ausblenden\n\nOptional lässt sich der Titel auch ausblenden. Das heisst:\nEr wird nicht mehr als Überschrift im Fliesstext\nangezeigt. Er bleibt zur Identifikation einer Seite\nallerdings in Navigation, Übersicht und geteilten Beträgen\nerhalten.\n\n### Tagline und Untertitel\n\nHier kann wahlweise eine Tagline und/oder ein Untertitel\neingegeben werden. Falls Du ein Häkchen bei „Titel\nausblenden“ gesetzt hast, sind Tagline und Untertitel über\ndem Fliesstext ebenfalls nicht zu sehen.\n\n### Text\n\nDer Textblock kann mit den Buttons unterhalb des\nEingabefeldes formatiert werden. [ B=Fett / I=kursiv /\nU=unterstrichen „gekippte acht“=Link/URL auf fremde Seite\neinfügen].\n\nAlle Änderungen sind in der linken Frontend-Ansicht\nsichtbar, sobald das entsprechende Texteingabefeld im\nEditierbereich verlassen wurde.\n\n### Textposition\n\nWähle hier, ob der Text auf der linken oder rechten Seite\nangezeigt wird.\n\n### Intensität der Abblendung\n\nDie Intensität des Farbverlaufs dient der Lesbarkeit von\nTexten auf Videos oder Bildern.\n\nDurch den Schieberegler kann der Bildhintergrund so stark\nabgedunkelt bzw. aufgehellt werden, bis der Kontrast\nzwischen Bild und Text ausreichend ist.\n\n### Farben invertieren\n\nBeim Invertieren werden „hell“ und „dunkel“ vertauscht, die\nsonst weiße Schrift ändert sich dabei automatisch in\nschwarz.\n\nGrundsätzlich gilt: Helle Schrift für dunkle Bilder, dunkle\nSchrift für helle Bilder.\n\n### Thumbnail\n\nDas Thumbnail ersetzt das ansonsten automatisch generierte\nVorschaubild in der Navigation und in der Übersicht.\n\n### In Navigationsleiste anzeigen\n\nIst diese Option nicht gesetzt, wird die jeweilige Seite\nnicht in der Navigation repräsentiert, kann also nicht\ndirekt über die Navigation erreicht werden.\n\nDies bietet sich vor allem für Seiten an, die inhaltlich als\n„Unterseiten“ einer anderen Seite anzusehen sind.\n\n### Übergangseffekt\n\nEs gibt verschiedene Effekte, die sichtbar sind, wenn von einer Kapitelseite zur nächsten gescrollt oder geklickt wird. Zur Auswahl stehen Seitenübergänge, wie „Überblendung“, „Schwarzblende“ oder „Harter Schnitt“ die sich vertikal auswirken, zudem kann auch „Horizontal Scrollen“ von rechts oder links ausgewählt werden. \n\nWelcher Effekt verwendet wird, kann unter „Optionen“ individuell für jede Seite festgelegt werden.\n\n### Text verzögert einblenden\n\nBestimme mit dieser Option, ob Text und Abblendung mit zeitlicher Verzögerung angezeigt werden.\nHierbei sehen User zunächst nur den Hintergrund, dann erscheinen Titel, Tagline und Untertitel und mit minimaler Verzögerung schließlich der Fließtext.\n\nInsgesamt stehen drei Verzögerungslängen zur Verfügung: kurz = 1 Sekunde, mittel = 3 Sekunde, lang = 5 Sekunde.\n\nDieses Feature eignet sich zum Beispiel für Intros oder Kapitelanfänge.\n\n### Beschreibung für Übersicht\n\nHier kann der Text eingegeben werden, der angezeigt wird,\nwenn der User in der Übersicht mit der Mouse über die\njeweilige Seite fährt. Außerdem entspricht der hier\neingegebene Text"
-      atmo:
-        menu_item: Atmo Audio
-        text: |-
-          # Atmo Audio
+          Dies ist der Editor zum Bearbeiten eines Pageflows. Mit
+          seiner Zweiteilung ermöglicht er die direkte Vorschau
+          während der Bearbeitung, zeigt Änderungen am Text oder neu
+          ausgewählte Dateien unmittelbar an und speichert diese
+          automatisch.
 
-          Mit der „Atmo“ kann jede Seite, unabhängig vom Seitentyp, im Hintergrund Sound abspielen. Dabei kannst Du bestimmen, ob ein Sound nur auf einer Seite zu hören ist oder über mehrere Seiten ohne Unterbrechung läuft. Wähle dazu einfach für die benachbarten Seiten die selbe Audiodatei als Atmo aus.
+          Die Seitenleiste kann durch einen Klick auf den Anfasser zur
+          Größenänderung ein- und ausgeblendet werden. Mit einem
+          Verschieben der Seitenleiste nach links und rechts kannst Du
+          die Größe des Vorschaufensters verändern. Wird das
+          Vorschaufenster schmal, und somit eher zu einem hochkantigen
+          Mobiltelefon-Format gestaucht, wird aus Platzgründen statt
+          der Navigationsleiste nur das Icon „Übersicht“ angezeigt.
 
-          Auf diese Weise lassen sich Kapitel akustisch voneinander absetzen und zusammenhängende Seiten stärker verweben.
+          Die Navigation des Editors ist unterteilt in die vier
+          Bereiche:
 
-          Beim Seitentyp Video kann zusätzlich ausgwählt werden, ob der Hintergrundsound während der Video-Wiedergabe normal oder leiser weitergespielt oder ganz ausgeblendet werden soll.
+          ## Titel und Optionen
 
-          Die Einstellung der Atmo-Sounds erreichst du bei jeder Seite über den Reiter „Optionen“.
+          Unter „Titel und Optionen“ kannst Du grundsätzliche
+          Parameter des Erscheinungsbildes, sowie Titel, Sprache,
+          Impressum etc. einstellen. Dazu können Texte festgelegt
+          werden, die beim Teilen des Beitrags über Social Media
+          Dienste angezeigt werden sollen.
 
-          Sollte Dich die Atmo während der Bearbeitung Deines Beitrags im Editor einmal stören, kannst Du sie mit der Tastenkombination „Alt + a“ vorübergehend stumm schalten. Um die Atmo wieder zu aktivieren, drücke einfach erneut „Alt + a“.
+          Details findest Du unter: [Titel und Optionen](#pageflow_paged.help_entries.meta_data)
 
-          **ACHTUNG:** Atmo-Audios können aufgrund technischer Einschränkungen der Browserhersteller auf mobilen Geräten und mit Safari auf Desktop nicht wiedergegeben werden.
+          ## Dateien verwalten
+
+          Unter „Dateien verwalten“ lädst Du die Mediendateien hoch,
+          die im Pageflow verwendet werden sollen. Du kannst hier auch
+          bereits hochgeladene Videos, Fotos und Audios
+          wiederverwenden.
+
+          Details findest Du unter: [Dateien verwalten](#pageflow.help_entries.files)
+
+          ## Gliederung
+
+          Über die „Gliederung“ kannst Du Kapitel und Seiten
+          hinzufügen, also die eigentlichen Inhalte bearbeiten. Per
+          Drag&Drop lassen sich Seiten und Kapitel auch jederzeit
+          umsortieren.
+
+          Details findest Du unter: [Kapitel und Seiten](#pageflow_paged.help_entries.outline)
+      page_options:
+        menu_item: Allgemeine Seitenoptionen
+        text: "# Allgemeine Seitenoptionen\n\n### Titel\n\nHier gibst Du den Titel der jeweiligen Seite ein. Dieser\nwird nicht nur als Überschrift des Fliesstextes der Seite\nausgespielt, sondern dient zudem als Titel innerhalb der\nNavigation und der Übersicht. Wird eine einzelne Seite in\nsozialen Netzwerken geteilt, ist dieser Titel zugleich auch\nder Titel des Social Media-Beitrages.\n\n### Titel ausblenden\n\nOptional lässt sich der Titel auch ausblenden. Das heisst:\nEr wird nicht mehr als Überschrift im Fliesstext\nangezeigt. Er bleibt zur Identifikation einer Seite\nallerdings in Navigation, Übersicht und geteilten Beträgen\nerhalten.\n\n### Tagline und Untertitel\n\nHier kann wahlweise eine Tagline und/oder ein Untertitel\neingegeben werden. Falls Du ein Häkchen bei „Titel\nausblenden“ gesetzt hast, sind Tagline und Untertitel über\ndem Fliesstext ebenfalls nicht zu sehen.\n\n### Text\n\nDer Textblock kann mit den Buttons unterhalb des\nEingabefeldes formatiert werden. [ B=Fett / I=kursiv /\nU=unterstrichen „gekippte acht“=Link/URL auf fremde Seite\neinfügen].\n\nAlle Änderungen sind in der linken Frontend-Ansicht\nsichtbar, sobald das entsprechende Texteingabefeld im\nEditierbereich verlassen wurde.\n\n### Textposition\n\nWähle hier, ob der Text auf der linken oder rechten Seite\nangezeigt wird.\n\n### Intensität der Abblendung\n\nDie Intensität des Farbverlaufs dient der Lesbarkeit von\nTexten auf Videos oder Bildern.\n\nDurch den Schieberegler kann der Bildhintergrund so stark\nabgedunkelt bzw. aufgehellt werden, bis der Kontrast\nzwischen Bild und Text ausreichend ist.\n\n### Farben invertieren\n\nBeim Invertieren werden „hell“ und „dunkel“ vertauscht, die\nsonst weiße Schrift ändert sich dabei automatisch in\nschwarz.\n\nGrundsätzlich gilt: Helle Schrift für dunkle Bilder, dunkle\nSchrift für helle Bilder.\n\n### Thumbnail\n\nDas Thumbnail ersetzt das ansonsten automatisch generierte\nVorschaubild in der Navigation und in der Übersicht.\n\n### In Navigationsleiste anzeigen\n\nIst diese Option nicht gesetzt, wird die jeweilige Seite\nnicht in der Navigation repräsentiert, kann also nicht\ndirekt über die Navigation erreicht werden.\n\nDies bietet sich vor allem für Seiten an, die inhaltlich als\n„Unterseiten“ einer anderen Seite anzusehen sind.\n\n### Übergangseffekt\n\nEs gibt verschiedene Effekte, die sichtbar sind, wenn von einer Kapitelseite zur nächsten gescrollt oder geklickt wird. Zur Auswahl stehen Seitenübergänge, wie „Überblendung“, „Schwarzblende“ oder „Harter Schnitt“ die sich vertikal auswirken, zudem kann auch „Horizontal Scrollen“ von rechts oder links ausgewählt werden. \n\nWelcher Effekt verwendet wird, kann unter „Optionen“ individuell für jede Seite festgelegt werden.\n\n### Text verzögert einblenden\n\nBestimme mit dieser Option, ob Text und Abblendung mit zeitlicher Verzögerung angezeigt werden.\nHierbei sehen User zunächst nur den Hintergrund, dann erscheinen Titel, Tagline und Untertitel und mit minimaler Verzögerung schließlich der Fließtext.\n\nInsgesamt stehen drei Verzögerungslängen zur Verfügung: kurz = 1 Sekunde, mittel = 3 Sekunde, lang = 5 Sekunde.\n\nDieses Feature eignet sich zum Beispiel für Intros oder Kapitelanfänge.\n\n### Beschreibung für Übersicht\n\nHier kann der Text eingegeben werden, der angezeigt wird,\nwenn der User in der Übersicht mit der Mouse über die\njeweilige Seite fährt. Außerdem entspricht der hier\neingegebene Text"
+      storylines:
+        menu_item: Erzählstränge
+        text: "# Erzählstränge\n\nErgänzend zur linearen Erzählung von „oben nach unten“, können auch weitere (non-lineare) Erzählstränge als Exkurse zu vertiefenden Inhalten genutzt werden. \n\nIn diesem [Blogartikel](https://www.pageflow.io/neues-pageflow-update) findest Du ein Beispiel.\n\nMit „Erzählstrang“ ist hier die zusammenhängende Kapitel- und Seitenabfolge gemeint, durch die ein User hindurch scrollt. Zu unterscheiden ist zwischen dem sogenannten Haupterzählstrang, in dem ein User zu Beginn eines Pageflows einsteigt, und weiteren untergeordneten Erzählsträngen. \n\nUm vom Haupterzählstrang einen Abzweig zu erstellen, benutze eine „Verweise“-Seite (Mosaik, Collage oder Hotspot) und lege auf der jeweiligen Seite unter „Verweise“ die entsprechenden Verknüpfungen an. \n\nDabei kann durch das Festlegen einer „übergeordneten Seite“ bestimmt werden, zu welcher Seite der User am Ende des Erzählstrangs  gelangt.\n\nOptisch unterstützt werden diese Exkurse in untergeordnete Erzählstränge durch einen horizontalen Seitenübergangseffekt, der beim Eintreten und Verlassen dieser Stränge automatisch eingestellt ist. \n\nErstellt werden diese Erzählstränge in der Gliederung über ein Klick auf die Plus-Schaltfläche neben der Erzählstrang-Auswahl. Dabei öffnet sich automatisch ein neues Kapitel, in dem dann weitere Seiten angelegt werden können.\n\n\n### Übergeordnete Seiten\n\nIn jedem Untererzählstrang muss eine „Übergeordnete Seite“ festgelegt werden, die bestimmt, wohin ein User beim zurück-scrollen gelangt. Mit einem Klick auf das Stift-Symbol neben der Erzählstrang-Auswahl kann diese Zielseite ausgewählt werden. Durch die Auswahl einer übergeordneten Seite erscheint auf allen Seiten eines untergeordneten Erzählstrangs zudem automatisch ein „Zurück“-Button, der zu der übergeordneten Seite führt. \n\n\n### Kapitel-Hierarchie\n\nDurch die Verwendung mehrerer „untergeordneter“ Erzählstränge und der Festlegung von übergeordneten Seiten ergibt sich eine Kapitelhierarchie, wie man sie auch von Buch-Gliederungen kennt:\n\n1. (Hauptstrang), 1.1 (Übergeordneter Unterstrang), 1.1.1 (vertiefende Seite im übergeordneten Unterstrang) und so weiter.\n\nDiese Hierarchie kann nachträglich in der Erzählstrang-Auswahl über ein Klick auf Stift-Symbol geändert werden. Ein untergeordneter Erzählstrang kann an dieser Stelle zudem auch nachträglich zum Haupt-Erzählstrang umsortiert werden.\n\n\n### Scroll-Nachfolger\n\nFalls der User von der letzten Seite eines Unterkapitels (1.1.1) auf eine andere Stelle im Beitrag geleitet werden soll (z.B. 2.1), kann hierzu ebenfalls über das Stiftsymbol in den Erzählstrang-Einstellungen der sogenannte „Scroll-Nachfolger“ festgelegt werden. Um in dem Beispiel zu bleiben wäre der folgende Ablauf denkbar: 1 -> 1.1 -> 1.1.1 -> 2.1\n\nAchtung: Während des Editierens wird immer nur das aktuell ausgewählte Kapitel angezeigt. Um zu den anderen Erzählsträngen zu gelangen klicke auf das Auswahlmenü „Erzählstrang“."

data/entry_types/paged/config/locales/{new/help.en.yml → en.yml}

@@ -1,55 +1,33 @@
 en:
+  pageflow:
+    force_best_video_quality:
+      feature_name: Force best video quality
+    force_fullhd_video_quality:
+      feature_name: Force FullHD video quality
+    video:
+      page_attributes:
+        smart_contain:
+          inline_help: Scale video to prevent displaying black bars above and below it (letterboxing) or on the left and right (pillarboxing) when the aspect ratio of the video only deviates slightly from the aspect ratio of the browser viewport.
+          label: Avoid letterboxing/pillarboxing
   pageflow_paged:
     help_entries:
-      overview:
-        menu_item: Overview
+      atmo:
+        menu_item: Atmo Audio
         text: |-
-          # Overview
-
-          This is Pageflow’s editing platform. The division of the
-          screen into two allows you to edit your Pageflow and see a
-          preview at the same time. The editor shows modifications and
-          newly selected files directly and saves them automatically.
-
-          The sidebar can be hidden or shown. You can change the size
-          of the preview-window by pulling the sidebar to the right or
-          the left. If the preview-window is long and narrow like ´ a
-          smartphone, you will only be able to see the „overview“ icon
-          and not the entire navigation. This is due to lack of space.
-
-          The navigation is divided into four parts:
-
-          ## Title and Options
-
-          Under „Title and Options“ you can set up basic appearance
-          parameters as well as the title, language and legal
-          notice. You can also decide which content should be
-          displayed when sharing the report on social media platforms.
-
-          For more details see: [Title and Options](#pageflow_paged.help_entries.meta_data)
+          # Atmo Audio
 
-          ## Manage Files
+          This feature lets you add background audio to every page regardless of its page type. You can define if a sound should play only for one page or continue playing for more pages without interruption. Simply select the same atmo audio file for some adjacent pages.
 
-          Under „Manage Files“ you can upload your media files, which
-          you want to use in Pageflow. Furthermore you can reuse
-          videos, photos and audio-files that have already been
-          uploaded.
+          That way chapters can be seperated acoustically and pages that belong together can be weaved to a stronger unit.
 
-          For more details see: [Manage Files](#pageflow.help_entries.files)
+          For the page type „Video“ there is a special option to pause background audio or continue at lower volume while the video is playing.
 
-          ## Outline
+          You find the atmo settings on the „Options“ tab of each page.
 
-          Via the „Outline“ you can add chapters and pages - the
-          actual content. Per Drag and Drop you can resort the pages
-          and chapters any time.
+          Should you ever feel distracted by the atmo audio while working on your story, you can use the hot key „Alt + a“ to temporarily mute it. Simply press „Alt + a“ again to reactivate atmo audio.
 
-          For more details see: [Chapter and Pages](#pageflow_paged.help_entries.outline)
+          **CAUTION:** Due to technical restrictions imposed by the browser manufacturers, ambient audio cannot be played on mobile devices and with Safari on the desktop.
       meta_data:
-        menu_item: Title and Options
-        text: |
-          # Title and Options
-
-          General settings for the entry. Please select a sub item on the left.
         appearance:
           menu_item: Appearance
           text: |
@@ -104,6 +82,11 @@ en:
             ## Theme
 
             Specify a font template for the entry.
+        menu_item: Title and Options
+        text: |
+          # Title and Options
+
+          General settings for the entry. Please select a sub item on the left.
       outline:
         menu_item: Chapters and Pages
         text: |-
@@ -129,25 +112,52 @@ en:
           is no structure of chapters. The chapter and the title of
           this chapter are consequently not shown in the
           overview/navigation.
-      storylines:
-        menu_item: Storylines
-        text: "# Storylines\n\nIn addition to linear narrations from top to bottom, further storylines can be used as non linear excursions to enlarge upon parts of an  entry.\n\nPlease find a blog article and example [here](https://www.pageflow.io/en/update-storylines)\n\nA „Storyline“ consists of chapters and pages, which users scroll through. Distinguishable is the so called main storyline from further subordinate ones. The user starts off in the main storyline and can then navigate to different excursions.\n\nTo create such an excursion from the main storyline use one of the „Link“ pages (Mosaic, Collage, Hotspot) and create the desired connections via „Links“.\n\nBy choosing a „Parent page“ you can determine to which page users return after scrolling the storyline´s last page.\n\nTransitions to subordinate storylines are visually supported by a horizontal animation as the default setting for entering and leaving. \n\nStorylines are created by clicking onto the plus button next to the storyline menu. Thereby a new chapter opens automatically in which further pages can be added. \n\n\n### Parent pages\n\nIn every subordinate  storyline a „Parent page“ must be determined to define where users land when scrolling back.\n\nThis target page can be chosen by clicking on the pen symbol next to the storyline menu. When a „Parent page“ is defined, a back button will be shown automatically in the subordinate storyline that will always lead users back to the „Parent page“.\n\n\n### Chapter hierarchy\n\nThe use of more than one „subordinary“ storylines and the definition of „Parent pages“ leads to a chapter hierarchy as known from books:\n\n1. (Main storyline), 1.1. (Superior sub storyline), 1.1.1. (Subordinate sub storyline) and so on.\n\nThis hierarchy can be edited afterwards by clicking on the pen symbol next to the storyline menu. A subordinate storyline can be turned into the main storyline as well.\n\n\n### Scroll successors\n\nIf you want to lead users from a last page of a subordinate chapter (1.1.1) to another position than\nthe „Parent page“ (e.g. to 2.1) you can define a „Scroll successor“. Therefore click on the blue pen symbol within the storyline settings. As an example the following sequence might be imaginable: 1 -> 1.1 -> 1.1.1 -> 2.1\n\nAttention: While editing only the selected chapter will be shown in the sidebar. To switch to the other chapters click onto the storyline menu."
-      page_options:
-        menu_item: General Page Options
-        text: "# General Page Options\n\n### Title\n\nHere you can add the title of a particular page. This\ntitle is not only the headline of the text on the page, it\nalso functions as the title in the navigation and\noverview. If a single page is shared in social networks,\nthis title is also the title of the social media post.\n\n### Hide the title\n\nOptionally you can hide the title. Thus the title is not shown as the\nheading of the text body. For the identification of the page it\nremains visible in the navigation, overview and on social media posts.\n\n### Tagline and Subtitle\n\nHere you can optionally enter a tagline and/or a\nsubtitle. If you click on „Hide title“ the tagline and\nsubtitle are not shown either.\n\n### Text\n\nThe text-block can be formatted with the buttons underneath\nthe input field. [B= bold / I=italic / U=underlined /\ninfinity symbol= Link/URL to an external website]\n\nAll changes are visible in the left front-end-view as soon\nas you leave the appropriate input field in the editor.\n\n### Textposition\n\nDecide if the text should be shown on the left or right side.\n\n### Opacity of the gradient\n\nThe opacity of the gradient improves the legibility of\nthe text on background-videos or pictures.\n\nYou can use the slider to darken or lighten up the\nbackground until the contrast between text and background is\noptimal.\n\n### Invert colors\n\nIf you invert the colors, „bright“ and „dark“ are\ninterchanged. Thus the normally white font changes into\nblack.\n\nA general rule: Bright font for dark pictures, dark font for\nbright pictures.\n\n### Thumbnail\n\nThe thumbnail replaces the automatically generated\npreview-picture in the navigation and overview.\n\n### Display in navigation\n\nIf this option is not taken, the particular page is not\nrepresented in the navigation and therefore cannot be\nreached through it.  You can use this option if a page is\nsupposed to read more like a subpage of another page.\n\n### Transition effect\n\nThere are different scroll effects, which are visible when users enter or leave pages. You can use vertical transitions like „crossfade“ or „cut“ or „Fade to black“. Besides this you also can choose horizontal scrolling from right or left. You can determine which effect should be used for each individual page.\n\n### Fade in text after delay\n\nDefine whether text and gradient of a page should appear with a delay. \nUsers will first see the background image, then title, tagline and subtitle until finally the content text will be displayed.\n\nThere are three different durations of delay: short = 1 second, medium = 3 seconds, long = 5 seconds.\n\nThis feature fits best for intros or beginnings of chapters.\n\n### Description for the overview\n\nYou can enter a text, which appears when the user navigates\nwith the mouse over the particular page. This text matches\nwith the mouse-over-text for the page-type „Page References“\nas well as with the text, which appears when you share the\nPageflow in social networks."
-      atmo:
-        menu_item: Atmo Audio
+      overview:
+        menu_item: Overview
         text: |-
-          # Atmo Audio
+          # Overview
 
-          This feature lets you add background audio to every page regardless of its page type. You can define if a sound should play only for one page or continue playing for more pages without interruption. Simply select the same atmo audio file for some adjacent pages.
+          This is Pageflow’s editing platform. The division of the
+          screen into two allows you to edit your Pageflow and see a
+          preview at the same time. The editor shows modifications and
+          newly selected files directly and saves them automatically.
 
-          That way chapters can be seperated acoustically and pages that belong together can be weaved to a stronger unit.
+          The sidebar can be hidden or shown. You can change the size
+          of the preview-window by pulling the sidebar to the right or
+          the left. If the preview-window is long and narrow like ´ a
+          smartphone, you will only be able to see the „overview“ icon
+          and not the entire navigation. This is due to lack of space.
 
-          For the page type „Video“ there is a special option to pause background audio or continue at lower volume while the video is playing.
+          The navigation is divided into four parts:
 
-          You find the atmo settings on the „Options“ tab of each page.
+          ## Title and Options
 
-          Should you ever feel distracted by the atmo audio while working on your story, you can use the hot key „Alt + a“ to temporarily mute it. Simply press „Alt + a“ again to reactivate atmo audio.
+          Under „Title and Options“ you can set up basic appearance
+          parameters as well as the title, language and legal
+          notice. You can also decide which content should be
+          displayed when sharing the report on social media platforms.
+
+          For more details see: [Title and Options](#pageflow_paged.help_entries.meta_data)
+
+          ## Manage Files
+
+          Under „Manage Files“ you can upload your media files, which
+          you want to use in Pageflow. Furthermore you can reuse
+          videos, photos and audio-files that have already been
+          uploaded.
+
+          For more details see: [Manage Files](#pageflow.help_entries.files)
 
-          **CAUTION:** Due to technical restrictions imposed by the browser manufacturers, ambient audio cannot be played on mobile devices and with Safari on the desktop.
+          ## Outline
+
+          Via the „Outline“ you can add chapters and pages - the
+          actual content. Per Drag and Drop you can resort the pages
+          and chapters any time.
+
+          For more details see: [Chapter and Pages](#pageflow_paged.help_entries.outline)
+      page_options:
+        menu_item: General Page Options
+        text: "# General Page Options\n\n### Title\n\nHere you can add the title of a particular page. This\ntitle is not only the headline of the text on the page, it\nalso functions as the title in the navigation and\noverview. If a single page is shared in social networks,\nthis title is also the title of the social media post.\n\n### Hide the title\n\nOptionally you can hide the title. Thus the title is not shown as the\nheading of the text body. For the identification of the page it\nremains visible in the navigation, overview and on social media posts.\n\n### Tagline and Subtitle\n\nHere you can optionally enter a tagline and/or a\nsubtitle. If you click on „Hide title“ the tagline and\nsubtitle are not shown either.\n\n### Text\n\nThe text-block can be formatted with the buttons underneath\nthe input field. [B= bold / I=italic / U=underlined /\ninfinity symbol= Link/URL to an external website]\n\nAll changes are visible in the left front-end-view as soon\nas you leave the appropriate input field in the editor.\n\n### Textposition\n\nDecide if the text should be shown on the left or right side.\n\n### Opacity of the gradient\n\nThe opacity of the gradient improves the legibility of\nthe text on background-videos or pictures.\n\nYou can use the slider to darken or lighten up the\nbackground until the contrast between text and background is\noptimal.\n\n### Invert colors\n\nIf you invert the colors, „bright“ and „dark“ are\ninterchanged. Thus the normally white font changes into\nblack.\n\nA general rule: Bright font for dark pictures, dark font for\nbright pictures.\n\n### Thumbnail\n\nThe thumbnail replaces the automatically generated\npreview-picture in the navigation and overview.\n\n### Display in navigation\n\nIf this option is not taken, the particular page is not\nrepresented in the navigation and therefore cannot be\nreached through it.  You can use this option if a page is\nsupposed to read more like a subpage of another page.\n\n### Transition effect\n\nThere are different scroll effects, which are visible when users enter or leave pages. You can use vertical transitions like „crossfade“ or „cut“ or „Fade to black“. Besides this you also can choose horizontal scrolling from right or left. You can determine which effect should be used for each individual page.\n\n### Fade in text after delay\n\nDefine whether text and gradient of a page should appear with a delay. \nUsers will first see the background image, then title, tagline and subtitle until finally the content text will be displayed.\n\nThere are three different durations of delay: short = 1 second, medium = 3 seconds, long = 5 seconds.\n\nThis feature fits best for intros or beginnings of chapters.\n\n### Description for the overview\n\nYou can enter a text, which appears when the user navigates\nwith the mouse over the particular page. This text matches\nwith the mouse-over-text for the page-type „Page References“\nas well as with the text, which appears when you share the\nPageflow in social networks."
+      storylines:
+        menu_item: Storylines
+        text: "# Storylines\n\nIn addition to linear narrations from top to bottom, further storylines can be used as non linear excursions to enlarge upon parts of an  entry.\n\nPlease find a blog article and example [here](https://www.pageflow.io/en/update-storylines)\n\nA „Storyline“ consists of chapters and pages, which users scroll through. Distinguishable is the so called main storyline from further subordinate ones. The user starts off in the main storyline and can then navigate to different excursions.\n\nTo create such an excursion from the main storyline use one of the „Link“ pages (Mosaic, Collage, Hotspot) and create the desired connections via „Links“.\n\nBy choosing a „Parent page“ you can determine to which page users return after scrolling the storyline´s last page.\n\nTransitions to subordinate storylines are visually supported by a horizontal animation as the default setting for entering and leaving. \n\nStorylines are created by clicking onto the plus button next to the storyline menu. Thereby a new chapter opens automatically in which further pages can be added. \n\n\n### Parent pages\n\nIn every subordinate  storyline a „Parent page“ must be determined to define where users land when scrolling back.\n\nThis target page can be chosen by clicking on the pen symbol next to the storyline menu. When a „Parent page“ is defined, a back button will be shown automatically in the subordinate storyline that will always lead users back to the „Parent page“.\n\n\n### Chapter hierarchy\n\nThe use of more than one „subordinary“ storylines and the definition of „Parent pages“ leads to a chapter hierarchy as known from books:\n\n1. (Main storyline), 1.1. (Superior sub storyline), 1.1.1. (Subordinate sub storyline) and so on.\n\nThis hierarchy can be edited afterwards by clicking on the pen symbol next to the storyline menu. A subordinate storyline can be turned into the main storyline as well.\n\n\n### Scroll successors\n\nIf you want to lead users from a last page of a subordinate chapter (1.1.1) to another position than\nthe „Parent page“ (e.g. to 2.1) you can define a „Scroll successor“. Therefore click on the blue pen symbol within the storyline settings. As an example the following sequence might be imaginable: 1 -> 1.1 -> 1.1.1 -> 2.1\n\nAttention: While editing only the selected chapter will be shown in the sidebar. To switch to the other chapters click onto the storyline menu."

data/entry_types/scrolled/app/helpers/pageflow_scrolled/favicon_helper.rb

@@ -3,19 +3,45 @@ module PageflowScrolled
   module FaviconHelper
     include ThemesHelper
 
-    def scrolled_favicons_for_entry(theme)
-      render partial: 'pageflow_scrolled/favicons/entry',
-      locals:
-      {
-        icon_path: scrolled_theme_asset_path(theme, 'favicons/favicon.ico'),
-        apple_touch_icon_path: scrolled_theme_asset_path(theme, 'favicons/apple-touch-icon.png'),
-        icon_32_path: scrolled_theme_asset_path(theme, 'favicons/favicon-32x32.png'),
-        icon_16_path: scrolled_theme_asset_path(theme, 'favicons/favicon-16x16.png'),
-        safari_pinned_tab_path: scrolled_theme_asset_path(theme, 'favicons/safari-pinned-tab.svg'),
-        webmanifest_path: scrolled_theme_asset_path(theme, 'favicons/site.webmanifest'),
-        msapplication_image: scrolled_theme_asset_path(theme, 'favicons/browserconfig.xml'),
-        theme_color: theme.options[:theme_color]
-      } 
+    def scrolled_favicons_for_entry(entry, entry_mode: :published)
+      render(
+        'pageflow_scrolled/favicons/entry',
+        manifest_path: entry_mode == :published && pageflow.entry_manifest_path(
+          entry,
+          format: 'webmanifest'
+        ),
+
+        svg_path: entry.theme.files.dig(:favicon, :original),
+
+        png_16_path: scrolled_theme_asset_path(
+          entry.theme,
+          'favicons/favicon-16x16.png',
+          theme_file_role: :favicon_png,
+          theme_file_style: :w16
+        ),
+        png_32_path: scrolled_theme_asset_path(
+          entry.theme,
+          'favicons/favicon-32x32.png',
+          theme_file_role: :favicon_png,
+          theme_file_style: :w32
+        ),
+
+        apple_touch_icon_path: scrolled_theme_asset_path(
+          entry.theme,
+          'favicons/apple-touch-icon.png',
+          theme_file_role: :favicon_png,
+          theme_file_style: :w180
+        ),
+
+        ico_path: scrolled_theme_asset_path(
+          entry.theme,
+          'favicons/favicon.ico',
+          theme_file_role: :favicon_ico,
+          theme_file_style: :original
+        ),
+
+        theme_color: entry.theme.options[:theme_color]
+      )
     end
   end
 end

data/entry_types/scrolled/app/helpers/pageflow_scrolled/generated_media_queries_helper.rb

@@ -0,0 +1,55 @@
+module PageflowScrolled
+  # @api private
+  module GeneratedMediaQueriesHelper
+    def generated_media_queries_tags_for(html)
+      safe_join(
+        [
+          content_tag(:script,
+                      'window.pageflowScrolledSSRAspectRatioMediaQueries = true;'),
+          content_tag(:style,
+                      generated_media_queries_css_for(html))
+        ]
+      )
+    end
+
+    def generated_media_queries_css_for(html)
+      aspect_ratio_class_strings = html.scan(/class="[^"]*aspectRatio[^"]*"/)
+
+      ratio_classes =
+        aspect_ratio_class_strings
+        .flat_map { |s| s.scan(/aspectRatio(Mobile)?([0-9]+)/) }
+        .uniq
+
+      ratio_classes.map { |match|
+        generated_aspec_ratio_media_query(
+          mobile_suffix: match[0],
+          numerator: match[1]
+        )
+      }.join
+    end
+
+    private
+
+    def generated_aspec_ratio_media_query(numerator:, mobile_suffix:)
+      orientation = mobile_suffix ? '(orientation: portrait) and ' : ''
+
+      # WARNING: This CSS snippet needs to be kept in sync with the
+      # corresponding snippet in useBackdropSectionClassName hook
+      <<-CSS
+        @media #{orientation}(min-aspect-ratio: #{numerator}/1000) {
+          section.aspectRatio#{mobile_suffix}#{numerator} {
+             --backdrop-positioner-transform: var(--backdrop-positioner-min-ar-transform);
+             --backdrop-positioner-width: var(--backdrop-positioner-min-ar-width);
+             --backdrop-positioner-height: var(--backdrop-positioner-min-ar-height);
+
+             --motif-placeholder-width: var(--motif-placeholder-min-ar-width);
+
+             --motif-display-top: var(--motif-display-min-ar-top);
+             --motif-display-bottom: var(--motif-display-min-ar-bottom);
+             --motif-display-height: var(--motif-display-min-ar-height);
+          }
+        }
+      CSS
+    end
+  end
+end

data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb

@@ -1,9 +1,13 @@
 module PageflowScrolled
   # @api private
   module ThemesHelper
-    def scrolled_theme_asset_path(theme, path, theme_file_role: nil, relative_url: false)
+    def scrolled_theme_asset_path(theme,
+                                  path,
+                                  theme_file_role: nil,
+                                  theme_file_style: :resized,
+                                  relative_url: false)
       path =
-        theme.files.dig(theme_file_role, :resized) ||
+        theme.files.dig(theme_file_role, theme_file_style) ||
         asset_pack_path("media/pageflow-scrolled/themes/#{theme.name}/#{path}")
 
       if relative_url

data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb

@@ -6,4 +6,6 @@
 
 <%= javascript_include_tag 'pageflow/vendor' %>
 <%= javascript_include_tag 'pageflow/editor/vendor' %>
+
+<%= scrolled_webpack_public_path_script_tag %>
 <%= scrolled_editor_javascript_packs_tag(entry) %>

data/entry_types/scrolled/app/views/pageflow_scrolled/entries/_manifest.json.jbuilder

@@ -0,0 +1,16 @@
+json.icons do
+  json.array! %w[192 512] do |size|
+    json.type 'image/png'
+
+    json.src(
+      scrolled_theme_asset_path(
+        theme,
+        "favicons/android-chrome-#{size}x#{size}.png",
+        theme_file_role: :favicon_png,
+        theme_file_style: :"w#{size}"
+      )
+    )
+
+    json.sizes "#{size}x#{size}"
+  end
+end

data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<%= content_tag(:html, lang: I18n.locale) do %>
+<%= content_tag(:html, lang: @entry.locale) do %>
   <head>
     <title><%= pretty_entry_title(@entry) %></title>
 
@@ -10,7 +10,7 @@
     <%= social_share_meta_tags_for(@entry) %>
     <%= meta_tags_for_entry(@entry) %>
 
-    <%= scrolled_favicons_for_entry(@entry.theme) %>
+    <%= scrolled_favicons_for_entry(@entry, entry_mode: @widget_scope) %>
 
     <%= javascript_include_tag 'pageflow_scrolled/legacy' %>
     <%= scrolled_frontend_stylesheet_packs_tag(@entry, widget_scope: @widget_scope) %>
@@ -31,6 +31,12 @@
         }
       </script>
     <% end %>
+
+    <% ssr_html = @skip_ssr ? '' : render_scrolled_entry(@entry) %>
+
+    <% if !@skip_ssr && (params[:frontend] == 'v2' || @entry.feature_state('frontend_v2')) %>
+      <%= generated_media_queries_tags_for(ssr_html) %>
+    <% end %>
   </head>
   <body>
     <%= structured_data_for_entry(@entry) unless @skip_structured_data %>
@@ -38,7 +44,7 @@
     <%= render 'pageflow_scrolled/entries/global_notices' %>
 
     <div id="fullscreenRoot"></div>
-    <div id="root"><%= render_scrolled_entry(@entry) unless @skip_ssr %></div>
+    <div id="root"><%= ssr_html %></div>
 
     <div id='template-widget-container'>
       <%= render_widgets(@entry, scope: @widget_scope, insert_point: :bottom_of_entry) %>

data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder

@@ -14,14 +14,14 @@ json.config do
   json.default_file_rights entry.account.default_file_rights
 
   json.legal_info do
-    theming = entry.theming
+    site = entry.site
     json.imprint do
-      json.label raw(theming.imprint_link_label)
-      json.url theming.imprint_link_url
+      json.label raw(site.imprint_link_label)
+      json.url site.imprint_link_url
     end
     json.copyright do
-      json.label raw(theming.copyright_link_label)
-      json.url theming.copyright_link_url
+      json.label raw(site.copyright_link_label)
+      json.url site.copyright_link_url
     end
     json.privacy do
       json.label I18n.t('pageflow.public.privacy_notice')

data/entry_types/scrolled/app/views/pageflow_scrolled/favicons/_entry.html.erb

@@ -1,10 +1,16 @@
-<link rel='icon' href='<%= icon_path %>' type='image/ico'>
-<link rel='icon' type='image/png' sizes='32x32' href='<%= icon_32_path %>'>
-<link rel='icon' type='image/png' sizes='16x16' href='<%= icon_16_path %>'>
-
-<link rel='apple-touch-icon' sizes='180x180' href='<%= apple_touch_icon_path %>'>
-<link rel='manifest' href='<%= webmanifest_path %>'>
-<link rel='mask-icon' href='<%= safari_pinned_tab_path %>' color='#5bbad5'>
-<meta name='msapplication-TileColor' content='#da532c'>
-<meta name="msapplication-config" content='<%= msapplication_image %>'>
-<meta name='theme-color' content='<%= theme_color %>'>
+<link rel="icon" sizes="any" href="<%= ico_path %>">
+
+<% if svg_path %>
+  <link rel="icon" href="<%= svg_path %>" type="image/svg+xml">
+<% else %>
+  <link rel="icon" type="image/png" sizes="32x32" href="<%= png_32_path %>">
+  <link rel="icon" type="image/png" sizes="16x16" href="<%= png_16_path %>">
+<% end %>
+
+<link rel="apple-touch-icon" href="<%= apple_touch_icon_path %>">
+
+<% if manifest_path %>
+  <link rel="manifest" href="<%= manifest_path %>">
+<% end %>
+
+<meta name="theme-color" content="<%= theme_color %>">