TFO Graphviz

Graphviz is a powerful tool for visualising network and tree structures that connect objects.

This WordPress plugin provides a shortcode mechanism to create Graphviz graphics within blogs, including image map generation and most other Graphviz features.

Installation

Installation is simple. Either install from directly within WordPress or:

  1. Download and unzip the plugin to the [cci]/wp-content/plugins/tfo-graphviz[/cci] directory within your WordPress installation.
  2. Make the directory [cci]/wp-content/tfo-graphviz[/cci] and make it writable by the web server – this is where generated images and image maps go.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. Choose a generation method on the plugin settings page.
  5. Use the [cci]

    Error generating Graphviz image:

    Graphviz cannot generate graph
    Command: /usr/bin/dot '-Kdot' '-Tpng' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/e234e5fe8c04cc955df7f3157eb70cda.png'
    Output: 
    Error: : syntax error in line 1 near '['
    
    Original DOT:
        1 [/cci] shortcode to generate graphs.
  6. 2
3 You need access to a Graphviz renderer: 4 5
    6
  • By using a local installation of Graphviz and the [cci]dot[/cci] binary.
  • 7
  • By using a local installation and PHP bindings to the library.
  • 8
9 See the FAQ for more details on these options and http://www.graphviz.org/Download.php for details on installing Graphviz on your web server. 10 11

Frequently Asked Questions

12

What is Graphviz?

13 Graphviz is a way of generating visualisations of structural relationships between objects. Almost any kind of diagram where something connects to something else can be drawn and automatically laid out using the language DOT. 14 15

How do I use this plugin?

16 Use the [cci][graphviz][/cci] shortcode. Various uses are explained in the "How to use" section. 17 18

How to I write DOT?

19 The online documentation for Graphviz is terse and not especially helpful, in particular the DOT language page is only helpful if you happen to be able to read an approximation of BNF. 20 21 There are however several other introductions to Graphviz and DOT, including an excerpt on the O'Reilly LinuxDevCenter.com site. Another approach would be to look at the examples in the Graphviz gallery. 22 23

Where can I see examples?

24 28

Can I manipulate the rendered graph using CSS in my WordPress theme?

29 The [cci]img[/cci] elements are tagged with '[cci]class="graphviz"[/cci]'. 30 31

Nothing is being rendered, maybe my DOT is broken?

32 If you're using a local Graphviz renderer then errors from Graphviz should be presented where you expect the graph to appear. Note that because of how WordPress submits content to plugins the line numbering will not always match what you expect. 33 34 The error message when using the [cci]dot[/cci] binary will contain the command line used as well as a line-numbered copy of the DOT that was used. 35 36

I'm getting strange errors that make no sense, what gives?

37 WordPress encodes HTML entities inside the shortcode block which this plugin attempts to demangle. 38 39 Unfortunately WordPress can also try to do smart character replacement, such as "..." into a UNICODE ellipsis character. The Graphviz plugin contains a mapping of many of these back to their ASCII equivalents, but it may not be complete. Let us know if you think this is breaking your DOT. It's also possible that non-ASCII7 characters do strange things too. 40 41 Adding [cci]define("TFO_GV_DEBUG", true)[/cci] to [cci]wp_config.php[/cci] will cause the plugin to create some diagnostic files in your system [cci]tmp[/cci] directory. The file [cci]pre-N.dot[/cci] is the contents of the DOT as given to the plugin by WordPress, [cci]post-N.dot[/cci] is the results of the plugin attempting to demangle it. The [cci]N[/cci] is a number that is incremented for each shortcode section interpreted. The plugin does not clean these files up. 42 43

How do I install the Graphviz program (not this plugin) locally?

44 This depends on your host. You will find some details at http://www.graphviz.org/Download.php but many systems also have it in their own package management system, for example this is package [cci]graphviz[/cci] on Debian, Ubuntu and Fedora systems. 45 46

Example

