humanmade / smart-media
Smart Media features for HM Cloud
Installs: 169 155
Dependents: 2
Suggesters: 0
Security: 0
Stars: 83
Watchers: 26
Forks: 7
Open Issues: 23
Type:wordpress-plugin
- dev-master
- 0.5.7
- 0.5.6
- 0.5.5
- 0.5.4
- 0.5.3
- 0.5.2
- 0.5.1
- 0.5.0
- 0.4.6
- 0.4.5
- 0.4.4
- 0.4.3
- 0.4.2
- 0.4.1
- 0.4.0
- 0.3.16
- 0.3.15
- 0.3.14
- 0.3.13
- 0.3.12
- 0.3.11
- 0.3.10
- 0.3.9
- 0.3.8
- 0.3.7
- 0.3.6
- 0.3.5
- 0.3.4
- 0.3.3
- 0.3.2
- 0.3.1
- 0.3.0
- 0.2.23
- 0.2.22
- 0.2.21
- 0.2.20
- 0.2.19
- 0.2.18
- 0.2.17
- 0.2.16
- 0.2.15
- 0.2.14
- 0.2.13
- 0.2.12
- 0.2.11
- 0.2.10
- 0.2.9
- 0.2.8
- 0.2.7
- 0.2.6
- 0.2.5
- 0.2.4
- 0.2.3
- 0.2.2
- 0.2.1
- 0.2.0
- 0.1.16
- 0.1.15
- 0.1.14
- 0.1.13
- 0.1.12
- 0.1.11
- 0.1.10
- 0.1.9
- 0.1.8
- dev-gh-actions
- dev-version-057
- dev-fix-syntax-error
- dev-231-optimization-fix
- dev-dependabot/npm_and_yarn/express-4.21.0
- dev-dependabot/npm_and_yarn/webpack-5.94.0
- dev-dependabot/npm_and_yarn/multi-d1d84b812c
- dev-srcset-crop-output-bug
- dev-dependabot/npm_and_yarn/webpack-dev-middleware-and-webpack-dev-server--removed
- dev-dependabot/npm_and_yarn/follow-redirects-1.15.6
- dev-dependabot/npm_and_yarn/tar-and-node-sass-6.2.0
- dev-dependabot/npm_and_yarn/babel/traverse-7.23.2
- dev-dependabot/npm_and_yarn/postcss-and-css-loader-8.4.31
- dev-v0-4-branch
- dev-v0-3-branch
- dev-0.3.12--branch
- dev-0.4.1--branch
- dev-0.3.11--branch
- dev-backport-158-to-v0-3-branch
- dev-0.3.10--branch
- dev-0.3.9--branch
- dev-0.3.8--branch
- dev-0.3.7--branch
- dev-0.3.6--branch
- dev-0.3.5--branch
- dev-0.3.4--branch
- dev-0.3.3--branch
- dev-release-0-3-3
- dev-0.3.2--branch
- dev-0.3.1--branch
- dev-v0-2-branch
- dev-0.2.22--branch
- dev-0.2.21--branch
- dev-0.2.20--branch
- dev-0.2.19--branch
- dev-0.2.18--branch
- dev-0.2.17--branch
- dev-0.2.16--branch
- dev-fix-feature-image-selection
- dev-0.2.15--branch
- dev-0.2.14--branch
- dev-0.2.13--branch
- dev-0.2.12--branch
- dev-0.2.11--branch
- dev-0.2.10--branch
- dev-0.2.9--branch
- dev-0.2.8--branch
- dev-0.2.7--branch
This package is auto-updated.
Last update: 2024-11-27 17:40:53 UTC
README
Smarter media features for WordPress.
Some features in this plugin will work on their own however some are designed to augment the existing tools we use such as Tachyon.
Features
Justified media library
The media library shows square thumbnails by default which can make it harder to find the right image. This feature makes the thumbnails keep their original aspect ratio, similar to the UI of Flickr.
To disable the feature add the following:
<?php add_filter( 'hm.smart-media.justified-library', '__return_false' );
Image editor
This feature overrides the built in WordPress image editing experience and gives you control over the crops of individual thumbs. There are also some UX improvements meaning there are fewer clicks required to make edits.
To disable the feature add the following:
<?php add_filter( 'hm.smart-media.cropper', '__return_false' );
The image cropping UI provides support for updating Gutenberg block attributes based on the current selection using the following filters:
smartmedia.cropper.updateBlockAttributesOnSelect.<block name>
smartmedia.cropper.selectSizeFromBlockAttributes.<block name>
In the above filters <block name>
should be replaced a dot separated version of your block name, for example core/image
becomes core.image
. The core image block attributes are mapped by default.
Mapping the selected image to block attributes:
addFilter( 'smartmedia.cropper.updateBlockAttributesOnSelect.core.image', 'smartmedia/cropper/update-block-on-select/core/image', /** * @param {?Object} attributes The filtered block attributes. Return null to bypass updating. * @param {Object} image The image data has the following shape: * { * name: <string>, The image size name * url: <string>, The URL for the sized image * width: <int>, The width in pixels * height: <int>, The height in pixels * label: <string>, The human readable name for the image size, only present for user selectable sizes * cropData: <?object>, Null or object containing x, y, width and height properties * } */ ( attributes, image ) => { // Only user selectable image sizes have a label so return early if this is missing. if ( ! image.label ) { return attributes; } return { sizeSlug: image.size, url: image.url, }; } );
Update the cropping UI selected size based on selected block attributes:
addFilter( 'smartmedia.cropper.selectSizeFromBlockAttributes.core.image', 'smartmedia/cropper/select-size-from-block-attributes/core/image', /** * @param {?String} size The image size slug. * @param {Object} block The currently selected block. */ ( size, block ) => { return size || block.attributes.sizeSlug || 'full'; } );
The function takes 2 parameters:
block
: The name of the block to map attributes forcallback
: A function that accepts the imagesize
name, animage
object containingurl
,width
,height
, crop data and label for the image size, and lastly the fullattachment
data object.
The callback should return an object or null
. Passing null
will prevent updating the currently selected block.
Roadmap
Planned features include:
- Duplicate image detection and consolidation
- EXIF data editor
Contributing
First of all thanks for using this plugin and thanks for contributing!
To get started check out the contributing documentation.