PBillhardt
I'm new here

WebClient: Bilder zuschneiden wird nicht angezeigt

Hallo zusammen,

wir haben auf einem FS 5.0.510 verschiedene Projekte in denen auch Bilder verwendet werden. Es splittet sich quasi in Intra- und Internetprojekte. Im Intranet werden bei Bildern im WebClient die Crop-Optionen beim Hovern unten rechts am Bild angezeigt, bei den Internetprojekten allerdings nicht. Die Funktion soll in den Internetprojekten identisch sein. Die Vorlage sieht wie folgt aus...

Absatzvorlage

Formular

<FS_REFERENCE name="st_banner" hFill="yes">

    <FILTER>

      <ALLOW type="media"/>

    </FILTER>

    <LANGINFOS>

      <LANGINFO lang="*" label="Image"/>

    </LANGINFOS>

    <PROJECTS>

      <LOCAL name=".">

        <SOURCES>

          <FOLDER name="root" store="mediastore"/>

        </SOURCES>

      </LOCAL>

    </PROJECTS>

  </FS_REFERENCE>

Ausgabekanal

Hier wird das Bild nochmal durch eine Rendervorlage geschickt, welches das fertige IMG-Element ausgibt.

Rendervorlage

Hier wird neben width, height und src (...) entsprechend für WebEdit das cms_value ausgeführt.

<!--

st_banner := Die Referenz

resolution := Gültiger Name einer Resolution

isWebEdit := true/false

-->

<img $CMS_IF(isWebEdit)$$CMS_VALUE(editorId(editorName:st_banner, resolution:resolution))$$CMS_END_IF$ ... />

Ausgabe im WebClient

<img fs-resolution="Keyvisual_large" fs-editor-type="CMS_MODULE" fs-sorting-group="304973" fs-display-store="PAGE" fs-meta="false" fs-reload-preview="false" fs-revision="-1" fs-id="eyJpZCI6MzA1MjA3LCJzdG9yZSI6IlBBR0VTVE9SRSJ9" fs-has-actions="d346288ea99a88589de2b93051e05bc0,1a659ed1cad40643647bfd2dca796b09,7adc448c84da168dc88b3a1d4fd6c79e,5d79a4d7db54cf3785b7149a8778fab5,e1bc322d82fca17e3d34a192af65745f,d92d08001113d1132f182c6f88cb41a4,6fddb99f7a8058a2bc6475199de80a3b,ce43a8db9c128c0df16015ec5a04706f"  fs-attrs="eyJsYW5ndWFnZUFiYnJldmlhdGlvbiI6IkVOIiwiY2hhbm5lbCI6MjM5NDgxLCJyZWxlYXNlIjpmYWxzZSwiYWN0aW9ucyI6WyJkMzQ2Mjg4ZWE5OWE4ODU4OWRlMmI5MzA1MWUwNWJjMCIsIjFhNjU5ZWQxY2FkNDA2NDM2NDdiZmQyZGNhNzk2YjA5IiwiN2FkYzQ0OGM4NGRhMTY4ZGM4OGIzYTFkNGZkNmM3OWUiLCI1ZDc5YTRkN2RiNTRjZjM3ODViNzE0OWE4Nzc4ZmFiNSIsImUxYmMzMjJkODJmY2ExN2UzZDM0YTE5MmFmNjU3NDVmIiwiZDkyZDA4MDAxMTEzZDExMzJmMTgyYzZmODhjYjQxYTQiLCI2ZmRkYjk5ZjdhODA1OGEyYmM2NDc1MTk5ZGU4MGEzYiIsImNlNDNhOGRiOWMxMjhjMGRmMTYwMTVlYzVhMDQ3MDZmIl0sImlubGluZUVkaXRhYmxlIjpmYWxzZX0-" fs-release="false" fs-inline-editable="false" fs-type="Section" src="/fs5webedit/preview/239478/media/EN/current/317916/Keyvisual_large/x.jpg" alt="" title="" width="980" height="653" border="0">

