Title: Image Shortcake Author: Daniel Bachhuber Published: Èbìbí 20, 2015 Last modified: Ògún 27, 2015 --- Ṣàwárí àwọn plugin Plugin yìí **kò tíì ṣe àyẹ̀wò pẹ̀lú àwọn ìtújáde mẹ́ta pàtàkì tó kẹ́yìn ti WordPress**. Ó lè jẹ́ pé a kò tọ́jú tàbí ṣe àtìlẹ́yìn fún un mọ́, ó sì lè ní àwọn ọ̀ràn ìbámu nígbà tí a bá lò ó pẹ̀lú àwọn ẹ̀yà WordPress tuntun. ![](https://s.w.org/plugins/geopattern-icon/image-shortcake.svg) # Image Shortcake Láti ọwọ́ [Daniel Bachhuber](https://profiles.wordpress.org/danielbachhuber/) [Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/image-shortcake.0.1.0.zip) * [Àwọn àlàyé](https://yor.wordpress.org/plugins/image-shortcake/#description) * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/image-shortcake/#reviews) * [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/image-shortcake/#installation) * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/image-shortcake/#developers) [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/image-shortcake/) ## Àpèjúwe When images are inserted into posts from the media library or media uploader, only the html of the `` tag and the link around it (if any) are preserved. This means that themes which want to change the way images are marked up in content donÌtumọ̀ Yorùbá: ’t have an easy way of doing this. Image Shortcake is an attempt to solve this problem, by saving images in post content as _shortcodes_ rather than HTML. The output of shortcodes can be easily filtered in themes, plugins and templates, and since the original attachment data is preseved as attributes on the shortcode, it becomes much easier for modify the way images are marked up in themes. For best results, use this with the [Shortcake (Shortcode UI)](https://github.com/fusioneng/Shortcake) plugin. Shortcake offers an easy to use interface to manage shortcodes in post content. What could you use this for? Well, at [Fusion](http://fusion.net) we use this shortcode for: * **Responsive Images**. By filtering the output of the `[img]` shortcode image tag, weÌtumọ̀ Yorùbá: ’re able to insert the `srcset` attribute, so that all of the images on our site are served responsively to browsers that support that. * **Inline sharing buttons**. WeÌtumọ̀ Yorùbá: ’ve added share links to each of the images on our site. Because these are inserted through a filter on a shortcode and not in the post content, itÌtumọ̀ Yorùbá: ’s easy to modify them on the fly. And having this logic in template files rather in on-page javascript that runs after page load makes it quicker for users. * **Photo credits**. WeÌtumọ̀ Yorùbá: ’ve added “credit” as an image meta field, and we use a filter on ‘img_shortcode_output_after_linkify’ to display it on all images. See the [Installation](https://yor.wordpress.org/plugins/image-shortcake/?output_format=md#Installation) section for more ideas and tips for custom image templates. [Get involved with the project](https://github.com/fusioneng/image-shortcake) on Github. ## Àwọn àwòrán ìbòjú [⌊This is the shortcode UI form as accessed from Insert Media > Insert Post Element.( Note that you can also insert images as usual, by inserting them in the Media Library- they will be transparently converted into shortcodes behind the scenes for you.)⌉⌊ This is the shortcode UI form as accessed from Insert Media > Insert Post Element.( Note that you can also insert images as usual, by inserting them in the Media Library- they will be transparently converted into shortcodes behind the scenes for you.)⌉[ This is the shortcode UI form as accessed from **Insert Media > Insert Post Element**.( Note that you can also insert images as usual, by inserting them in the Media Library Ìtumọ̀ Yorùbá: – they will be transparently converted into shortcodes behind the scenes for you.) [⌊Once inserted into a post, the image preview renders in the editor just as it normally would. The Shortcake plugin's edit/delete buttons are available to modify the shortcode through the provided UI.⌉⌊Once inserted into a post, the image preview renders in the editor just as it normally would. The Shortcake plugin's edit/delete buttons are available to modify the shortcode through the provided UI.⌉[ Once inserted into a post, the image preview renders in the editor just as it normally would. The Shortcake pluginÌtumọ̀ Yorùbá: ’s edit/delete buttons are available to modify the shortcode through the provided UI. ## Ìgbéwọlẹ̀ #### Customizing Output The whole point of using shortcodes rather than HTML tags for images is that you can customize the markup of images in your theme. This plugin offers three primary hooks to modify the output: * `img_shortcode_output_img_tag`: Filters the output of the tag before wrapping it in link or caption * `img_shortcode_output_after_linkify`: Filters the output of the tag after wrapping in link * `img_shortcode_output_after_captionify`: Filters the output of the tag after wrapping in link and attaching caption You can, of course, disregard the markup generated by this plugin altogether and use a template part for images if you want. This example adds EXIF data below all images containing those fields, in all post content: in the themeÌtumọ̀ Yorùbá: ’s `functions.php`: ``` ` add_filter( 'img_shortcode_output_img_tag', 'load_image_template', 10, 2 ); function load_image_template( $_, $attributes ) { ob_start(); get_template_part( 'inline-image' ); return ob_get_clean(); } ` ``` in a template file called `inline-image.php`: ``` ` "$class $align attachment-$size", 'alt' => $alt, ) ); if ( is_array( $exif_data ) ) { echo ''; } ` ``` #### Data Migration The plugin comes with two [WP-CLI](http://wp-cli.org) commands to migrate images in your existing content into the `[img]` shortcode format used by this plugin. _Note: if it isnÌtumọ̀ Yorùbá: ’t clear, this is an early release Ìtumọ̀ Yorùbá:— use at your own risk, and make sure youÌtumọ̀ Yorùbá: ’ve backed up your posts before migrating!_ ``` wp image-shortcake migrate [--dry-run] ``` This command searches the post content of the posts specified in ``, and replaces any `` tags or `[caption]` shortcodes with `[img]` shortcodes. Currently it only catches images added through the media library; custom img tags will not be converted. If you add the `--dry-run` flag, no replacements will actually be performed, just a summary report of the changes which would have been made. ``` wp image-shortcake revert [--dry-run] ``` This command finds all `[img]` shortcodes in the content of any of the posts specified in ``, and replaces them with the markup that would be generated by those shortcodes. Note that this runs any filters in your theme, so that if you have filtered the output of the shortcodes at any output, those filters will be reflected in the coverted post content. ## Àwọn àgbéyẹ̀wò ![](https://secure.gravatar.com/avatar/76608d69915353f11913a82565deb771520c7857362c91ca3a399f9b4e4c76e4? s=60&d=retro&r=g) ### 󠀁[Works terrifically!](https://wordpress.org/support/topic/works-terrifically/)󠁿 [Christina](https://profiles.wordpress.org/carasmo/) Bélú 18, 2017 Works great with ShortCake. Love the filters! Please update this code so it doesnÌtumọ̀ Yorùbá: ’t scare people away. Thanks! [ Ka gbogbo àgbéyẹ̀wò 1 ](https://wordpress.org/support/plugin/image-shortcake/reviews/) ## Àwọn Olùkópa & Olùgbéejáde “Image Shortcake” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí. Àwọn Olùkópa * [ Daniel Bachhuber ](https://profiles.wordpress.org/danielbachhuber/) * [ fusionengineering ](https://profiles.wordpress.org/fusionengineering/) * [ goldenapples ](https://profiles.wordpress.org/goldenapples/) [Túmọ̀ “Image Shortcake” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/image-shortcake) ### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè? [Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/image-shortcake/), ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/image-shortcake/), tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/image-shortcake/) nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/image-shortcake/?limit=100&mode=stop_on_copy&format=rss). ## Àkọsílẹ̀ àwọn àyípadà #### 0.1.0 (May 1, 2015) * Initial release ## Àkójọpọ̀ Meta * Ẹ̀yà **0.1.0** * Ìgbàgbọ́hùn tó kẹ́yìn **ọdún 11 sẹ́yìn** * Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **10+** * Ẹ̀yà WordPress ** 3.0.1 tàbí ju bẹ́ẹ̀ lọ ** * Dánwò dé **4.3.34** * Èdè * [English (US)](https://wordpress.org/plugins/image-shortcake/) * Àwọn àmì * [images](https://yor.wordpress.org/plugins/tags/images/)[shortcodes](https://yor.wordpress.org/plugins/tags/shortcodes/) * [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/image-shortcake/advanced/) ## Àwọn ìbò 5 lára àwọn ìràwọ̀ 5. * [ 1 5-star review ](https://wordpress.org/support/plugin/image-shortcake/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/image-shortcake/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/image-shortcake/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/image-shortcake/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/image-shortcake/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/image-shortcake/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/image-shortcake/reviews/) ## Àwọn Olùkópa * [ Daniel Bachhuber ](https://profiles.wordpress.org/danielbachhuber/) * [ fusionengineering ](https://profiles.wordpress.org/fusionengineering/) * [ goldenapples ](https://profiles.wordpress.org/goldenapples/) ## Ìrànlọ́wọ́ Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́? [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/image-shortcake/)