Parcourir la source

Added support for uploading responsive images.

Szymon Kupś il y a 8 ans
Parent
commit
32f682f3e7

+ 9 - 0
packages/ckeditor5-upload/src/filerepository.js

@@ -444,6 +444,15 @@ mix( FileLoader, ObservableMixin );
  *		original: 'http://server/orginal-size.image.png'
  *		original: 'http://server/orginal-size.image.png'
  *	}
  *	}
  *
  *
+ * Additionally, other image sizes can be provided:
+ *
+ *	{
+ *		original: 'http://server/orginal-size.image.png',
+ *		'160': 'http://server/size-160.image.png',
+ *		'500': 'http://server/size-500.image.png',
+ *		'1000': 'http://server/size-1000.image.png'
+ *	}
+ *
  * Take a look at {@link module:upload/filerepository~Adapter example Adapter implementation} and
  * Take a look at {@link module:upload/filerepository~Adapter example Adapter implementation} and
  * {@link module:upload/filerepository~FileRepository#createAdapter createAdapter method}.
  * {@link module:upload/filerepository~FileRepository#createAdapter createAdapter method}.
  *
  *

+ 12 - 0
packages/ckeditor5-upload/src/imageuploadengine.js

@@ -121,6 +121,18 @@ export default class ImageUploadEngine extends Plugin {
 				doc.enqueueChanges( () => {
 				doc.enqueueChanges( () => {
 					batch.setAttribute( imageElement, 'uploadStatus', 'complete' );
 					batch.setAttribute( imageElement, 'uploadStatus', 'complete' );
 					batch.setAttribute( imageElement, 'src', data.original );
 					batch.setAttribute( imageElement, 'src', data.original );
+
+					// Srcset attribute for responsive images support.
+					const srcsetAttribute = Object.keys( data )
+						// Filter out keys that are not integers.
+						.filter( key => !isNaN( parseInt( key, 10 ) ) )
+
+						// Create `srcset` attribute value from all elements in the array.
+						.reduce( ( acc, key ) => `${ data[ key ] } ${ key }w,`, '' );
+
+					if ( srcsetAttribute != '' ) {
+						batch.setAttribute( imageElement, 'srcset', srcsetAttribute );
+					}
 				} );
 				} );
 
 
 				clean();
 				clean();