Ich dachte erst das ich noch etwas einstellen müsste, aber die Einstellungen in den Projekten sind identisch. Weiß jemand was hier schief läuft? Langsam gehen mir die Ideen aus woran es liegen könnte.

Viele Grüße

Patrick Billhardt

0 Kudos
7 Replies
mbergmann
Crownpeak employee

Hallo Patrick,

mir fällt zumindest spontan auf, dass der Name der Eingabekomponente bei editorName nicht in Anführungszeichen steht.

Versuch es mal mit

editorId(editorName:"st_banner", ...)

Viele Grüße

Michael

0 Kudos

Hallo Michael,

ja klar, daran hat es gelegen. Und ich suche mir einen Wolf! Vielen Dank!

Viele Grüße

Patrick

0 Kudos
marro
Crownpeak employee

Hallo Patrick,

ich hab es gerade mal nachgestellt und kann Michaels Vermutung stützen: Setzt Du den Namen der Eingabekomponente in Anführungszeichen, wird als fs-editor-type der korrekte Wert FS_REFERENCE gesetzt und nicht CMS_MODULE. Dann wird auch die Option für den Bildzuschnitt angezeigt.

Viele Grüße

Donato

0 Kudos
PBillhardt
I'm new here

Hallo zusamman,

mir ist noch ein Anwendungsfall aufgefallen, in dem das Symbol nicht angezeigt wird. Die Situation ist die selbe wie im Eingangspost beschrieben, allerdings hängt darüber noch ein weiterer Absatz mit einer FS_LIST. Der Absatz nutzt den Oben beschriebenen Absatz, um daraus einen Slider zusammen zu bauen. Hier resultiert folgende vereinfachte Ausgabe im WebClient:

