Category Archives: Manual Version 0.9.5

Resources

There are additional resources available online to help you create Ryuzine publications.

Official Online Resources

Ryuzine Press Plugin: Download Version 0.9.5
Ryuzine WebApp: 
Download Version 0.9.5
User Forums
http://www.ryumaru.com/forum
Add-Ons: 
Theme Pack
Localization Add-On
Legacy IE Support Add-On
OVR Player Add-On
Page Curves Add-Ons

Media Query Test Page

http://www.kmhcreative.com/downloads/MQ.htm

CSS3 to SVG Gradient Background Utility:

http://www.kmhcreative.com/downloads/CSS2SVG.htm

Additional WordPress Resources

WordPress Download

ComicPress Version 2.9
ComicPress Manager Plugin
ComicPress Theme Companion Plugin

Easel Theme
Comic Easel Plugin

Webcomic Theme

+Easel

Easel is a new WordPress theme from ComicPress code developer, Philip M. Hofer (aka “Frumph”).  If you want a simple, light-weight way to post comics you can use just the base Easel theme with the ComicPress Lite options.  If you need a more complex web comics CMS you can add the Comic Easel plugin as well.

Unlike ComicPress, however, Easel uses its own “storyline” system that are independent of the WordPress post categories.  This makes it impossible to assign Easel comic posts to a Ryuzine Press Edition, unless you hack a core Easel file.  Once you have the Easel theme folder go into the Easel > addons > comics.php file, and around line 42 find:

‘taxonomies’ => array( ‘post_tag’ ),

and change it to:

‘taxonomies’ => array( ‘category’,’post_tag’ ),

Now, when you go to Comics > Comics and click on a Easel comic post you should see the normal WordPress Category list with checkboxes on the right-hand side of the Edit page.

Assigning Comics to Editions

Once your comic posts are in place, and you’ve hacked the Easel file, assigning them to a Ryuzine Press Edition is as simple as categorizing any regular blog posts – in fact you can mix them in the same edition.  Create your Ryuzine Press Edition and assign it to a Category (or create a category specifically for this Edition).  Then simply go to Comics > Comics (it also may be Comics Easel > Comics) and find the comics you want to assign in the list.  Using the “Edit” link open the comic post and look for the normal “Categories” list on the right.  If it isn’t there you may need to go to “Screen Options” at the top and enable it or you’ll need to check the hack you did to the comics.php file.  Once you’ve got it, tick the box for the Category corresponding with the Ryuzine Press Edition.

Do the same for all the comics and/or blog posts you want to assign to the edition, remembering they will be displayed oldest to newest.  This is usually the preferable order since most people using Webcomic to post ongoing stories will have posts in that chronological order, and the WordPress archive pages usually show them newest to oldest, but in “comic reading order” they need to be oldest to newest.

Note that this all works much better if you are posting comic PAGES rather than comic STRIPS.  If your work is in strip format you may want to consider creating images with multiple strips and posting them as “pages” or there may be a lot of white space below a relatively small bit of artwork.

If you are switching from Webcomic to Easel you can actually have them both activated at the same time and Ryuzine Press Editions can simultaneously display mixed comic posts from both comic platforms.

Covers & Pages

If you want to use the oldest post assigned to an Edition as the cover you will need to configure “Cover Source” under Ryuzine Press > Options > Covers.  Realize that this is a global setting affecting ALL your Ryuzine Press Editions.

Under the “Pages” tab you can also decide whether or not to show or hide bylines and dates, meta data, and/or comments.  There is also an option specific to comic posts that will suppress any related post text.  Use this option if you want a cleaner appearance more like reading a real comic book.

You can also add Issue-Specific styling to the Ryuzine Press Edition (in the last custom box) to hide all the headers, leaving just an empty top margin, which makes it look even more like a real comic book.

If you are not using the oldest post for the cover you can use the auto-generated covers.  You may find these are more flexible in that you can have a single image to overlay on all covers as a masthead and use CSS and media queries to place “full-bleed” cover artwork, and you can tag back-up stories or non-comic content with your “featured” category as well and have them automatically turned into clickable links on the cover.

+Webcomic

Webcomic is another popular WordPress plugin for creating and managing web comics.  After downloading, installing, and activating the Webcomic plugin you will see a new admin menu item named “Webcomic” appear.  In Ryuzine Press it doesn’t matter if you are using a Webcomic-compatible theme or if you have ticked the “Integrate” option in the Webcomic Settings.  Remember that Ryuzine Press exists alongside of and independently of any WordPress theme you are using.

Assigning Comics to Editions

Once your comic posts are in place assigning them to a Ryuzine Press Edition is as simple as categorizing any regular blog posts – in fact you can mix them in the same edition.  Create your Ryuzine Press Edition and assign it to a Category (or create a category specifically for this Edition).  Then simply go to Webcomic > Webcomics and find the comics you want to assign in the list.  Using the “Edit” link open the comic post and look for the normal “Categories” list on the right.  If it isn’t there you may need to go to “Screen Options” at the top and enable it.  Once you’ve got it, tick the box for the Category corresponding with the Ryuzine Press Edition.  Note that doing this may unlink the comic image from the post.  If that happens use the “Webcomic” sub-section (below the main post box) to re-link the correct image to the post.

Do the same for all the comics and/or blog posts you want to assign to the edition, remembering they will be displayed oldest to newest.  This is usually the preferable order since most people using Webcomic to post ongoing stories will have posts in that chronological order, and the WordPress archive pages usually show them newest to oldest, but in “comic reading order” they need to be oldest to newest.

Note that this all works much better if you are posting comic PAGES rather than comic STRIPS.  If your work is in strip format you may want to consider creating images with multiple strips and posting them as “pages” or there may be a lot of white space below a relatively small bit of artwork.

If you are switching from either ComicPress or Easel to Webcomic as your platform Ryuzine Press Editions can simultaneously display mixed posts from Webcomic and either ComicPress or Easel.

Covers & Pages

If you want to use the oldest post assigned to an Edition as the cover you will need to configure “Cover Source” under Ryuzine Press > Options > Covers.  Realize that this is a global setting affecting ALL your Ryuzine Press Editions.

Under the “Pages” tab you can also decide whether or not to show or hide bylines and dates, meta data, and/or comments.  There is also an option specific to comic posts that will suppress any related post text.  Use this option if you want a cleaner appearance more like reading a real comic book.

You can also add Issue-Specific styling to the Ryuzine Press Edition (in the last custom box) to hide all the headers, leaving just an empty top margin, which makes it look even more like a real comic book.

If you are not using the oldest post for the cover you can use the auto-generated covers.  You may find these are more flexible in that you can have a single image to overlay on all covers as a masthead and use CSS and media queries to place “full-bleed” cover artwork, and you can tag back-up stories or non-comic content with your “featured” category as well and have them automatically turned into clickable links on the cover.

+ComicPress

ComicPress posts in a Ryuzine Press Edition, adapting to different screen sizes and orientations on mobile devices.
(Artwork by Jon Sloan, www.sa-bomjimcomic.com) 

The Ryuzine Press Plugin was created from the start with ComicPress integration in mind.  ComicPress is a popular theme system for WordPress which makes it easy to publish and manage a webcomics blog.

Upload your comic pages and (optionally) create a post to go with them as you would normally do with ComicPress.  It is recommended you use ComicPress Manager plugin to help, but is not required.

Assigning Comics to Editions

Once your comic posts are in place assigning them to a Ryuzine Press Edition is as simple as categorizing any regular blog posts – in fact you can mix them in the same edition.  Create your Ryuzine Press Edition and assign it to a Category (or create a category specifically for this Edition).  Then simply go to Posts > All Posts and find the comics you want to assign in the list.  Using the “Quick Edit” link and tick the box for the Category corresponding with the Ryuzine Press Edition.  Do the same for all the comics and/or blog posts you want to assign to the edition, remembering they will be displayed oldest to newest.  This is usually the preferable order since most people using ComicPress to post ongoing stories will have posts in that chronological order, and the WordPress archive pages usually show them newest to oldest, but in “comic reading order” they need to be oldest to newest.

Note that this all works much better if you are posting comic PAGES rather than comic STRIPS.  If your work is in strip format you may want to consider creating images with multiple strips and posting them as “pages” or there may be a lot of white space below a relatively small bit of artwork.

Now some of you may be saying “Wait a minute, wasn’t I told comics can only be in ONE category?”  While the current ComicPress developer has said that (more than once, in fact), the comic posts are still in whatever comic-related category to which they belong on your blog and in testing the Ryuzine Press Plugin no problems were encountered by also assigning comic posts to Ryuzine Press Editions.  In fact if you are using ComicPress Manager and go to the “Bulk Edit” section you’ll note that the comics only show their corresponding “storyline” assignments – the Ryuzine Press Edition categories are nowhere to be seen in this list, but they DO appear in the regular “All Posts” list, and you can ONLY assign comics to a Ryuzine Press Edition after they’ve already been published to a storyline/comics category.  However, keep in mind testing was done on  simple sequentially posted image files with the stock ComicPress 2.9 on a single blog site.  No testing was done on Flash-based comics (since they won’t work on many mobile devices anyway), multiple-blog versions of WordPress, or hacked ComicPress files.

Covers & Pages

If you want to use the oldest post assigned to an Edition as the cover you will need to configure “Cover Source” under Ryuzine Press > Options > Covers.  Realize that this is a global setting affecting ALL your Ryuzine Press Editions.

Under the “Pages” tab you can also decide whether or not to show or hide bylines and dates, meta data, and/or comments.  There is also an option specific to ComicPress posts that will suppress any related post text.  Use this option if you want a cleaner appearance more like reading a real comic book.

You can also add Issue-Specific styling to the Ryuzine Press Edition (in the last custom box) to hide all the headers, leaving just an empty top margin, which makes it look even more like a real comic book.

If you are not using the oldest post for the cover you can use the auto-generated covers.  You may find these are more flexible in that you can have a single image to overlay on all covers as a masthead and use CSS and media queries to place “full-bleed” cover artwork, and you can tag back-up stories or non-comic content with your “featured” category as well and have them automatically turned into clickable links on the cover.

Compatibility

Ryuzine Press Plugin

The Ryuzine Press plugin is compatible with WordPress version 3.0 and later and ComicPress 2.9, Easel 2.0.7, Webcomic 3.0.10 and later.  It will not work with earlier versions.

Ryuzine WebApp System Requirements

The following are the minimum system requirements for the full magazine effects. The Ryuzine WebApp is intended for high-end mobile devices and modern desktop computers. Devices which do not meet these requirements can still use Ryuzine but should change the “View” setting to “Continuous” or “Plain” which require less overhead.

  • 1 GHz CPU single-core
  • 512 MB RAM
  • Hardware Accelerated Graphics

Operating Systems:

  • iOS 3.2 (4.1+ recommended)
  • Android 2.0 (3.0+ recommended)
  • Mac OSX 10.5.5 (10.6+ recommended)
  • Windows XP (Windows 7+ recommended)
  • Linux (kernel 2.6+ recommended)
  • webOS 3.0.4
  • Windows Phone 7.5
  • BlackBerry Tablet OS 1.0.7

Ryuzine Web App:

Version Grade Adjust Anim. Themes
Internet Explorer (Windows)
<= 6 F N L N
7* C Y L Y
8* C Y L Y
9 C Y L Y
Mobile Internet Explorer (Windows Phone 7.5)
9 C Y L Y
Firefox (Windows, Mac, Linux)
1.5-3.5 D N L N
3.6 C N L Y
4+ B Y Y Y
Firefox Mobile “Fennec” (Android 2.3.x+)
4 B Y Y Y
Safari (Windows, Mac)
4.05 A Y Y Y
5.x A Y Y Y
Mobile Safari (iOS 3.2+)
4 A Y Y Y
5 A Y Y Y
Chrome (Windows, Mac, Linux)
10+ B Y Y Y
Chrome Mobile (Android 2.3.x+)
? B Y Y Y
webOS Browser (webOS 3.0.4+)
234.76 B+ Y Y Y
BlackBerry Browser (BlackBerry Tablet OS 1.0.7+)
7.1.0.7 A Y Y Y
Opera (Windows, Mac, Linux)
10.x D N L N
11.x B Y Y Y
Opera Mobile (Android 2.3.x+)
10.x B Y Y N
Legend:
A = Fully Works
B = Performance Issues
C = Legacy Animations
D = Reduced Functions
F = UnusableY = Yes
N= No
L = Legacy Animation
? = Untested/Unknown


  • Opera Mini was not tested.
  • Third-party browsers on Android that use the same webcore as the default browser are generally as compatible as the default browser.
  • webOS 3.0.0 (and earlier) do not render the WebApp correctly
  • webOS 3.0.4 does not render some themes correctly (particularly those with CSS3 gradients)
  • Firefox Mobile “Fennec” releases prior to version 6 did not support true touch events so the swipe gesture for turning pages will not work.
  • Opera Mobile mostly works, but the browser’s own UI tends to get in the way of the web app’s controls
  • Safar 3.x support was dropped in version 0.9.5.

*Note: Support in Internet Explorer 7 & 8 requires Robert Nyman’s free “getElementsByClassName” script. You will need to download and place the “legacy_ie” folder in your addons directory and link to it in the <head> of your HTML page to enable functionality for Internet Explorer 8. The latest version of the getElementsByClassName script is available from the original author at:

http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

 

Known Issues

Problem:No momentum touch scrolling in pages.

Platform(s): iOS and Android

Cause: The web app was not coded with momentum scrolling (Note: that if zooming is enabled momentum scrolling DOES work for dragging the zoomed content around while in “Pan & Zoom” mode).

Solution: None. A future release may offer it.


Problem: There are display errors during page turn animations.

Platform(s): Google Chrome 12 on both Mac and Windows

Cause: Unknown, appears to be a browser bug.

Solution: Wait for an update to the browser. This behavior was not seen in Chrome 10 or 11 and is not present in Chrome Canary 14.


Problem: Default “Share” Widget can’t find E-Mail program to send message.

Platform(s): All

Cause: Most likely an E-Mail Client (such as Apple Mail, Microsoft Outlook, Eudora, or Thunderbird) has not been configured on the system. If you use a “Web Mail” service like Yahoo, HotMail, GMail, etc., this feature will not work.

Solution: Most ISPs offer some kind of E-mail service which is compatible with E-Mail Client programs. You need to set one of these up to use the default “Share” Widget.


Problem: Occasionally the word “undefined” appears on top of my magazine.

Platform(s): All

Cause: You have enabled banner ads in your configuration options, but there is no banner ad.

Solution: Set the bannerad variable in the configuration file to zero.


Problem: When scrolling text areas in Ryuzine Machine the middle tab’s layering pops forward and back as you scroll.

Platform(s): Safari 5.0.x

Cause: This is a bug in this version of the browser. It is normally seen when any Flash content is in the page, but it also can occur with IFRAME content.

Solution: There is no fix for this aside from either using Safari 4.x or Safari 5.1.x or another browser entirely.


Problem: Ryuzine Press Edition stuck on Splash screen

Platform(s): All

Cause: You have not assigned any posts to the edition.

Solution: You must assign at least ONE post to the edition.


Problem: In landscape mode with zooming enabled and zoomed in the page turn action turns to the wrong page.

Platform(s): iOS

Cause: The web app is misinterpreting the width of the screen as portrait because it is zoomed in.

Solution: Zoom back out and page turning will work properly in landscape mode.


Problem: In alternative View modes text spills out of pages if I resize the browser.

Platform(s): All

Cause: The height of the main body of the page is being set by javascript and does not update that height on resize.

Solution: Resize, reload web app, switch back into alternative viewing mode.


Problem: Button and panel backgrounds with gradients display offset or garbled.

Platform(s): webOS 3.0.4

Cause: A bug in the webOS Browser regarding CSS3 gradients.

Solution: In your configuratin file set either no theme or a theme without CSS3 gradients for the webOS platform.


Problem: Cannot swipe to turn pages or touch-scroll when “Zoom & Pan” is enabled in Options (even if zoom mode is not turned on!)

Platform(s): webOS

Cause: The webOS browser is intercepting the touch gestures rather than applying them to the page elements.

Solution: Turn “Zoom & Pan” off in the Options Panel (it is normally turned off in webOS by default)

Share Bubble

The Ryuzine webapp has a built-in option for your readers to share your publications on social networks or via email in the “Share Bubble.”  This custom “panel” in the Ryuzine user interface is accessible from the “Share This” button on the third set of app controls.

If you don’t configure anything it will use the default “E-mail Sharing Widget” which uses the platform’s e-mail client software (if any is available) to let users share the URL of the publication – including a specific page within the publication – with others via e-mail.

However, if you want your readers to be able to easily share your Ryuzine Press Editions with their friends on Facebook, Google+, Twitter, LinkedIn, etc., you’ll probably want to use a WordPress social network widget.  The “Share Bubble” is set up as a “sidebar” in the WordPress Appearance > Widgets section and you can just drag and drop a social network widget into the Ryuzine Share Bubble box (technically you can put any widget you like in the bubble, but it was intended for social networking).  In particular the share bubble works with Marijn Ronge’s Social Sharing Toolkit widget.

You can also paste social-networking code snippets into the box, for example those from Add This or Share This,  and they should work.  The “Share Bubble” will expand to contain whatever you drop into it, but you may not like the spacing or background color, etc., in which case you can also drop the “Text” widget into it and add <style>….</style> code to alter the appearance of the bubble or the widget content inside of it.

Options: Shortcodes

Built-In Lightbox

Even if you are using a lightbox plugin or script elsewhere on your blog it probably won’t work in your Ryuzine Press editions because they do not use the standard WordPress headers and footers (where the lightbox plugins typically enqueue their scripts). So Ryuzine Press has its own built-in lightbox system, which is accessible through two WordPress shortcodes.

When you go to Ryuzine > Add New you can create your “lightbox gallery” in the post compose textbox. Define each item with the shortcode:

[ryubox id=”your_id” orient=”land|port&#93. . .whatever content you want in the lightbox. . .[/ryubox]

You can use anything you want for the “id” value, you’ll just need to know what it is when you create the link to open it. The “orient” attribute is optional for landscape orientation content (“land” is automatically assumed), however if the content in the lightbox is portrait orientation set the value to “port” so it will fit by height, rather than width, in the webapp.

The lightbox is primarily intended for displaying images, but it can also be used to showcase other content. However, if you use non-image content either code it with max-width and max-height or percentages so it can scale, or add scaling by media-query in the issue stylesheet. If you don’t the content may not fit in the browser window on smaller screen devices.

Note: The [ryubox] shortcode ONLY works inside Ryuzine Press posts

Lightbox Links

In order to trigger the built-in lightbox you’ll need to add special links to your posts with this shortcode:

[ryuboxlink id=”your_id”]. . .link text or (preferably) thumbnail image. . .[/ryuboxlink]

Match the “id” value to the same “id” value of a [ryubox] item.

Normally any [ryuboxlink] content will not be visible in the post when viewed in your regular blog theme. However, if you want it to appear in the blog as well (for example to trigger a regular WordPress plugin’s lightbox effect) change the “Lightbox Links” setting to “Show” the links elsewhere on your blog.

Options: Advertising

The fourth tab on the “Options” section is for configuration of any Advertising using the webapp’s built-in ad areas.

Please Note: Revenue generating publications require a Commercial Use License available at www.ryumaru.com. Please read the license file or email sales@ryumaru.com if you are not sure if you need a Commercial Use license. Only advertising placed in the Ryuzine webapp itself is taken into consideration for licensing terms, advertising incorporated into your regular blog theme is not subject to the Ryuzine licensing requirements.

Add Display Settings

This is where you really enable each of the built-in ad areas by setting how long the ad(s) will display.  For “Splash Ad” and “Box Ad” setting to zero will disable them, any other values will be the number of seconds to display the ad before automatically moving on.

For the “Banner Ad” option, though, you need to enter the word “null” to disable it as zero makes the banner “persistent” (though it’s not truly persistent since end users can manually close the ad and it won’t come back, but it will remain visible unless and until the end user does that).    Any other value will be the interval for the banner in seconds.  For example if you entered “90” in the box the banner ad would first appear after 1.5 minutes and remain visible for 1.5 minutes (unless a user manually closes it sooner) before disappearing for 1.5 minutes.

Ad Content Settings

Each of the built-in advertising areas has a similar method of configuration.

Type – You can select whether to use an image from your WordPress Media Library or some other type of advertising content.  If you select “Other Type” the image URL box is replaced by a text area box into which you can enter any kind of code.  In particular this means you can add “ad rotator” scripts, code to embed a Flash ad, or a code snippet for some third-party ad service.

The “Disable this Ad” checkbox will keep the ad content (whatever it is) from displaying in your Ryuzine Press Editions.  This option means you can set up various ads and have them ready to go and simply uncheck to box to make them go “live” in your magazines, for example, as part of a promotion or marketing campaign.

Ad Content – as noted above this will either be an image from your Media Library with or without a corresponding link entered in the “Ad Link URL” box or some other type of advertising code.

Keep in mind the available space for these ads within the webapp.  While images are automatically scaled to fit by width, other ad types may not auto-adjust.

Options: Add-Ons

The third tab of the “Options” section is where you configure any of the add-ons you may have installed to the Ryuzine webapp.  Please note that just because there is a configuration available does not mean the corresponding add-on is installed!

User Interface Language Localization

If you install the “Localization” add-on this is where you set up what langage will be used on the webapp’s user interface buttons, panels and help documentation.  Please note that this ONLY affects the UI language, it does not translate your content.

HTML Natural Language – This option works whether the Localization add-on is installed or not and simply lets browsers know what the base language of your content is so it can use the correct character encoding.

Localization Settings

The first option is a simple “on/off” switch.  The next two are drop-down lists for Language Code and Country Code.  The options are presently limited to what is shown, however you can easily edit the Localization javascript files to support ANY language, then just set both options to “Custom.”

The translations were performed automatically using Google Translate and may not be accurate.

Ryuzine Theme Settings

The Ryuzine webapp has its own theme system (which is completely independent of the WordPress theme).  If you install the “Theme Pack” you can also configure different themes to be delivered to different platforms, for example, to give Android users and iOS users each a theme that gives a more “native app” appearance to the interface.

Page Shadows – As the page animations turn there is a “shadow” drawn under them to give a more realistic three-dimensional appearance.  Some browsers and devices, however, may suffer performance issues trying to animate the semi-transparant layers.  If you want to better accommodate legacy and low-end users turn the shadows off.  Note that end users can enable/disable this on their own in the webapp’s “Options’ panel.

Swap Themes – Determines whether or not the Platform Themes will be used or not.

Default Theme – If you want all your readers to get the same theme (for example if you have a custom one designed to mesh with your blog’s theme or uses your organization’s colors) you can set that up here.

Platform Themes – You’ll see after each box it says what platform would receive that theme when “Swap Themes” is enabled.  If you leave a box blank that platform will get the unthemed interface (Platform Themes over-ride any Default Theme setting).

Legacy Internet Explorer Support

Some aspects of the Ryuzine webapp require the browser to understand getting elements by class name.  Microsoft’s Internet Explorer prior to version 9 do not understand this without some help.  The “Legacy IE Support” add-on is simply Robert Nyman’s getElementsByClassName script.

OVR Player Support

OVR Player can take a sequence of images and turn them into a touch-enabled, rotatable “Object Virtual Reality” image.  The author of OVR is also the creator of Ryuzine so there is an add-on integrating the two projects.  The current version of OVR Player can be found at www.kmhcreative.com/labs/ovr (note that the Ryuzine add-on has additional files necessary for integration with the webapp).

Page Curves

This add-on is an overlay effect which adds a subtle curvature to pages in toward the “spine” for a more realistic “open book” appearance.  It works with any of the Ryuzine themes, but can cause performance problems for legacy and low-end users.  You can set whether it is enabled by default here, but users can also manually enable or disable it in the webapp’s “Options” panel.