X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=admin_pages.html;h=e6630f5ea121ee6cf6f85daae350d777a9d4dc6d;hb=ddc328b5b754c573d029b410375fc78b6da7c443;hp=59af576a758696ff29cc02688d5559b28e4e5d15;hpb=efec949cce9a02539f6b1dc50735334903ecc570;p=wfpl-cms.git

diff --git a/admin_pages.html b/admin_pages.html
index 59af576..e6630f5 100644
--- a/admin_pages.html
+++ b/admin_pages.html
@@ -47,6 +47,7 @@
 			display: inline-block;
 			overflow: hidden;
 			text-align: center;
+			background-size: contain;
 			background-position: 50% 50%;
 			background-repeat: no-repeat;
 			background-color: transparent;
@@ -62,6 +63,9 @@
 	<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: []
@@ -90,7 +94,7 @@
 			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;
@@ -98,51 +102,33 @@
 			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 = '&nbsp;';
 			} 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 += '">&nbsp</div>' + caption;
+			code += '</div>'
 			CKEDITOR.dialog.getCurrent().hide();
 			CKEDITOR.currentInstance.insertElement(CKEDITOR.dom.element.createFromHtml(code));
 		}
@@ -164,7 +150,7 @@
 					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>'