diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index e65853a6fbdf7..3c721c6b749db 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -378,7 +378,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre - **Name:** core/image - **Category:** media -- **Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone) +- **Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone) - **Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width ## Latest Comments diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js index f9804e876ad32..bde49069199ce 100644 --- a/packages/block-editor/src/hooks/align.js +++ b/packages/block-editor/src/hooks/align.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { createHigherOrderComponent } from '@wordpress/compose'; -import { addFilter } from '@wordpress/hooks'; +import { addFilter, applyFilters } from '@wordpress/hooks'; import { getBlockSupport, getBlockType, @@ -138,7 +138,18 @@ function BlockEditAlignmentToolbarControls( { nextAlign = ''; } } - setAttributes( { align: nextAlign } ); + /** + * This filter exists so that the image block can reset + * its aspect ratio and custom size when the alignment is set + * to either wide or full. + */ + const filteredAttributes = applyFilters( + 'block-library.image.alignmentUpdate', + blockName, + { ...attributes, align: nextAlign } + ); + + setAttributes( filteredAttributes ); }; return ( diff --git a/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap index 5f1889dfa4aaf..dc4e66619ea0c 100644 --- a/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap +++ b/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap @@ -1,40 +1,40 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Embed block alignment options sets Align center option 1`] = ` -" -
+" +
https://twitter.com/notnownikki
" `; exports[`Embed block alignment options sets Align left option 1`] = ` -" -
+" +
https://twitter.com/notnownikki
" `; exports[`Embed block alignment options sets Align right option 1`] = ` -" -
+" +
https://twitter.com/notnownikki
" `; exports[`Embed block alignment options sets Full width option 1`] = ` -" -
+" +
https://twitter.com/notnownikki
" `; exports[`Embed block alignment options sets Wide width option 1`] = ` -" -
+" +
https://twitter.com/notnownikki
" diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index d665a8a8f7708..7131c444751c7 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -10,7 +10,8 @@ "textdomain": "default", "attributes": { "align": { - "type": "string" + "type": "string", + "default": "" }, "url": { "type": "string", @@ -95,6 +96,7 @@ } }, "supports": { + "align": [ "left", "center", "right", "wide", "full" ], "anchor": true, "color": { "text": false, diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index c58a96e594911..5c1f955955966 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -10,8 +10,6 @@ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; import { Placeholder } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { - BlockAlignmentControl, - BlockControls, BlockIcon, MediaPlaceholder, useBlockProps, @@ -106,7 +104,6 @@ export function ImageEdit( { url = '', alt, caption, - align, id, width, height, @@ -255,16 +252,6 @@ export function ImageEdit( { } } - function updateAlignment( nextAlign ) { - const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign ) - ? { width: undefined, height: undefined } - : {}; - setAttributes( { - ...extraUpdatedAttributes, - align: nextAlign, - } ); - } - let isTemp = isTemporaryImage( id, url ); // Upload a temporary image on mount. @@ -375,14 +362,6 @@ export function ImageEdit( { clientId={ clientId } blockEditingMode={ blockEditingMode } /> - { ! url && blockEditingMode === 'default' && ( - - - - ) } } onSelect={ onSelectImage } diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 804ae9e1671f6..4cda87c4e451f 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -44,7 +44,6 @@ import { MEDIA_TYPE_IMAGE, BlockControls, InspectorControls, - BlockAlignmentToolbar, BlockStyles, store as blockEditorStore, blockSettingsScreens, @@ -212,7 +211,6 @@ export class ImageEdit extends Component { this.onSetFeatured = this.onSetFeatured.bind( this ); this.onFocusCaption = this.onFocusCaption.bind( this ); this.onSelectURL = this.onSelectURL.bind( this ); - this.updateAlignment = this.updateAlignment.bind( this ); this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind( this ); this.setMappedAttributes = this.setMappedAttributes.bind( this ); @@ -391,18 +389,6 @@ export class ImageEdit extends Component { } ); } - updateAlignment( nextAlign ) { - const extraUpdatedAttributes = Object.values( - WIDE_ALIGNMENTS.alignments - ).includes( nextAlign ) - ? { width: undefined, height: undefined } - : {}; - this.props.setAttributes( { - ...extraUpdatedAttributes, - align: nextAlign, - } ); - } - onSetNewTab( value ) { const updatedLinkTarget = getUpdatedLinkTargetSettings( value, @@ -711,10 +697,6 @@ export class ImageEdit extends Component { onClick={ open } /> - ); diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index ae5f749fff3b5..e321b25ad4ad5 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -25,7 +25,6 @@ import { MediaReplaceFlow, store as blockEditorStore, useSettings, - BlockAlignmentControl, __experimentalImageEditor as ImageEditor, __experimentalGetElementClassName, __experimentalUseBorderProps as useBorderProps, @@ -333,21 +332,6 @@ export default function Image( { } ); } - function updateAlignment( nextAlign ) { - const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign ) - ? { - width: undefined, - height: undefined, - aspectRatio: undefined, - scale: undefined, - } - : {}; - setAttributes( { - ...extraUpdatedAttributes, - align: nextAlign, - } ); - } - useEffect( () => { if ( ! isSelected ) { setIsEditingImage( false ); @@ -435,12 +419,6 @@ export default function Image( { const controls = ( <> - { hasNonContentControls && ( - - ) } { hasNonContentControls && ( { diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 1477fa99c702c..357b35b896c44 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -13,6 +13,7 @@ import edit from './edit'; import metadata from './block.json'; import save from './save'; import transforms from './transforms'; +import { addFilter } from '@wordpress/hooks'; const { name } = metadata; @@ -56,4 +57,27 @@ export const settings = { deprecated, }; -export const init = () => initBlock( { name, metadata, settings } ); +export const init = () => { + addFilter( + 'block-library.image.alignmentUpdate', + 'core/block-library/filters', + ( blockName, updatedAttributes ) => { + if ( blockName !== 'core/image' ) { + return updatedAttributes; + } + if ( [ 'wide', 'full' ].includes( updatedAttributes.align ) ) { + return { + ...updatedAttributes, + ...{ + width: undefined, + height: undefined, + aspectRatio: undefined, + scale: undefined, + }, + }; + } + return updatedAttributes; + } + ); + initBlock( { name, metadata, settings } ); +}; diff --git a/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap index 56a5fe3c25912..90b5caf51ccfa 100644 --- a/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap +++ b/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap @@ -11,7 +11,7 @@ exports[`Image block transformations to Columns block 1`] = ` `; exports[`Image block transformations to Cover block 1`] = ` -" +"