<div fs-editor-type="CMS_MODULE" fs-sorting-group="368619" fs-display-store="PAGE" fs-meta="false" fs-reload-preview="false" fs-revision="-1" fs-id="eyJpZCI6MzY4NjIyLCJzdG9yZSI6IlBBR0VTVE9SRSJ9" fs-has-actions="d346288ea99a88589de2b93051e05bc0,1a659ed1cad40643647bfd2dca796b09,7adc448c84da168dc88b3a1d4fd6c79e,5d79a4d7db54cf3785b7149a8778fab5,e1bc322d82fca17e3d34a192af65745f,d92d08001113d1132f182c6f88cb41a4,6fddb99f7a8058a2bc6475199de80a3b,ce43a8db9c128c0df16015ec5a04706f"  fs-attrs="eyJsYW5ndWFnZUFiYnJldmlhdGlvbiI6IkVOIiwiY2hhbm5lbCI6MzYzNjY1LCJyZWxlYXNlIjpmYWxzZSwiYWN0aW9ucyI6WyJkMzQ2Mjg4ZWE5OWE4ODU4OWRlMmI5MzA1MWUwNWJjMCIsIjFhNjU5ZWQxY2FkNDA2NDM2NDdiZmQyZGNhNzk2YjA5IiwiN2FkYzQ0OGM4NGRhMTY4ZGM4OGIzYTFkNGZkNmM3OWUiLCI1ZDc5YTRkN2RiNTRjZjM3ODViNzE0OWE4Nzc4ZmFiNSIsImUxYmMzMjJkODJmY2ExN2UzZDM0YTE5MmFmNjU3NDVmIiwiZDkyZDA4MDAxMTEzZDExMzJmMTgyYzZmODhjYjQxYTQiLCI2ZmRkYjk5ZjdhODA1OGEyYmM2NDc1MTk5ZGU4MGEzYiIsImNlNDNhOGRiOWMxMjhjMGRmMTYwMTVlYzVhMDQ3MDZmIl0sImlubGluZUVkaXRhYmxlIjpmYWxzZX0-" fs-release="false" fs-inline-editable="false" fs-type="Section">

    <ul>

        <li><img fs-resolution="Keyvisual_large" fs-display-store="PAGE" fs-meta="false" fs-reload-preview="false" fs-revision="-1" fs-id="eyJpZCI6MzY4NjIyLCJzdG9yZSI6IlBBR0VTVE9SRSIsIm5vZGVzIjpbInN0X2Jhbm5lciJdfQ--"  fs-has-actions="d346288ea99a88589de2b93051e05bc0,1a659ed1cad40643647bfd2dca796b09,7adc448c84da168dc88b3a1d4fd6c79e,5d79a4d7db54cf3785b7149a8778fab5,e1bc322d82fca17e3d34a192af65745f,d92d08001113d1132f182c6f88cb41a4,6fddb99f7a8058a2bc6475199de80a3b,ce43a8db9c128c0df16015ec5a04706f"  fs-attrs="eyJsYW5ndWFnZUFiYnJldmlhdGlvbiI6IkVOIiwiY2hhbm5lbCI6MzYzNjY1LCJyZWxlYXNlIjpmYWxzZSwiYWN0aW9ucyI6WyJkMzQ2Mjg4ZWE5OWE4ODU4OWRlMmI5MzA1MWUwNWJjMCIsIjFhNjU5ZWQxY2FkNDA2NDM2NDdiZmQyZGNhNzk2YjA5IiwiN2FkYzQ0OGM4NGRhMTY4ZGM4OGIzYTFkNGZkNmM3OWUiLCI1ZDc5YTRkN2RiNTRjZjM3ODViNzE0OWE4Nzc4ZmFiNSIsImUxYmMzMjJkODJmY2ExN2UzZDM0YTE5MmFmNjU3NDVmIiwiZDkyZDA4MDAxMTEzZDExMzJmMTgyYzZmODhjYjQxYTQiLCI2ZmRkYjk5ZjdhODA1OGEyYmM2NDc1MTk5ZGU4MGEzYiIsImNlNDNhOGRiOWMxMjhjMGRmMTYwMTVlYzVhMDQ3MDZmIl0sImlubGluZUVkaXRhYmxlIjpmYWxzZX0-" fs-release="false" fs-inline-editable="false" fs-type="GADGET" src="/fs5webedit/preview/363662/media/EN/current/368628/Keyvisual_large/x.jpg" alt="" title="" width="980" height="290" border="0" /></li>

        <li><img fs-resolution="Keyvisual_large" fs-display-store="PAGE" fs-meta="false" fs-reload-preview="false" fs-revision="-1" fs-id="eyJpZCI6MzY4NjIyLCJzdG9yZSI6IlBBR0VTVE9SRSIsIm5vZGVzIjpbInN0X2Jhbm5lciJdfQ--"  fs-has-actions="d346288ea99a88589de2b93051e05bc0,1a659ed1cad40643647bfd2dca796b09,7adc448c84da168dc88b3a1d4fd6c79e,5d79a4d7db54cf3785b7149a8778fab5,e1bc322d82fca17e3d34a192af65745f,d92d08001113d1132f182c6f88cb41a4,6fddb99f7a8058a2bc6475199de80a3b,ce43a8db9c128c0df16015ec5a04706f"  fs-attrs="eyJsYW5ndWFnZUFiYnJldmlhdGlvbiI6IkVOIiwiY2hhbm5lbCI6MzYzNjY1LCJyZWxlYXNlIjpmYWxzZSwiYWN0aW9ucyI6WyJkMzQ2Mjg4ZWE5OWE4ODU4OWRlMmI5MzA1MWUwNWJjMCIsIjFhNjU5ZWQxY2FkNDA2NDM2NDdiZmQyZGNhNzk2YjA5IiwiN2FkYzQ0OGM4NGRhMTY4ZGM4OGIzYTFkNGZkNmM3OWUiLCI1ZDc5YTRkN2RiNTRjZjM3ODViNzE0OWE4Nzc4ZmFiNSIsImUxYmMzMjJkODJmY2ExN2UzZDM0YTE5MmFmNjU3NDVmIiwiZDkyZDA4MDAxMTEzZDExMzJmMTgyYzZmODhjYjQxYTQiLCI2ZmRkYjk5ZjdhODA1OGEyYmM2NDc1MTk5ZGU4MGEzYiIsImNlNDNhOGRiOWMxMjhjMGRmMTYwMTVlYzVhMDQ3MDZmIl0sImlubGluZUVkaXRhYmxlIjpmYWxzZX0-" fs-release="false" fs-inline-editable="false" fs-type="GADGET" src="/fs5webedit/preview/363662/media/EN/current/461443/Keyvisual_large/x.jpg" alt="" title="" width="980" height="292" border="0" /></li>

        <li><img fs-resolution="Keyvisual_large" fs-display-store="PAGE" fs-meta="false" fs-reload-preview="false" fs-revision="-1" fs-id="eyJpZCI6MzY4NjIyLCJzdG9yZSI6IlBBR0VTVE9SRSIsIm5vZGVzIjpbInN0X2Jhbm5lciJdfQ--"  fs-has-actions="d346288ea99a88589de2b93051e05bc0,1a659ed1cad40643647bfd2dca796b09,7adc448c84da168dc88b3a1d4fd6c79e,5d79a4d7db54cf3785b7149a8778fab5,e1bc322d82fca17e3d34a192af65745f,d92d08001113d1132f182c6f88cb41a4,6fddb99f7a8058a2bc6475199de80a3b,ce43a8db9c128c0df16015ec5a04706f"  fs-attrs="eyJsYW5ndWFnZUFiYnJldmlhdGlvbiI6IkVOIiwiY2hhbm5lbCI6MzYzNjY1LCJyZWxlYXNlIjpmYWxzZSwiYWN0aW9ucyI6WyJkMzQ2Mjg4ZWE5OWE4ODU4OWRlMmI5MzA1MWUwNWJjMCIsIjFhNjU5ZWQxY2FkNDA2NDM2NDdiZmQyZGNhNzk2YjA5IiwiN2FkYzQ0OGM4NGRhMTY4ZGM4OGIzYTFkNGZkNmM3OWUiLCI1ZDc5YTRkN2RiNTRjZjM3ODViNzE0OWE4Nzc4ZmFiNSIsImUxYmMzMjJkODJmY2ExN2UzZDM0YTE5MmFmNjU3NDVmIiwiZDkyZDA4MDAxMTEzZDExMzJmMTgyYzZmODhjYjQxYTQiLCI2ZmRkYjk5ZjdhODA1OGEyYmM2NDc1MTk5ZGU4MGEzYiIsImNlNDNhOGRiOWMxMjhjMGRmMTYwMTVlYzVhMDQ3MDZmIl0sImlubGluZUVkaXRhYmxlIjpmYWxzZX0-" fs-release="false" fs-inline-editable="false" fs-type="GADGET" src="/fs5webedit/preview/363662/media/EN/current/368626/Keyvisual_large/x.jpg" alt="" title="" width="980" height="290" border="0" /></li>

    </ul>

</div>

Hier scheint kein Editor-Type-Attribut auf das Element geschrieben zu werden. Gibt es hierzu auch eine Lösung?

Viele Grüße

Patrick

0 Kudos

Hallo zusammen,

Ich müsste hier nochmal nachhaken. Das Problem ist bisher noch nicht ganz gelöst, allerdings werden die Bilder jetzt richtig erkannt (FS_REFERENCE), nachdem ich dem editorId als attribut das Target meines aktuell durchlaufenen Elements gegeben habe. Es wird jetzt die Liste aus dem letzten Post, allerdings mit den unten angegebenen img-Einträgen generiert

<img fs-resolution="Keyvisual" fs-editor-type="FS_REFERENCE" fs-display-store="PAGE" fs-transfer-constraint="mfile=false&amp;mpicture=true&amp;hide=CS_D68ATASET&amp;allow=MS_MED68IA&amp;stype=MED68IA&amp;multi=false&amp;etype=&amp;txt=false&amp;up=false" fs-meta="false" fs-reload-preview="false" fs-revision="-1" fs-id="eyJpZCI6NTgzMjA4LCJzdG9yZSI6IlBBR0VTVE9SRSIsIm5vZGVzIjpbInN0X2Jhbm5lciJdfQ--" fs-has-actions="441714b20a8411fefd320d3ad56a8db5" fs-attrs="eyJsYW5ndWFnZUFiYnJldmlhdGlvbiI6IkVOIiwiY2hhbm5lbCI6MjM5NDgxLCJyZWxlYXNlIjpmYWxzZSwiYWN0aW9ucyI6WyI0NDE3MTRiMjBhODQxMWZlZmQzMjBkM2FkNTZhOGRiNSJdLCJpbmxpbmVFZGl0YWJsZSI6dHJ1ZX0-" fs-release="false" fs-inline-editable="true" fs-type="GADGET" src="/fs5webedit/preview/239478/media/EN/current/317918/Keyvisual/x.jpg" width="797" height="294" border="0" />