47
48 [graphviz lang="dot" output="svg" \ 49 simple="yes" imap="yes" href="self" \ 50 title="TFO Graphviz Demo"] 51 52 node [style="rounded,filled", color=lightblue2, 53 fontsize=10, shape=box]; 54 edge [arrowhead=vee, arrowsize=0.5]; 55 56 subgraph cluster_client { 57 node [label="File system", URL="http://en.wikipedia.org/wiki/Xfs"]; fs; 58 node [label="LVM", URL="http://en.wikipedia.org/wiki/Logical_Volume_Manager_(Linux)"]; lvm; 59 node [label="Linux HBA driver", URL="https://www.kernel.org/doc/htmldocs/scsi/index.html"]; clienthba; 60 fs -> lvm -> clienthba; 61 bgcolor=lightgrey; 62 label = "Virtual Machine"; 63 URL = "http://www.ubuntu.com/"; 64 } 65 66 subgraph cluster_esxi { 67 node [label="Virtual HBA hardware"]; virtualhba; 68 node [label="VMDK file"]; vmdk; 69 node [label="vmfs"]; vmfs; 70 node [label="ESXi HBA driver"]; vmhba; 71 virtualhba -> vmdk -> vmfs -> vmhba; 72 bgcolor=white; 73 label = "Hypervisor"; 74 URL = "http://www.vmware.com/products/vsphere-hypervisor/"; 75 } 76 77 subgraph cluster_hardware { 78 node [label="Physical HBA hardware", URL="http://tinyurl.com/dellpercraid"]; phba; 79 node [label="Physical disks", URL="http://www.amazon.com/exec/obidos/ASIN/B002B7EIVC/cl-blog-20/"]; disks; 80 phba -> disks; 81 style=filled; bgcolor=lightgrey; 82 label = "Hardware"; 83 URL = "http://www.dell.com/us/business/p/poweredge-r515/pd"; 84 } 85 86 style=filled; 87 bgcolor=aquamarine4; 88 fontsize=10; 89 labeljust=l; 90 91 clienthba -> virtualhba; 92 vmhba -> phba; 93 label = "I/O stack"; 94

[cc]
TFO Graphviz Demo
[/cc]

Changelog

1.14

  • Finally worked out how to disable [cci]wptexturize[/cci]! Less demangling now required.
  • Add an option to control whether we ever emit JavaScript.

1.13

  • Better diagnostic output when running [cci]dot[/cci] doesn't work, including the command line used and adding the DOT as submitted, with line numbers. (Joachim Durchholz)
  • Add more de-mangling rules, for smart quotes and ellipsis. (Joachim Durchholz)
  • Improve the newline de-mangling. (Joachim Durchholz)
  • Add the SVG output format. See http://blog.flirble.org/2015/11/15/adding-svg-support-tfo-graphviz/ for example. (Joachim Durchholz)
  • Add a fix for if the requires GV class isn't loadable, such as when GV gets upgraded on the system. (Sam Wilson)
  • Include some JavaScript when both an image map and width/height scaling is specified. This is required to scale the image map to whatever the image has been scaled to. Image map scaling code comes from https://github.com/davidjbradshaw/image-map-resizer

1.12

  • [cci]clean_url()[/cci] and [cci]attribute_escape()[/cci] have both been deprecated. Migrate to [cci]esc_url()[/cci] and [cci]esc_attr()[/cci]. (Sam Wilson)

1.11

  • Remove deprecated constructor definitions. (Sam Wilson)
  • Testing against 4.3.

1.10

  • Require at least WP 4.2 now.
  • Fix use of[cci]add_query_arg()[/cci] to escape its output; a possible XSS vector.

1.9

  • Make some debugging output conditional.
  • Fix where that debugging output is stored. (Sam Wilson)

1.8

  • Fix a packaging error in 1.7.
  • Fix use of hardcoded "/tmp" path. (Sam Wilson)

1.7

  • Test upto WP 4.2.2.
  • Change an [cci]exec("mv...")[/cci] to using [cci]rename()[/cci] instead. (Sam Wilson)
  • Code documentation improvement.
  • Some reformatting.

1.6

  • Fix some cosmetic documentation issues.

1.5

  • Update documentation for using the PHP gv bindings.