Mountain

@@ -25,7 +25,7 @@ exports[`Image block transformations to File block 1`] = ` `; exports[`Image block transformations to Gallery block 1`] = ` -" +" diff --git a/test/integration/fixtures/blocks/core__gallery-with-caption.json b/test/integration/fixtures/blocks/core__gallery-with-caption.json index 12b516606641d..14c7c6c98d5d1 100644 --- a/test/integration/fixtures/blocks/core__gallery-with-caption.json +++ b/test/integration/fixtures/blocks/core__gallery-with-caption.json @@ -19,6 +19,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190", "alt": "Image gallery image", "caption": "", @@ -32,6 +33,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "https://sergioestevaofolio.files.wordpress.com/2017/09/cropped-l1001498-1.jpg?w=580", "alt": "Image gallery image", "caption": "", diff --git a/test/integration/fixtures/blocks/core__gallery.json b/test/integration/fixtures/blocks/core__gallery.json index 8b7a1000d37cc..f1d8434226efb 100644 --- a/test/integration/fixtures/blocks/core__gallery.json +++ b/test/integration/fixtures/blocks/core__gallery.json @@ -19,6 +19,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190", "alt": "Image gallery image", "caption": "", @@ -32,6 +33,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "https://sergioestevaofolio.files.wordpress.com/2017/09/cropped-l1001498-1.jpg?w=580", "alt": "Image gallery image", "caption": "", diff --git a/test/integration/fixtures/blocks/core__gallery__columns.json b/test/integration/fixtures/blocks/core__gallery__columns.json index d0c40b3d3a9a9..43a33d4a81dd4 100644 --- a/test/integration/fixtures/blocks/core__gallery__columns.json +++ b/test/integration/fixtures/blocks/core__gallery__columns.json @@ -19,6 +19,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190", "alt": "Image gallery image", "caption": "", @@ -32,6 +33,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "https://sergioestevaofolio.files.wordpress.com/2017/09/cropped-l1001498-1.jpg?w=580", "alt": "Image gallery image", "caption": "", diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-1.json b/test/integration/fixtures/blocks/core__gallery__deprecated-1.json index 9e15ee7f1c714..f1970572f03f1 100644 --- a/test/integration/fixtures/blocks/core__gallery__deprecated-1.json +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-1.json @@ -14,6 +14,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "title", "linkDestination": "none" @@ -24,6 +25,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", "alt": "title", "linkDestination": "none" diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-2.json b/test/integration/fixtures/blocks/core__gallery__deprecated-2.json index a60776801eb33..72e23d734bef0 100644 --- a/test/integration/fixtures/blocks/core__gallery__deprecated-2.json +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-2.json @@ -14,6 +14,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "title", "caption": "", @@ -26,6 +27,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", "alt": "title", "caption": "", diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-3.json b/test/integration/fixtures/blocks/core__gallery__deprecated-3.json index 9ac2c197819ce..b7fc4c8b56ca4 100644 --- a/test/integration/fixtures/blocks/core__gallery__deprecated-3.json +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-3.json @@ -13,6 +13,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "title", "caption": "", @@ -24,6 +25,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", "alt": "title", "caption": "", diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-4.json b/test/integration/fixtures/blocks/core__gallery__deprecated-4.json index dad150cc96b48..2bd7c5bfe8f69 100644 --- a/test/integration/fixtures/blocks/core__gallery__deprecated-4.json +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-4.json @@ -14,6 +14,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190", "alt": "", "caption": "", @@ -26,6 +27,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "https://sergioestevaofolio.files.wordpress.com/2017/09/cropped-l1001498-1.jpg?w=580", "alt": "", "caption": "", @@ -38,6 +40,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "https://sergioestevaofolio.files.wordpress.com/2017/05/cropped-l1005945-2-2.jpg?w=580", "alt": "", "caption": "", diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-5.json b/test/integration/fixtures/blocks/core__gallery__deprecated-5.json index 9ef1f03ba0934..025d25b026b5a 100644 --- a/test/integration/fixtures/blocks/core__gallery__deprecated-5.json +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-5.json @@ -14,6 +14,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg", "alt": "", "caption": "", @@ -28,6 +29,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg", "alt": "", "caption": "", @@ -42,6 +44,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg", "alt": "", "caption": "", diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-6.json b/test/integration/fixtures/blocks/core__gallery__deprecated-6.json index 9ef1f03ba0934..025d25b026b5a 100644 --- a/test/integration/fixtures/blocks/core__gallery__deprecated-6.json +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-6.json @@ -14,6 +14,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg", "alt": "", "caption": "", @@ -28,6 +29,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg", "alt": "", "caption": "", @@ -42,6 +44,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg", "alt": "", "caption": "", diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.json b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json index 4eaf85b46906d..3e2f6ed66a3e7 100644 --- a/test/integration/fixtures/blocks/core__gallery__deprecated-7.json +++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json @@ -18,6 +18,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg", "alt": "", "caption": "", @@ -32,6 +33,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg", "alt": "", "caption": "", @@ -46,6 +48,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg", "alt": "", "caption": "", @@ -77,6 +80,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg", "alt": "", "caption": "", @@ -91,6 +95,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg", "alt": "", "caption": "", @@ -105,6 +110,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg", "alt": "", "caption": "", diff --git a/test/integration/fixtures/blocks/core__image.json b/test/integration/fixtures/blocks/core__image.json index 3da5557bb05ca..a397a05ea1918 100644 --- a/test/integration/fixtures/blocks/core__image.json +++ b/test/integration/fixtures/blocks/core__image.json @@ -3,6 +3,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", "caption": "" diff --git a/test/integration/fixtures/blocks/core__image__attachment-link.json b/test/integration/fixtures/blocks/core__image__attachment-link.json index 055e4a61d2f38..481c9e5e267e3 100644 --- a/test/integration/fixtures/blocks/core__image__attachment-link.json +++ b/test/integration/fixtures/blocks/core__image__attachment-link.json @@ -3,6 +3,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", "caption": "", diff --git a/test/integration/fixtures/blocks/core__image__custom-link-class.json b/test/integration/fixtures/blocks/core__image__custom-link-class.json index 2b5a36e78bdb8..921a455cb80f9 100644 --- a/test/integration/fixtures/blocks/core__image__custom-link-class.json +++ b/test/integration/fixtures/blocks/core__image__custom-link-class.json @@ -3,6 +3,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", "caption": "", diff --git a/test/integration/fixtures/blocks/core__image__custom-link-rel.json b/test/integration/fixtures/blocks/core__image__custom-link-rel.json index dc3a04a932c41..40c7082a07a39 100644 --- a/test/integration/fixtures/blocks/core__image__custom-link-rel.json +++ b/test/integration/fixtures/blocks/core__image__custom-link-rel.json @@ -3,6 +3,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", "caption": "", diff --git a/test/integration/fixtures/blocks/core__image__custom-link.json b/test/integration/fixtures/blocks/core__image__custom-link.json index 54cfa81f72b14..8a9a7cca61683 100644 --- a/test/integration/fixtures/blocks/core__image__custom-link.json +++ b/test/integration/fixtures/blocks/core__image__custom-link.json @@ -3,6 +3,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", "caption": "", diff --git a/test/integration/fixtures/blocks/core__image__media-link.json b/test/integration/fixtures/blocks/core__image__media-link.json index 0d411f713203d..6856f7e3112b3 100644 --- a/test/integration/fixtures/blocks/core__image__media-link.json +++ b/test/integration/fixtures/blocks/core__image__media-link.json @@ -3,6 +3,7 @@ "name": "core/image", "isValid": true, "attributes": { + "align": "", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", "caption": "",