aw schriftzug.png aw logo 60x60.png

RenderImageSelector
Renders a widget to select an image attached to a topic

2019-05-02 - 09:27 | Version 5 |

Documentation

Select an image attached to a OBJECT topic

Parameters
  • OBJECT, default BASEWEB.BASETOPIC
  • SELECTED
  • FIELDNAME
  • EXTENSIONS, defaults to jpe?g|JPE?G|gif|GIF|png|PNG|svg|SVG|webp|WEBP

Implementation

%STARTINCLUDE%<!-- -->
<div class="fwbImageSelector clearfix">
  %ATTACHMENTS{
    topic="%OBJECT{default="%BASEWEB%.%BASETOPIC%"}%"
    name=".*\.(%EXTENSIONS{default="jpe?g|JPE?G|gif|GIF|png|PNG|svg|SVG|webp|WEBP"}%)$"
    _exclude="%DEFAULT{default=""}%"
    sort="name"
    format="<label $percntIF{\"'%SELECTED%'='$urlpath'\" then=\"class='selected'\"}$percnt>
        <input type='radio' name='%FIELDNAME{default="file"}%' value='$urlpath' $percntIF{\"'%SELECTED%'='$urlpath'\" then=\" checked='checked'\"}$percnt />
        <img src='%SCRIPTURLPATH{"rest"}%/ImagePlugin/resize?topic=$web.$topic&file=$name&size=x100>^;&crop=on' alt='$name' style='height:100px' />
      </label>"
  }%
</div>
%ADDTOZONE{"script" 
   id="RENDERIMAGESELECTOR::JS"
   requires="JQUERYPLUGIN::LIVEQUERY"
   text="<script type='text/javascript' src='%PUBURLPATH%/Applications/RenderImageSelector/script.js?t=%GMTIME{"$epoch"}%'></script>"
}%%ADDTOZONE{"head" 
   id="RENDERIMAGESELECTOR::CSS" 
   text="<link rel='stylesheet' href='%PUBURLPATH%/Applications/RenderImageSelector/style.css?t=%GMTIME{"$epoch"}%' media='all' />"
}%<!-- -->%STOPINCLUDE%

Css

.fwbImageSelector {
   margin:0.5em 0;
}
.fwbImageSelector input {
  display:none;
}
.fwbImageSelector label {
  float:left;
  margin:0 5px 5px 0;
  padding:1px;
}
.fwbImageSelector label img {
  float:left;
  border-radius:5px;
  overflow:hidden;
  margin:2px;
}
.fwbImageSelector label.selected img {
  border:2px solid #b22222;
  box-shadow:2px 2px 10px -1px #000;
  margin:-1px 1px 1px -1px;
}

Javascript

"use strict";
jQuery(function($) {
   $(".fwbImageSelector").livequery(function() {
      var $selector = $(this);

      $selector.find("label").on("click", function() {
         var $this = $(this),
             isChecked = $this.find("input").prop("checked");

         $selector.find("input:checked").prop("checked", false);
         $selector.find(".selected").removeClass("selected");

         if (!isChecked) {
            $this.addClass("selected").find("input").prop("checked", true);
         }
         return false;
      });
   });
});

Test

Copyright

© 2006-2015 Michael Daum http://michaeldaumconsulting.com

This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. For more details read the LICENSE.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY, to the extent permitted by law; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
Topic attachments
I Attachment Action Size Date Who Comment
nobody.pngpng nobody.png manage 2 K 2019-05-02 - 09:18 ProjectContributor  
script.jsjs script.js manage 549 bytes 2019-05-02 - 09:18 ProjectContributor Generated by AttachContentPlugin
style.csscss style.css manage 397 bytes 2019-05-02 - 09:18 ProjectContributor Generated by AttachContentPlugin
Impressum © Alexander Weimer GmbH