display: inline-block;
overflow: hidden;
text-align: center;
+ background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: transparent;
<script>
window.cke_wfpl_images = {
images: ~wfpl_images_json~,
+ full_width: ~wfpl_image_width_full~,
+ small_width: ~wfpl_image_width_small~,
+ thumb_width: ~wfpl_image_width_thumb~,
next_id: 0,
selected: [],
editors: []
var selected = window.cke_wfpl_images.selected[plugin_id];
var editor = window.cke_wfpl_images.editors[plugin_id];
var image;
- var code, width, height, src, size, caption;
+ var code, src, caption;
if (selected == null) {
CKEDITOR.dialog.getCurrent().hide();
return;
image = window.cke_wfpl_images.images[selected];
switch(align) {
case 'left':
- code = '<span class="wfpl_ifl"'
+ code = '<div class="wfpl_li">'
+ break;
+ case 'centered':
+ code = '<div class="wfpl_ci">'
break;
case 'right':
- code = '<span class="wfpl_ifr"'
+ code = '<div class="wfpl_ri">'
break;
- case 'centered': case 'full':
- code = '<div class="wfpl_ic"'
+ case 'full':
+ code = '<div class="wfpl_fi">'
break;
}
- size = image.sizes.replace(/^\s+|\s+$/g, '').split(/\s\+/)[0];
- width = image.image_width;
- height = image.image_height;
- src = image.image;
+ code += '<div class="wfpl_i"'
+ src =
+ image.src.substr(0, image.src.length - 4)
+ + 'w'
+ + window.cke_wfpl_images[align == 'full' ? 'full_width' : 'small_width']
+ + image.src.substr(image.src.length - 4);
if (image.caption == '') {
caption = ' ';
} else {
caption = enc_html(image.caption);
}
- if (align != 'full') {
- var wh = size.split('x');
- wh[0] = parseInt(wh[0]);
- wh[1] = parseInt(wh[1]);
- if (width / height > wh[0] / wh[1]) {
- height = Math.round(height * wh[0] / width);
- width = wh[0];
- } else {
- width = Math.round(width * wh[1] / height);
- height = wh[1];
- }
- size = '' + wh[0] + '-' + wh[1]; // dash instead of x
- src = src.substr(0, src.length - 4) + '-' + size + src.substr(src.length - 4);
- }
- height += 4;
code += ' style="background-image: url(/' + src + ');';
- code += ' width: ' + width + 'px;';
- code += ' padding-top: ' + height + 'px;';
- code += '">' + caption;
- switch(align) {
- case 'left': case 'right':
- code += '</span>'
- break;
- case 'centered': case 'full':
- code += '</div>'
- break;
- }
+ code += ' padding-top: ' + image.aspect;
+ code += '"> </div>' + caption;
+ code += '</div>'
CKEDITOR.dialog.getCurrent().hide();
CKEDITOR.currentInstance.insertElement(CKEDITOR.dom.element.createFromHtml(code));
}
thumbs = '<div class="cke_wfpl_thumbs">'
for (i in window.cke_wfpl_images.images) {
im = window.cke_wfpl_images.images[i];
- thumbs += '<div class="'+selected+'cke_wfpl_thumb" onclick="return window.cke_wfpl_images_thumb_click('+plugin_id+', this, '+im.id+')" style="background-image: url('+im.thumb+')">'+ enc_html(im.name.length > 0 ? im.name : im.caption) + '</div>';
+ thumbs += '<div class="'+selected+'cke_wfpl_thumb" onclick="return window.cke_wfpl_images_thumb_click('+plugin_id+', this, '+im.id+')" style="background-image: url('+im.src.substr(0, im.src.length - 4) + 'w' + window.cke_wfpl_images.thumb_width + im.src.substr(im.src.length - 4) + ')">'+ enc_html(im.name.length > 0 ? im.name : im.caption) + '</div>';
selected = '';
}
thumbs += '</div>'
});
function make_wysiwyg(name) {
CKEDITOR.replace(name, {
- 'contentsCss': 'style.css?m=~style.css mtime~',
+ 'contentsCss': 'css.css?m=~css.css mtime~',
'allowedContent': true,
bodyId: '~$basename~' + '_wysiwyg_' + name,
'stylesSet': [