Change theme:   

Image binding to content area

A jQuery based plugin that adds an fixed size image drag and drop area. User can change the image crop location. Data about image is saved to Edicy content area defined by user. It is useful if thumbnail images must be bound to pages or blog articles. Similar code is used in Edicy design Paris for blog article thumbnails.

Code

Get jquery.edicyThumbEditor.js and edicyThumbEditor.css from Github Edicy/edicy-jsplugins.

<link href="edicyThumbEditor.css" rel="stylesheet" />

<!-- Wrapper used for thumb editor rendering in editmode and for appending thumbs in other cases -->
<div id="thumb-wrapper"></div>

<!-- Content area where thumb data is bound --> 
<div id="thumb-data-wrapper">
    {% contentblock name="thumb-content" only="text" %}{% endcontentblock %}
</div>
<script type="text/javascript" src="jquery.edicyThumbEditor.js"></script>

<script type="text/javascript">
  {% if editmode %}
    
    // Thumb editor binding for editmode
    $('#thumb-wrapper').edicyThumbEditor({
      $saveTo: $('#thumb-data-wrapper'),
      width: 200,
      height: 200
    });

  {% else %}

    // Binding thumb appender for appending thumbs to content
    $('#thumb-wrapper').edicyAppendThumb({
      $dataInside: $('#thumb-data-wrapper'),
      width: 200,
      height: 200 
    });

  {% endif %}
</script> 
If data about the image from content is obtainable from content:
var thumb_data = $('.js-thumb-saver-data').data('thumb-info');
The data object structure:
{
    "src":"/photos/building-website-blog_large.jpg",
    "width": "512", // real image width
    "height": "278", // real image height
    "top": "0px", // top position shift of image that is fit into the given size of thumbeditor wrapper
    "left": "-85px" // left position shift of image that is fit into the given size of thumbeditor wrapper 
}
If somehow hhumb appender is not enough the easiest way to use this data is to make javascript create a div with the given background, position and background-size:cover
<div style="width:200px; height: 200px; background: url('/photos/building-website-blog_large.jpg') no-repeat -85px 0px;background-size: cover;"></div>

How it works

Thumb editor is intended to be used in editmode for binding image to content area (defined by parameter "$saveTo"). You have to define an element containing the editable area where the image is saved.












User drags drops image into editable area and image data is added to content area. The crop position can be changed via dragging.

Thumb appender gets data from content area inside a given element (defined by parameter "$dataInside") and appends thumbnail from the data. 

Appended thumbnail example:

Configuration

placeholder: Placeholder text. Default: "Drag cover image for this post here."

dragHelp: Additional image editing helper text. Default: "Drag image to adjust crop area."

editorHtml: Thumb editor html. Default:

 <div class="thumb-editor-wrapper" style="width: {{width_b}}px;">
  <div class="delete-btn"><span class="edy-ico edy-ico-close"></span></div>
  <div class="thumb-editor js-thumb-editor" style="width: {{width}}px; height: {{height}}px;">
    <span class="thumb-placeholder">
      {{placeholder}}
    </span>
  </div>
  <span class="thumb-additional-info">
    {{dragHelp}}
  </span>
</div>

thumbHtml: Thumb html. Default:

 <div class="thumb-wrapper"><img class="inner-image" src="{{src}}" /></div>

useOriginalImage: If true full size original image is used for displaying thumbnail. Otherwise image filt to 800x600px. Default: false.

width: width of thumbnail box. Default: 200.

height: width of thumbnail box. Default: 200.