Daniel Bachhuber

fusionengineering

goldenapples

When images are inserted into posts from the media library or media uploader, only the html of the <code><img></code> 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’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 <a href="https://github.com/fusioneng/Shortcake" rel="nofollow ugc">Shortcake (Shortcode UI)</a> plugin. Shortcake offers an easy to use interface to manage shortcodes in post content.
What could you use this for? Well, at <a href="http://fusion.net" rel="nofollow ugc">Fusion</a> we use this shortcode for:
<ul>
<li>
Responsive Images. By filtering the output of the <code>[img]</code> shortcode image tag, we’re able to insert the <code>srcset</code> attribute, so that all of 
the images on our site are served responsively to browsers that support that.
</li>
<li>
Inline sharing buttons. We’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’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.
</li>
<li>
Photo credits. We’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.
</li>
</ul>
See the <a href="#Installation" rel="nofollow ugc">Installation</a> section for more ideas and tips for custom image templates. <a href="https://github.com/fusioneng/image-shortcake" rel="nofollow ugc">Get involved with the project</a> on Github.

Image Shortcake

Works great with ShortCake. Love the filters! Please update this code so it doesn't scare people away. Thanks!

Works terrifically!

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 preserve …

BCorp

Demo of all the elements can be found at the <a href="http://www.bcorp.com" rel="nofollow ugc">BCorp</a> website.
Each shortcode can be easily configured in a simple popup window.
Or for even simpler usage and configuration you can use the <a href="https://wordpress.org/plugins/bcorp-visual-editor/" rel="ugc">BCorp Visual Editor drag & drop page builder</a>.
The BCorp Shortcode includes the following elements:
13 x Layout Options
<ul>
<li><a href="http://bcorp.com/shortcodes/layout/" rel="nofollow ugc">[bcorp_row]</a></li>
<li><a href="http://bcorp.com/shortcodes/layout/" rel="nofollow ugc">[bcorp_cell width=”1-6|1-5|1-4|1-3|2-5|1-2|3-5|2-3|3-4|4-5|5-6|1-1″]</a></li>
</ul>
17 x Shortcode Elements
<ul>
<li><a href="http://bcorp.com/shortcodes/alert-boxes/" rel="nofollow ugc">[bcorp_alert]</a></li>
<li><a href="http://bcorp.com/shortcodes/accordions/" rel="nofollow ugc">[bcorp_accordion]</a> <a href="http://bcorp.com/shortcodes/accordions/" rel="nofollow ugc">[bcorp_accordion_panel]</a></li>
<li><a href="http://bcorp.com/blog/" rel="nofollow ugc">[bcorp_blog]</a></li>
<li><a href="http://bcorp.com/shortcodes/buttons/" rel="nofollow ugc">[bcorp_button]</a></li>
<li><a href="http://bcorp.com/shortcodes/gallery/" rel="nofollow ugc">[bcorp_gallery]</a></li>
<li><a href="http://bcorp.com/shortcodes/headings/" rel="nofollow ugc">[bcorp_heading]</a></li>
<li><a href="http://bcorp.com/shortcodes/icon-boxes/" rel="nofollow ugc">[bcorp_icon_box]</a></li>
<li>[bcorp_image]</li>
<li><a href="http://bcorp.com/shortcodes/dividers/" rel="nofollow ugc">[bcorp_divider]</a></li>
<li><a href="http://bcorp.com/shortcodes/faicons/" rel="nofollow ugc">[bcorp_icon]</a></li>
<li><a href="http://bcorp.com/shortcodes/icon-list/" rel="nofollow ugc">[bcorp_icon_list]</a> <a href="http://bcorp.com/shortcodes/icon-list/" rel="nofollow ugc">[bcorp_icon_list_icon]</a></li>
<li><a href="http://bcorp.com/shortcodes/tabs/" rel="nofollow ugc">[bcorp_tabs]</a> <a href="http://bcorp.com/shortcodes/tabs/" rel="nofollow ugc">[bcorp_tab_panel]</a></li>
<li>[bcorp_text]</li>
<li><a href="http://bcorp.com/shortcodes/video/" rel="nofollow ugc">[bcorp_video]</a></li>
</ul>
11 x WordPress Widgets
<ul>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_archives]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_calendar]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_categories]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_meta]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_pages]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_recent_comments]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_recent_posts]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_rss]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_search]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_tag_cloud]</a></li>
<li><a href="http://bcorp.com/shortcodes/wordpress-widgets/" rel="nofollow ugc">[bcorp_wp_text]</a></li>
</ul>
Many new shortcodes will be added to the collection shortly.

BCorp Shortcodes

There are many more new and exciting shortcodes to come soon! This is just the beginning.



Hope everyone will like my new shortcode set!

Powerful standalone shortcode collection or for use with the BCorp Visual Editor. 41 Shortcode & Layouts included with more added frequently.

Image Shortcake vs BCorp Shortcodes