RenderImageSelector

Renders a widget to select an image attached to a topic

Documentation

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