1.4

  • WordPress 4.0 support.
  • Fix for PHP Graphviz module loading; newer PHP's don't allow dl() at all in some cases, we should therefore detect this.
  • Use WP_Error properly.
  • Liberal use of try/catch to detect runtime issues.

1.3

  • No changes; version bump for the later 3.x series.

1.2

  • Removed leftover diagnostic code in PHP render class (which was appearing in posts!)
  • Added remote Graphviz rendering support. Note that this is still young and will add a mark to the graph indicating it was generated by this plugin.
  • Tested on WordPress 3.0.2 and 3.0.3.

1.1

  • Added support for locally installed PHP bindings to the Graphviz library. This only works if PHP either allows dl() to load a module or gv.so/dll is staticly configured to load in php.ini.
  • Made render module selection somewhat more robust.
  • Attempt to create our wp-content/tfo-graphviz directory if it doesn't already exist.
  • Better (as in, "any at all") error generation in the shortcode handler.
  • Add content expiration - configurable. Will remove files from the wp-content/tfo-graphviz directory, but only if the threshold is >0 and older than the threshold.

1.0

  • First release.

Upgrade Notice

Upgrading from all previous versions strongly recommended; Earlier versions will not run on WordPress 4 or on older Apache/PHP installations.

How to use TFO Graphviz

The shortcode syntax is:

[cc]

Error generating Graphviz image:

Graphviz cannot generate graph
Command: /usr/bin/dot '-Kdot' '-Tpng' '-o/data/blog.flirble.org/wp-content/tfo-graphviz/6297339539d1e4c405b281f049ce634e.png'
Output: 
Error: : syntax error in line 2 near '>'

Original DOT:
    1 
    2  
    3 


[/cc]

