Questions & Answers

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

Type a product name