digitalkOmiX Plugin


Warning: Division by zero in /home/apperilli/webapps/wpawms/wp-content/plugins/digitalkomix/digitalkomix.php on line 168

Warning: Division by zero in /home/apperilli/webapps/wpawms/wp-content/plugins/digitalkomix/digitalkomix.php on line 169

Warning: Division by zero in /home/apperilli/webapps/wpawms/wp-content/plugins/digitalkomix/digitalkomix.php on line 168

Warning: Division by zero in /home/apperilli/webapps/wpawms/wp-content/plugins/digitalkomix/digitalkomix.php on line 169

Warning: Division by zero in /home/apperilli/webapps/wpawms/wp-content/plugins/digitalkomix/digitalkomix.php on line 168

Warning: Division by zero in /home/apperilli/webapps/wpawms/wp-content/plugins/digitalkomix/digitalkomix.php on line 169
Overview

This plugin adds balloons to traditional comic frames. Balloons become part of the content of the post, and can be translated. Image becomes a <table> background, while balloons are cells of the <table>.

Installation

Download zip file, unzip and upload to yoursite.com/wp-content/plugins, activate it in the Plugins Administration page, that’s it.

How it works

At this stage plugin works through a shortcode, that can be automatically generated using this Shortcode Builder.

Shortcode can be enclosing: [digkom]<image>[/digkom]

or self-closing: [digkom]

Enclosing shortcode is easier to use because it handles the image added directly from the Media Library. In the self-closing shortcode, instead, you will have to add image location and size. Below is a list of the shortcode attributes:

 General attributes
  • rows='Number of rows' : how many rows of balloons you have on the image.
  • cols='Number of columns' : how many columns of balloons you have on the image.
  • caption='Text of the caption of the image' : text that will appear above the image, if you want it to appear on the bottom you have to add “<bottom>” at the end of the text.
  • text_1='Text in the first balloon' : first balloon is in the top left corner of the image, last balloon is in the bottom right corner.
  • text_nth='Text in the nth balloon' : position of the nth balloon depends on how many rows and columns you set. Please note that you may not have more than 12 balloons on the image.
Attributes for self-closing shortcode only
  • image_url='URL of the image' : where your image is located.
  • image_link='Link to your image' : you go there when you click on the image.
  • width='Width of the image in pixels'
  • height='Height of the image in pixels'

Please note that if you don’t write text in a balloon, the balloon will not be displayed.

If you don’t write text at all and you preview or publish the post/page, the image will appear with an overlying grid, with numbered grid cells. Number of grid cells depend on how many rows and cols you defined, so this function may be useful to adjust them.

Position and Size

If you want to adjust the position and the size of a balloon, you have to add “<grid 1st,2nd>” at the end of the text_nth attribute, where “1st ” is the number of the grid cell in the top-left corner of the balloon, and “2nd” is the bottom-right one (order isn’t important, just give two numbers for two opposite corners). If balloon occupies only one grid cell, add “<grid 1st>” to the end of the text.

Alternativelty to <grid>,  you may add “<span r,c>” at the end of the text, where “r” stands for rowspan and “c” stands for columnspan. In this case you are limited to only 12 grid cells, and position of balloon depends on the “nth” value of the “text_nth” attribute, where “nth” is the number of the grid cell the balloon starts from.

Examples

If you write the shortcode alone, like this: [digkom][/digkom] you will obtain default values, that means a placeholder image with overlying 4 rows and 3 columns grid (note that this kind of display is only achieved if you preview or publish the post/page).

123
456
789
101112

Numbers identify grid cells. Let’s fill some grid cells with text, and the balloons will replace the grid cells: [digkom text_1='text 1' text_8='text 8' text_9='text 9' text_19='text 19'][/digkom]

text 1
text 8text 9

Note that “text_19” was not displayed, as we are limited to 12 balloons. In the next example we will delete the text and add a row and a column: [digkom rows='5' cols='4'][/digkom]

1234
5678
9101112
13141516
17181920

Let’s fill the grid cells with the same text as before: [digkom rows='5' cols='4' text_1='text 1' text_8='text 8' text_9='text 9' text 19='text_19'][/digkom]