Where [cci][/cci] is anything from this list. All are entirely optional:

  • [cci]href="self|"[/cci]

    Encompasses the generated image with a link either to the image itself (with the [cci]self[/cci] value) or to the provided URL. If the option is empty (for example, [cci]href=""[/cci]) then no link is generated. This is the default.

  • [cci]id=""[/cci]

    Provides the identifier used to link the generated image to an image map. If you use the [cci]simple[/cci] option then it also provides the name of the generated DOT graph container (since Graphviz uses this to generate the image map). If not given then an identifier is generated with the form [cci]tfo_graphviz_N[/cci] whereN is an integer that starts at one when the plugin is loaded and is incremented with use.

  • [cci]imap="yes|no"[/cci]

    Graphviz can generate image maps using any URL's given in the DOT code so that clicking on objects in the resultant image will direct a web browser to a new page. The effect of this option is to both instruct Graphviz to generate a client-side image map and to also insert that map into the generated HTML. It will use the [cci]id[/cci] value as the name of the map (see the [cci]id[/cci] option for details). [cci]imap[/cci] defaults to [cci]no[/cci].

  • [cci]lang=""[/cci]

    Specifies the particular Graphviz interpreter to use. The default is [cci]dot[/cci].

  • [cci]output=""[/cci]

    Indicates the desired image format. Defaults to [cci]png[/cci].

  • [cci]simple="yes|no"[/cci]

    The [cci]simple[/cci] option provides a very basic DOT wrapper around your code such that the following is possible:

    [cc]

    [/cc]

    The generated code would look like:

    [cc]
    digraph tfo_graphviz_1 {
    a -> b -> c;
    }
    [/cc]

    See the [cci]id[/cci] option for a description of where the name of the [cci]digraph[/cci] comes from. [cci]simple[/cci] defaults to [cci]no[/cci].

  • [cci]title=""[/cci] <p>Indicates the title of the image. This is used in the [cci]alt[/cci] and [cci]title[/cci] attributes of the image reference. This defaults to an empty string. Note that image maps may indicate a [cci]title[/cci] string which will appear in tool-tips. </li> </ul> <div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-twitter"><a rel="nofollow noopener noreferrer" data-shared="sharing-twitter-559" class="share-twitter sd-button share-icon" href="http://blog.flirble.org/projects/tfo-graphviz/?share=twitter" target="_blank" title="Click to share on Twitter"><span>Twitter</span></a></li><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-559" class="share-facebook sd-button share-icon" href="http://blog.flirble.org/projects/tfo-graphviz/?share=facebook" target="_blank" title="Click to share on Facebook"><span>Facebook</span></a></li><li class="share-linkedin"><a rel="nofollow noopener noreferrer" data-shared="sharing-linkedin-559" class="share-linkedin sd-button share-icon" href="http://blog.flirble.org/projects/tfo-graphviz/?share=linkedin" target="_blank" title="Click to share on LinkedIn"><span>LinkedIn</span></a></li><li class="share-reddit"><a rel="nofollow noopener noreferrer" data-shared="" class="share-reddit sd-button share-icon" href="http://blog.flirble.org/projects/tfo-graphviz/?share=reddit" target="_blank" title="Click to share on Reddit"><span>Reddit</span></a></li><li class="share-email"><a rel="nofollow noopener noreferrer" data-shared="" class="share-email sd-button share-icon" href="http://blog.flirble.org/projects/tfo-graphviz/?share=email" target="_blank" title="Click to email this to a friend"><span>Email</span></a></li><li class="share-print"><a rel="nofollow noopener noreferrer" data-shared="" class="share-print sd-button share-icon" href="http://blog.flirble.org/projects/tfo-graphviz/#print" target="_blank" title="Click to print"><span>Print</span></a></li><li class="share-end"></li></ul></div></div></div> </div><!-- .entry-content --> <footer class="entry-meta"> </footer><!-- .entry-meta --> </article><!-- #post --> <div id="comments" class="comments-area"> <h2 class="comments-title"> 3 thoughts on “<span>TFO Graphviz</span>” </h2> <ol class="commentlist"> <li class="pingback even thread-even depth-1" id="comment-10"> <p>Pingback: <a href='http://karalli.net/archives/adding-graphviz/' rel='external nofollow ugc' class='url'>Adding Graphviz - The Karalli Pages</a> </p> </li><!-- #comment-## --> <li class="pingback odd alt thread-odd thread-alt depth-1" id="comment-11"> <p>Pingback: <a href='http://petty.me.uk/?p=2622' rel='external nofollow ugc' class='url'>Promethean Chasms | Petty</a> </p> </li><!-- #comment-## --> <li class="pingback even thread-even depth-1" id="comment-12"> <p>Pingback: <a href='http://matthewpetty.com/2014/04/personal-dataflow/' rel='external nofollow ugc' class='url'>Personal Dataflow | Petty</a> </p> </li><!-- #comment-## --> </ol><!-- .commentlist --> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/projects/tfo-graphviz/#respond" style="display:none;">Cancel reply</a></small></h3><p class="must-log-in">You must be <a href="http://blog.flirble.org/wp-login.php?redirect_to=http%3A%2F%2Fblog.flirble.org%2Fprojects%2Ftfo-graphviz%2F">logged in</a> to post a comment.</p> </div><!-- #respond --> <p class="akismet_comment_form_privacy_notice">This site uses Akismet to reduce spam. <a href="https://akismet.com/privacy/" target="_blank" rel="nofollow noopener">Learn how your comment data is processed</a>.</p> </div><!-- #comments .comments-area --> </div><!-- #content --> </div><!-- #primary --> <div id="secondary" class="widget-area" role="complementary"> <aside id="meta" class="widget widget_meta"> <h3 class="widget-title">Prunus sine via</h3> <ul> <li><a rel="nofollow" href="http://blog.flirble.org/wp-login.php">Log in</a></li> <li><a href="http://blog.flirble.org/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="http://blog.flirble.org/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> </ul> </aside><aside class="widget flirb-widget"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- blog 120x600 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1817095557389392" data-ad-slot="1037389671" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></aside><aside id="archives-3" class="widget widget_archive"><h3 class="widget-title">Archives</h3> <ul> <li><a href='http://blog.flirble.org/2019/06/'>June 2019</a></li> <li><a href='http://blog.flirble.org/2015/11/'>November 2015</a></li> <li><a href='http://blog.flirble.org/2011/04/'>April 2011</a></li> <li><a href='http://blog.flirble.org/2011/02/'>February 2011</a></li> <li><a href='http://blog.flirble.org/2011/01/'>January 2011</a></li> <li><a href='http://blog.flirble.org/2010/11/'>November 2010</a></li> <li><a href='http://blog.flirble.org/2010/10/'>October 2010</a></li> </ul> </aside><aside id="categories-3" class="widget widget_categories"><h3 class="widget-title">Categories</h3> <ul> <li class="cat-item cat-item-4"><a href="http://blog.flirble.org/category/personal/" title="Stuff from me, about me">Personal</a> </li> <li class="cat-item cat-item-8"><a href="http://blog.flirble.org/category/tech/" title="Technology items">Technology</a> <ul class='children'> <li class="cat-item cat-item-5"><a href="http://blog.flirble.org/category/tech/appl/" title="Apple items">Apple</a> <ul class='children'> <li class="cat-item cat-item-3"><a href="http://blog.flirble.org/category/tech/appl/ios/" title="iOS software items, including development">iOS</a> </li> </ul> </li> <li class="cat-item cat-item-14"><a href="http://blog.flirble.org/category/tech/wordpress/" title="WordPress stuff">WordPress</a> </li> </ul> </li> </ul> </aside><aside id="nktagcloud-3" class="widget widget_nktagcloud"><h3 class="widget-title">Tags</h3><a href='http://blog.flirble.org/tag/abc-of-the-sea/' class='tag-link-12 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>ABC of the Sea</a> <a href='http://blog.flirble.org/tag/appl/' class='tag-link-81 nktagcloud-13' title='3' rel="tag" style='font-size: 13.6pt;'>Apple</a> <a href='http://blog.flirble.org/tag/automation/' class='tag-link-30 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>automation</a> <a href='http://blog.flirble.org/tag/betabuilder/' class='tag-link-28 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>BetaBuilder</a> <a href='http://blog.flirble.org/tag/dell/' class='tag-link-53 nktagcloud-13' title='3' rel="tag" style='font-size: 13.6pt;'>Dell</a> <a href='http://blog.flirble.org/tag/esxi/' class='tag-link-50 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>ESXi</a> <a href='http://blog.flirble.org/tag/example/' class='tag-link-90 nktagcloud-13' title='3' rel="tag" style='font-size: 13.6pt;'>Example</a> <a href='http://blog.flirble.org/tag/graphviz/' class='tag-link-69 nktagcloud-19' title='5' rel="tag" style='font-size: 19.2pt;'>Graphviz</a> <a href='http://blog.flirble.org/tag/hunter-hillegas/' class='tag-link-32 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>Hunter Hillegas</a> <a href='http://blog.flirble.org/tag/ios/' class='tag-link-80 nktagcloud-22' title='6' rel="tag" style='font-size: 22pt;'>iOS</a> <a href='http://blog.flirble.org/tag/ipad/' class='tag-link-24 nktagcloud-16' title='4' rel="tag" style='font-size: 16.4pt;'>iPad</a> <a href='http://blog.flirble.org/tag/iphone/' class='tag-link-23 nktagcloud-16' title='4' rel="tag" style='font-size: 16.4pt;'>iPhone</a> <a href='http://blog.flirble.org/tag/linux/' class='tag-link-63 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>Linux</a> <a href='http://blog.flirble.org/tag/objective-c/' class='tag-link-21 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>Objective C</a> <a href='http://blog.flirble.org/tag/programming/' class='tag-link-17 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>Programming</a> <a href='http://blog.flirble.org/tag/raid/' class='tag-link-52 nktagcloud-13' title='3' rel="tag" style='font-size: 13.6pt;'>RAID</a> <a href='http://blog.flirble.org/tag/re4-gp/' class='tag-link-59 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>RE4‑GP</a> <a href='http://blog.flirble.org/tag/shell-script/' class='tag-link-27 nktagcloud-16' title='4' rel="tag" style='font-size: 16.4pt;'>shell script</a> <a href='http://blog.flirble.org/tag/vmware/' class='tag-link-49 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>VMware</a> <a href='http://blog.flirble.org/tag/western-digital/' class='tag-link-58 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>Western Digital</a> <a href='http://blog.flirble.org/tag/wordpress/' class='tag-link-84 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>WordPress</a> <a href='http://blog.flirble.org/tag/xcode/' class='tag-link-26 nktagcloud-10' title='2' rel="tag" style='font-size: 10.8pt;'>Xcode</a></aside><aside id="text-5" class="widget widget_text"> <div class="textwidget"><a href="http://mxguarddog.com/faq.is_it_really_free/">free spam filter</a></div> </aside><aside id="eu_cookie_law_widget-3" class="widget widget_eu_cookie_law_widget"><div class="hide-on-button" data-hide-timeout="30" data-consent-expiration="180" id="eu-cookie-law" > <form method="post"> <input type="submit" value="Close and accept" class="accept" /> </form> Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use. <br /> To find out more, including how to control cookies, see here: <a href="https://automattic.com/cookies/" > Cookie Policy </a> </div> </aside> </div><!-- #secondary --> <div id='avatar_footer_credit' style='display: none;'>Avatars by <a href='http://www.sterling-adventures.co.uk/blog/'>Sterling Adventures</a></div> </div><!-- #main .wrapper --> <footer id="colophon" role="contentinfo"> <div class="site-info"> <a href="https://wordpress.org/" class="imprint" title="Semantic Personal Publishing Platform"> Proudly powered by WordPress </a> </div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page --> <!-- Plugin: WP Analytics Tracking --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-18916791-1', 'auto'); ga('require', 'displayfeatures'); ga('require', 'linkid', 'linkid.js'); ga('send', 'pageview'); </script><script type="text/javascript"> function tocToggle(toc, box) { var q = jQuery(toc); if (!q) return; q.slideToggle('fast', function() { jQuery(box).toggleClass('toc-collapsed', q.css('display') == 'none'); }); } </script> <script type="text/javascript"> window.WPCOM_sharing_counts = {"http:\/\/blog.flirble.org\/projects\/tfo-graphviz\/":559}; </script> <div id="sharing_email" style="display: none;"> <form action="/projects/tfo-graphviz/" method="post"> <label for="target_email">Send to Email Address</label> <input type="email" name="target_email" id="target_email" value="" /> <label for="source_name">Your Name</label> <input type="text" name="source_name" id="source_name" value="" /> <label for="source_email">Your Email Address</label> <input type="email" name="source_email" id="source_email" value="" /> <input type="text" id="jetpack-source_f_name" name="source_f_name" class="input" value="" size="25" autocomplete="off" title="This field is for validation and should not be changed" /> <img style="float: right; display: none" class="loading" src="https://c2-blog.flirble.org/wp-content/plugins/jetpack/modules/sharedaddy/images/loading.gif" alt="loading" width="16" height="16" /> <input type="submit" value="Send Email" class="sharing_send" /> <a rel="nofollow" href="#cancel" class="sharing_cancel" role="button">Cancel</a> <div class="errors errors-1" style="display: none;"> Post was not sent - check your email addresses! </div> <div class="errors errors-2" style="display: none;"> Email check failed, please try again </div> <div class="errors errors-3" style="display: none;"> Sorry, your blog cannot share posts by email. </div> </form> </div> <script type='text/javascript' src='http://blog.flirble.org/wp-admin/admin-ajax.php?action=shadowboxjs&cache=6e159b34b5dfb60e04b1b5ec5ccb3501&ver=3.0.3' id='shadowbox-js'></script> <script type='text/javascript' src='https://c1-blog.flirble.org/wp-includes/js/imgareaselect/jquery.imgareaselect.min.js?ver=5.5.1' id='imgareaselect-js'></script> <script type='text/javascript' id='thickbox-js-extra'> /* <![CDATA[ */ var thickboxL10n = {"next":"Next >","prev":"< Prev","image":"Image","of":"of","close":"Close","noiframes":"This feature requires inline frames. You have iframes disabled or your browser does not support them.","loadingAnimation":"http:\/\/blog.flirble.org\/wp-includes\/js\/thickbox\/loadingAnimation.gif"}; /* ]]> */ </script> <script type='text/javascript' src='https://c0-blog.flirble.org/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105' id='thickbox-js'></script> <script type='text/javascript' id='crayon_js-js-extra'> /* <![CDATA[ */ var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/blog.flirble.org\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""}; var CrayonSyntaxStrings = {"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"}; /* ]]> */ </script> <script type='text/javascript' src='https://c2-blog.flirble.org/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta' id='crayon_js-js'></script> <script type='text/javascript' src='https://c0-blog.flirble.org/wp-includes/js/comment-reply.min.js?ver=5.5.1' id='comment-reply-js'></script> <script type='text/javascript' src='https://c0-blog.flirble.org/wp-content/themes/twentytwelve/js/navigation.js?ver=20141205' id='twentytwelve-navigation-js'></script> <script type='text/javascript' src='https://c3-blog.flirble.org/wp-content/plugins/jetpack/_inc/build/widgets/eu-cookie-law/eu-cookie-law.min.js?ver=20180522' id='eu-cookie-law-script-js'></script> <script type='text/javascript' src='https://c3-blog.flirble.org/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=695qKm9e6vY/5lr' id='enlighterjs-js'></script> <script type='text/javascript' id='enlighterjs-js-after'> !function(e,n){if("undefined"!=typeof EnlighterJS){var o={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":4,"ampersandCleanup":true,"linehover":true,"rawcodeDbclick":false,"textOverflow":"break","linenumbers":true,"theme":"enlighter","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""}};(e.EnlighterJSINIT=function(){EnlighterJS.init(o.selectors.block,o.selectors.inline,o.options)})()}else{(n&&(n.error||n.log)||function(){})("Error: EnlighterJS resources not loaded yet!")}}(window,console); </script> <script type='text/javascript' src='https://c3-blog.flirble.org/wp-includes/js/wp-embed.min.js?ver=5.5.1' id='wp-embed-js'></script> <script type='text/javascript' id='sharing-js-js-extra'> /* <![CDATA[ */ var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://c3-blog.flirble.org/wp-content/plugins/jetpack/_inc/build/sharedaddy/sharing.min.js?ver=8.8.1' id='sharing-js-js'></script> <script type='text/javascript' id='sharing-js-js-after'> var windowOpen; jQuery( document.body ).on( 'click', 'a.share-twitter', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' ); return false; }); var windowOpen; jQuery( document.body ).on( 'click', 'a.share-facebook', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; }); var windowOpen; jQuery( document.body ).on( 'click', 'a.share-linkedin', function() { // If there's another sharing window open, close it. if ( 'undefined' !== typeof windowOpen ) { windowOpen.close(); } windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomlinkedin', 'menubar=1,resizable=1,width=580,height=450' ); return false; }); </script> <!-- Begin Shadowbox JS v3.0.3.10 --> <!-- Selected Players: html, iframe, img, qt, swf, wmp --> <script type="text/javascript"> /* <![CDATA[ */ var shadowbox_conf = { autoDimensions: false, animateFade: true, animate: true, animSequence: "sync", autoplayMovies: true, continuous: false, counterLimit: 10, counterType: "default", displayCounter: true, displayNav: true, enableKeys: true, flashBgColor: "#000000", flashParams: {bgcolor:"#000000", allowFullScreen:true}, flashVars: {}, flashVersion: "9.0.0", handleOversize: "resize", handleUnsupported: "link", initialHeight: 160, initialWidth: 320, modal: false, overlayColor: "#000", showMovieControls: true, showOverlay: true, skipSetup: false, slideshowDelay: 0, useSizzle: false, viewportPadding: 20 }; Shadowbox.init(shadowbox_conf); /* ]]> */ </script> <!-- End Shadowbox JS --> <script type='text/javascript' src='https://stats.wp.com/e-202039.js' async='async' defer='defer'></script> <script type='text/javascript'> _stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:8.8.1',blog:'16431922',post:'559',tz:'-4',srv:'blog.flirble.org'} ]); _stq.push([ 'clickTrackerInit', '16431922', '559' ]); </script> </body> </html>