<$
var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";

if ( cssClass ) {cssClass = "wzp-pos-bild " + cssClass;}
else {cssClass = "wzp-pos-bild";}
if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}

var PosAbsFix = article.value('pos-abs-fix', '');
var Vert = article.value('vertical', '');
var Hor = article.value('horizontal', '');
var zInd = article.value('zindex', '');

var cssselector = '.WZP-Artikel_' + article.id + '.wzp-pos-bild ';
var headstyle = "";

if ( PosAbsFix !== "" ){headstyle += cssselector + "{position: " + PosAbsFix + " !important;}\n";}
if ( Vert !== "" ){headstyle += cssselector + "{top: " + Vert + "px !important;}\n";}
if ( Hor !== "" ){headstyle += cssselector + "{left: " + Hor + "px !important;}\n";}
if ( zInd !== "" ){headstyle += cssselector + "{z-index: " + zInd + " !important;}\n";}

system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var cssClass = article.cssClass || "";	var inlineCss = article.inlineCss || "";

if ( cssClass ) {cssClass = "wzp-pos-bild img " + cssClass;}
else {cssClass = "wzp-pos-bild img";}
if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}

var BrBild = article.value('bildbr', '');

var cssselector = '.WZP-Artikel_' + article.id + '.wzp-pos-bild img ';
var headstyle = "";

if ( BrBild !== "" ){headstyle += cssselector + "{width: " + BrBild + "px !important;}\n";}

system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break1 = article.value("break-1","");
var PosMob1 = article.value("pos-mob-1","");
var VertMob1 = article.value("vert-mob-1","");
var HorMob1 = article.value("hor-mob-1","");
var AusblMob1 = article.value("ausbl-mob-1","");
var ZindexMob1 = article.value("zindex-mob-1","");
var headstyle = '@media (max-width: ' + Break1 + 'px) {';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-pos-bild {';
headstyle += 'position: ' + PosMob1 + ' !important;';
headstyle += 'top: ' + VertMob1 + 'px !important;';
headstyle += 'left: ' + HorMob1 + 'px !important;';
headstyle += 'display: ' + AusblMob1 + ' !important;';
headstyle += 'z-index: ' + ZindexMob1 + ' !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break1 = article.value("break-1","");
var ImgMob1 = article.value("bildbr-mob-1","");
var headstyle = '@media (max-width: ' + Break1 + 'px) {';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-pos-bild img {';
headstyle += 'width: ' + ImgMob1 + 'px !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break2 = article.value("break-2","");
var PosMob2 = article.value("pos-mob-2","");
var VertMob2 = article.value("vert-mob-2","");
var HorMob2 = article.value("hor-mob-2","");
var AusblMob2 = article.value("ausbl-mob-2","");
var ZindexMob2 = article.value("zindex-mob-2","");
var headstyle = '@media (max-width: ' + Break2 + 'px) {';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-pos-bild {';
headstyle += 'position: ' + PosMob2 + ' !important;';
headstyle += 'top: ' + VertMob2 + 'px !important;';
headstyle += 'left: ' + HorMob2 + 'px !important;';
headstyle += 'display: ' + AusblMob2 + ' !important;';
headstyle += 'z-index: ' + ZindexMob2 + ' !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break2 = article.value("break-2","");
var ImgMob2 = article.value("bildbr-mob-2","");
var headstyle = '@media (max-width: ' + Break2 + 'px) {';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-pos-bild img {';
headstyle += 'width: ' + ImgMob2 + 'px !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break3 = article.value("break-3","");
var PosMob3 = article.value("pos-mob-3","");
var VertMob3 = article.value("vert-mob-3","");
var HorMob3 = article.value("hor-mob-3","");
var AusblMob3 = article.value("ausbl-mob-3","");
var ZindexMob3 = article.value("zindex-mob-3","");
var headstyle = '@media (max-width: ' + Break3 + 'px) {';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-pos-bild {';
headstyle += 'position: ' + PosMob3 + ' !important;';
headstyle += 'top: ' + VertMob3 + 'px !important;';
headstyle += 'left: ' + HorMob3 + 'px !important;';
headstyle += 'display: ' + AusblMob3 + ' !important;';
headstyle += 'z-index: ' + ZindexMob3 + ' !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break3 = article.value("break-3","");
var ImgMob3 = article.value("bildbr-mob-3","");
var headstyle = '@media (max-width: ' + Break3 + 'px) {';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-pos-bild img {';
headstyle += 'width: ' + ImgMob3 + 'px !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break4 = article.value("break-4","");
var PosMob4 = article.value("pos-mob-4","");
var VertMob4 = article.value("vert-mob-4","");
var HorMob4 = article.value("hor-mob-4","");
var AusblMob4 = article.value("ausbl-mob-4","");
var ZindexMob4 = article.value("zindex-mob-4","");
var headstyle = '@media (max-width: ' + Break4 + 'px) {';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-pos-bild {';
headstyle += 'position: ' + PosMob4 + ' !important;';
headstyle += 'top: ' + VertMob4 + 'px !important;';
headstyle += 'left: ' + HorMob4 + 'px !important;';
headstyle += 'display: ' + AusblMob4 + ' !important;';
headstyle += 'z-index: ' + ZindexMob4 + ' !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var Break4 = article.value("break-4","");
var ImgMob4 = article.value("bildbr-mob-4","");
var headstyle = '@media (max-width: ' + Break4 + 'px) {';
headstyle += '.WZP-Artikel_' + article.id + '.wzp-pos-bild img {';
headstyle += 'width: ' + ImgMob4 + 'px !important;';
headstyle += '}';
headstyle += '}';
system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>
<$
var imageEins = project.getImage(article.value("bild-1"));
var altTextEins = system.htmlEncode(system.removeHtmlTags(imageEins.altText));
var beschreibung = imageEins.description;
var titleEins = system.htmlEncode(system.removeHtmlTags(imageEins.description));
var imgsrc = imageEins.contentCopyPath;
var fullsrc = imageEins.workingCopyPath;
$>
<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->
<$=system.partial("article-begin.html")$>

<$ if (article.value("link-1", "") == ""){ /* no link selected */ $>
   <div class="wzp-pos-bild WZP-Artikel_<$=article.id$>" >
      <img src="<$= imageEins.contentCopyPath $>" alt="<$= altTextEins $>" title="<$= titleEins $>" />
   </div>
<$ } else { $>
   <a class="wzp-pos-bild WZP-Artikel_<$=article.id$>" 
      <$= system.partial('zplink-expanded.html', 'link-1') $>>
         <img src="<$= imageEins.contentCopyPath $>" alt="<$= altTextEins $>" title="<$= titleEins $>" />
      </a>
<$ } $>

<$ if ( system.preview ) { $>
   <!--############ ANFANG HINWEISFENSTER FUER LIVEVORSCHAU -->
    <!-- Preview-Code nur fuer internen Vorschau -->
   <div style="background-color:#d7daee; padding:15px; border-radius: 10px; box-shadow: inset 0px 0px 20px rgba(0, 51, 255, 0.99);">
      <img src="https://www.zella.de/widget/bilder/wzp.png" style="float:left; margin-right:33px;">
      <p style="font-size: 1.2em; font-weight: bold; color:#0371df">Position Bild</p>
      <p style="color:#0371df">Hier k&#246;nnen Sie das Widget &#246;ffnen oder l&#246;schen. Dieser Hinweis wird nur in der internen Vorschau angezeigt.</p>
   </div>
   <!--########## ENDE HINWEISFENSTER FUER LIVEVORSCHAU -->
<$ } $>


<$=system.partial("article-end.html")$>