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

%STARTATTACH{"style.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;
}
%ENDATTACH%

Javascript

%STARTATTACH{"script.js"}%
"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;
      });
   });
});
%ENDATTACH%

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.