Mir ist aufgefallen, dass im HTML nicht wie bei anderen Bildern dieser Teil generiert wird von FirstSpirit:

<span class="fs-element-toolbar" fs-toolbar="true" style="right: 439px; top: 191px; display: none;">

     [...]

     <span class="fs-element-toolbar-actions">

        <span class="fs-element-toolbar-anchor">

            <span title="Keyvisual slideshow bearbeiten" fs-tooltip="easyEditSection" style="display: inline-block; line-height: 1px; cursor: pointer;">

                <img src="">

            </span>

        </span>

    </span>

</span>

Bei Bildern wo das Crop-Icon angezeigt wird, wird folgendes HTML generiert:

<span class="fs-element-toolbar" fs-toolbar="true" style="right: 457.5px; bottom: 241px; display: none;">

    [...]

    <span class="fs-element-toolbar-actions">

        <span class="fs-element-toolbar-anchor">

            <span title="Bildausschnitt bearbeiten" style="display: inline-block; line-height: 1px; cursor: pointer;">

                <img src="">

            </span>

        </span>

    </span>

</span>

Weiß jemand eine Lösung? Die Daten kommen aus einer FS_LIST (inline).

Viele Grüße

Patrick

0 Kudos

Hallo Patrick,

Wenn Du eine FS_LIST mit INLINE betreibst, dann referenzierst Du bestimmt ein weiteres (Section-) Template, oder ( <TEMPLATES source="sectiontemplates">)?

Bei mir sieht die Ausgabe der FS_LIST (st_pictures) mit INLINE-Datenquelle folgendermaßen aus:

$CMS_IF(!st_pictures.isEmpty)$
        <ul>
     $CMS_VALUE(st_pictures)$
        </ul>
$CMS_END_IF$

In der HTML-Ausgabe für ein "st_picture", also in dem in der FS_LIST referenzierten Template habe ich den Inline-Editor ganz klassisch im li-Tag, der den img-Tag umschließt, definiert:

$CMS_VALUE(editorId(editorName:"st_picture", resolution:"GALLERY_LIGHT"))$>

Das sollte auch mit dem IMG-Tag funktionieren.

Viele Grüße Marian

0 Kudos

Hallo Patrick,

benötigst du noch weitere Hilfe oder konnten dir die gegebenen Antworten bereits weiterhelfen? In diesem Fall wäre es nett, wenn du die "richtige Antwort" entsprechend markierst.

Solltest du zwischenzeitlich eine eigene Lösung gefunden haben, wäre es super, wenn du diese hier bereitstellst.

Viele Grüße

Michaela

0 Kudos