Media: enable generating multiple mime types for image uploads; specifically WebP versions for JPEG images by default.
This changeset adds the capability for core media uploads to generate sub sized images in more than a single mime type. The output formats for each mime type can be controlled through a filter. WebP is used as an additional output format for JPEG images by default to improve front end performance.
When generating additional mime types, only images which are smaller than the respective original are retained. By default, additional mime type images are only generated for the built-in core image sizes and any custom sizes that have opted in.
Image meta is updated with a new 'sources' array containing file details for each mime type. Each image size in the 'sizes' array also gets a new 'sources' array that contains the image file details for each mime type.
This change also increases image upload retries to accommodate additional image sizes. It also adds a `$mime_type` parameter to the `wp_get_missing_image_subsizes` function and filter.
This change adds three new filters to enable full control of secondary mime image generation and output:
* A new filter `wp_image_sizes_with_additional_mime_type_support` that filters the sizes that support secondary mime type output. Developers can use this to control the output of additional mime type sub-sized images on a per size basis.
* A new filter `wp_upload_image_mime_transforms` that filters the output mime types for a given input mime type. Developers can use this to control generation of additional mime types for a given input mime type or even override the original mime type.
* A new filter `wp_content_image_mimes` which controls image mime type output selection and order for frontend content. Developers can use this to control the mime type output preference order for content images. Content images inserted from the media library will use the available image versions based on the order from this filter.
Thanks to the many contributors who helped develop, test and give feedback on this feature.
A haiku to summarize:
Upload a JPEG
Images of all sizes
Output as WebPs
Props flixos90, MatthiasReinholz, studiolxv, markhowellsmead, eatingrules, pbiron, mukesh27, joegrainger, mehulkaklotar, tweetythierry, akshitsethi, peterwilsoncc, eugenemanuilov, mitogh, shetheliving, clarkeemily, codekraft, mikeschroder, clorith, kasparsd, spacedmonkey, trevorpfromsandee, jb510, scofennellgmailcom, seedsca, cagsmith, karinclimber, dainemawer, baxbridge, grapplerulrich, sobatkras, chynnabenton, tonylocalword, barneydavey, kwillmorth, garymatthews919, olliejones, imarkinteractive, jeffpaul, feastdesignco, webbeetle, masteradhoc.
See #55443.
Built from https://develop.svn.wordpress.org/trunk@53751
git-svn-id: http://core.svn.wordpress.org/trunk@53310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-07-21 14:03:13 -04:00
|
|
|
var uploader,uploader_init,topWin=window.dialogArguments||opener||parent||top;function fileQueued(e){jQuery(".media-blank").remove();var a=jQuery("#media-items").children(),r=post_id||0;1==a.length&&a.removeClass("open").find(".slidetoggle").slideUp(200),jQuery('<div class="media-item">').attr("id","media-item-"+e.id).addClass("child-of-"+r).append('<div class="progress"><div class="percent">0%</div><div class="bar"></div></div>',jQuery('<div class="filename original">').text(" "+e.name)).appendTo(jQuery("#media-items")),jQuery("#insert-gallery").prop("disabled",!0)}function uploadStart(){try{void 0!==topWin.tb_remove&&topWin.jQuery("#TB_overlay").unbind("click",topWin.tb_remove)}catch(e){}return!0}function uploadProgress(e,a){var r=jQuery("#media-item-"+a.id);jQuery(".bar",r).width(200*a.loaded/a.size),jQuery(".percent",r).html(a.percent+"%")}function fileUploading(e,a){var r=104857600;r<parseInt(e.settings.max_file_size,10)&&a.size>r&&setTimeout(function(){a.status<3&&0===a.loaded&&(wpFileError(a,pluploadL10n.big_upload_failed.replace("%1$s",'<a class="uploader-html" href="#">').replace("%2$s","</a>")),e.stop(),e.removeFile(a),e.start())},1e4)}function updateMediaForm(){var e=jQuery("#media-items").children();1==e.length?(e.addClass("open").find(".slidetoggle").show(),jQuery(".insert-gallery").hide()):1<e.length&&(e.removeClass("open"),jQuery(".insert-gallery").show()),0<e.not(".media-blank").length?jQuery(".savebutton").show():jQuery(".savebutton").hide()}function uploadSuccess(e,a){var r=jQuery("#media-item-"+e.id);"string"==typeof a&&(a=a.replace(/^<pre>(\d+)<\/pre>$/,"$1"),/media-upload-error|error-div/.test(a))?r.html(a):(r.find(".percent").html(pluploadL10n.crunching),prepareMediaItem(e,a),updateMediaForm(),post_id&&r.hasClass("child-of-"+post_id)&&jQuery("#attachments-count").text(+jQuery("#attachments-count").text()+1))}function setResize(e){e?window.resize_width&&window.resize_height?uploader.settings.resize={enabled:!0,width:window.resize_width,height:window.resize_height,quality:100}:uploader.settings.multipart_params.image_resize=!0:delete uploader.settings.multipart_params.image_resize}function prepareMediaItem(e,a){var r="undefined"==typeof shortform?1:2,i=jQuery("#media-item-"+e.id);2==r&&2<shortform&&(r=shortform);try{void 0!==topWin.tb_remove&&topWin.jQuery("#TB_overlay").click(topWin.tb_remove)}catch(e){}isNaN(a)||!a?(i.append(a),prepareMediaItemInit(e)):i.load("async-upload.php",{attachment_id:a,fetch:r},function(){prepareMediaItemInit(e),updateMediaForm()})}function prepareMediaItemInit(r){var e=jQuery("#media-item-"+r.id);jQuery(".thumbnail",e).clone().attr("class","pinkynail toggle").prependTo(e),jQuery(".filename.original",e).replaceWith(jQuery(".filename.new",e)),jQuery("a.delete",e).on("click",function(){return jQuery.ajax({url:ajaxurl,type:"post",success:deleteSuccess,error:deleteError,id:r.id,data:{id:this.id.replace(/[^0-9]/g,""),action:"trash-post",_ajax_nonce:this.href.replace(/^.*wpnonce=/,"")}}),!1}),jQuery("a.undo",e).on("click",function(){return jQuery.ajax({url:ajaxurl,type:"post",id:r.id,data:{id:this.id.replace(/[^0-9]/g,""),action:"untrash-post",_ajax_nonce:this.href.replace(/^.*wpnonce=/,"")},success:function(){var e,a=jQuery("#media-item-"+r.id);(e=jQuery("#type-of-"+r.id).val())&&jQuery("#"+e+"-counter").text(+jQuery("#"+e+"-counter").text()+1),post_id&&a.hasClass("child-of-"+post_id)&&jQuery("#attachments-count").text(+jQuery("#attachments-count").text()+1),jQuery(".filename .trashnotice",a).remove(),jQuery(".filename .title",a).css("font-weight","normal"),jQuery("a.undo",a).addClass("hidden"),jQuery(".menu_order_input",a).show(),a.css({backgroundColor:"#ceb"}).animate({backgroundColor:"#fff"},{queue:!1,duration:500,complete:function(){jQuery(this).css({backgroundColor:""})}}).removeClass("undo")}}),!1}),jQuery("#media-item-"+r.id+".startopen").removeClass("startopen").addClass("open").find("slidetoggle").fadeIn()}function wpQueueError(e){jQuery("#media-upload-error").show().html('<div class="error"><p>'+e+"</p></div>")}function wpFileError(e,a){itemAjaxError(e.id,a)}function
|