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) {
+ function make_wysiwyg(name, bodyid_postfix) {
CKEDITOR.replace(name, {
- 'contentsCss': 'style.css?m=~style.css mtime~',
+ 'contentsCss': 'css.css?m=~css.css mtime~',
'allowedContent': true,
- bodyId: '~$basename~' + '_wysiwyg_' + name,
+ bodyId: '~$basename~' + '_wysiwyg_' + (bodyid_postfix ? bodyid_postfix : name),
'stylesSet': [
{ name: 'Paragraph', element: 'p'},
{ name: 'Page Headline', element: 'h1'},
]
});
}
+ window.admin_pages_cur_layout = null
+ function admin_pages_layout(layout) {
+ if (layout === undefined) {
+ layout = document.getElementById('layout').value
+ }
+ if (typeof layout === 'string') {
+ layout = parseInt(layout);
+ }
+ console.log(layout);
+ if (layout === window.admin_pages_cur_layout) {
+ return;
+ }
+ // hide/show sidebar editor
+ if (layout === 0) {
+ document.getElementById('sidebar_editor').style.display = 'none'
+ } else {
+ document.getElementById('sidebar_editor').style.display = 'block'
+ }
+ // remove existing ckeditors
+ if (window.admin_pages_cur_layout !== null) {
+ for (name in CKEDITOR.instances) {
+ CKEDITOR.instances[name].destroy();
+ }
+ }
+ // create ckeditors
+ if (layout === 0) {
+ make_wysiwyg('content', 'content_full_main');
+ } else if (layout === 1) {
+ make_wysiwyg('content', 'content_with_sidebar_main');
+ make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_plain');
+ } else {
+ make_wysiwyg('content', 'content_with_sidebar_main');
+ make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_bordered');
+ }
+
+ window.admin_pages_cur_layout = layout
+ }
</script>
<!--~}~-->
<div class="field_notes">(If you'd like this page to appear in the navigation with a shorter title.)</div>
<div class="field"><input type="text" name="nav_title" value="~nav_title attr~"></div>
+ <div class="caption">Page Template/Layout</div>
+ <div class="field"><select id="layout" name="layout" onchange="return admin_pages_layout()"><!--~layout options~--></select></div>
+
<div class="caption">Page Contents</div>
<div class="field_notes">
<ul class="first">
<li>To insert an image: place the cursor at the beginning of a line and click the "insert image" button in the editor. Note that you will only be able to insert images that you have already uploaded on the <a href="admin_images" target="_blank">manage images</a> page.</li>
</ul>
</div>
- <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea><script>make_wysiwyg('content');</script></div>
+ <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea></div>
+
+ <div id="sidebar_editor" style="display: ~sidebar_editor_display~">
+ <div class="caption">Sidebar Contents</div>
+ <div class="field_notes">
+ <ul class="first">
+ <li>Ditto to the notes above "Page Contents" field.</li>
+ <li>Centered images appear smaller in this editor than on the real page.</li>
+ <li>Don't use the "Insert on Left" and "or Insert on Right" options for images inserting images in this sidebar.</li>
+ </ul>
+ </div>
+ <div class="field"><textarea class="html_editor" rows="20" cols="50" id="sidebar_content" name="sidebar_content">~sidebar_content html~</textarea></div>
+ </div>
+
+ <script>admin_pages_layout()</script>
<!--
<div class="caption">Description</div>
Got questions, comments, patches, etc.? Contact Jason Woofenden