We get a warning message. This is because we are trying to position the “nth” balloon using the “nth” text attribute, and this works only for a maximum 12 cells grid. To correctly position the balloons we have to add the “<grid>” argument at the end of the texts:

[digkom rows='5' cols='4' text_1='text 1<grid 1>' text_2='text 8<grid 8>' text_3='text 9<grid 9>' text_4='text 19<grid 19>'][/digkom]

text 1
text 8
text 9
text 19

The “<grid>” argument states in which grid cell the balloon is positioned, indipendently from the number of the text attribute. Note that the “<grid>” argument accepts two digits, to control the position and the size of the balloon. Let’s change the size of the first balloon only:

[digkom rows='5' cols='4' text_1='text 1<grid 1,8>' text_2='text 8<grid 8>' text_3='text 9<grid 9>' text_4='text 19<grid 19>'][/digkom]

So with “<grid 1,8>” we stated to span the balloon from grid cell “1” to grid cell “8”. Note that the balloon previously positioned in cell “8” gets wiped off by the enlarged one. Let’s say that priority is assigned to balloons that start more to the top and to the left of the frame.

Inserting Images

Let’s see how we insert a custom image instead of the placeholder. We just have to position the cursor between the two parts of the shortcode, like the red pipe in the next example:

[digkom]|[/digkom]

Now just press the “Add Media” button in the editor menu, choose or upload your file and insert it in the post/page (we will deal with texts later on):

[digkom]<a href="http://andywar.net/wp-content/uploads/2014/10/TreOrsi.jpg"><img class="size-full wp-image-23" src="http://andywar.net/wp-content/uploads/2014/10/TreOrsi.jpg" alt="three bears in front of their three computers" width="423" height="600" /></a>[/digkom]

123
456
789
101112

As no text has been entered, the image is overlayed by the default grid. Let’s adjust the grid to accomodate the balloon size:

[digkom rows='3' cols='5']<a href="http://andywar.net/wp-content/uploads/2014/10/TreOrsi.jpg"><img class="size-full wp-image-23" src="http://andywar.net/wp-content/uploads/2014/10/TreOrsi.jpg" alt="three bears in front of their three computers" width="423" height="600" /></a>[/digkom]

12345
678910
1112131415

Let’s now add the text in a balloon spanning from cell “1” to cell “4”, and a caption positioned on the bottom:

[digkom rows='3' cols='5' text_1='HEI! SOMEBODY TOUCHED MY DATABASE!<grid 1,4>' caption='Three Bears<bottom>']<a href="http://andywar.net/wp-content/uploads/2014/10/TreOrsi.jpg"><img class="size-full wp-image-23" src="http://andywar.net/wp-content/uploads/2014/10/TreOrsi.jpg" alt="three bears in front of their three computers" width="423" height="600" /></a>[/digkom]

Three Bears
HEI! SOMEBODY TOUCHED MY DATABASE!
Self-closing Shortcode Examples

WARNING! You can’t mix self-closing and enclosing shortcodes in the same post/page, so I moved the self-closing shortcode examples to this page.

Obsolete “<span>” argument

Alternatively to the “<grid>” argument, early version of the plugin used “<span>”. This argument limits grids to maximum 12 cells, and the position of the balloon depends on the number of the “nth” text attribute. Let’s use same example as before:

[digkom rows='5' cols='4' text_1='text 1' text_8='text 8' text_9='text 9' text 19='text_19'][/digkom]

We get the warning message, because we exceeded in grid size. Let’s use default values and span the balloons with “<span>” argument:

[digkom text_1='text 1<span 2,2>' text_8='text 8<span 1,2>' text_9='text 9<span 2,1>'][/digkom]

text 1
text 8

The digits represent rispectively the rowspan and the cellspan of the balloons. Note that “text_9” has been wiped away because of priority given to the balloon at it’s left.

Localization

Since version 1.3.2 the plugin is internationalized and provides Italian and Serbian translation (the latter thanks to Ogi Djuraskovic, from FirstSiteGuide). You can find the *.pot file in the plugin repository and help me transalte to other languages.

 

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *