WordPress and Comics

I’ve been using wordpress for … well, as long as there’s been a wordpress. At various times, I’ve attempted to make it work for me to do comics online, and I’ve never really managed it. This time though, it was time to give it the old college try.

Over at channelhex.com – the generic website I set up for doing comics stuff with people, which has been underutilised for some time, I’ve made it the new home of the webcomic Monster Macs by me and John Reppion. Monster Macs will be on patreon, and twitter, but over at channelhex.com it’ll be displayed as a simple webcomic. At some point I’ll look into adopting it to fit the webtoons format, but that’s a fair bit more work, I think.

One of the problems with WordPress is that I like NICE BIG CHUNKY IMAGES – get me to the source of an image as quick as possible, this especially useful on webcomics, but wordpress just absolutely refuses to do so – for reasons best known to itself.

With wordpress though, there’s usually a plugin – and because this website is hosted at Stratgem.host (highly recommended, and fairly cheap) rather than wordpress.com it’s a fairly simple matter to install one (wordpress.com wants you to pay extra for adding plugins)

So I added two plugins, firstly: simple lightbox. This makes any linked artwork display on screen in a maximum resolution on a layer on top, a nice classy way to view art. (And adds navigation when you need it)

Secondly I added the plugin Manga+Press for WordPress. This simple plugin lets you create a comic that you can update and it will archive it for you.

A neat solution, but it still wasn’t displaying the strip large enough and for that, I’m afraid, I had to dig deep deep into the archives of my brain for how wordpress worked.

(And you can nope out of this now – unless it’s relevant to you!)

Essentially manga+press gets you to create new pages in wordpress for the current comic, and it uses two template documents stored deep in the bowels of the plugin directory in order to display that. AND you need to edit these files if you want the thumbnailed image to have a clickable link to the larger image.

The first file you edit is wordpress/wp-content/plugins/mangapress/templates/single-comic.php – this php page simply the comic one page at a time along with a bit of navigation, but I wanted a link to larger image.

Normally this very simple file contains not-much and so I simply added a bit of code to do what I wanted…

 * MangaPress
 * @package Manga_Press
 * @subpackage Manga_Press_Templates\Single_Comic
 * @version $Id$
 * @author Jess Green <jgreen@psy-dreamer.com>
<?php mangapress_comic_navigation(); ?>

<div class="mangapress-media-img">
    // Grab the url for the full sized image... / PJH Added
     $img_atts = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); ?>

    <a href="<?php echo $img_atts[0]; ?>">
    <?php echo wp_get_attachment_image( get_post_thumbnail_id(), $thumbnail_size, false );?>

<?php mangapress_comic_navigation(); ?>

All my little addition does is grabs the url of the full file for the post and creates a link to that.

This is sufficient to give each archived comic page a link to the full image. But, weirdly, not the current page which, oddly, has a slightly different template and as a little harder to figure out (because it’s been years since I’ve dabbled in html, php or wordpress)

You also need to edit the file in the wordpress/wp-content/plugins/mangapress/templates/content/latest-comic.php

And changed it to

<h2 class="mangapress-comic-title">
    <?php the_title(); ?>

<div class="mangapress-media-img">
      <a href="<?php  the_post_thumbnail_url(get_the_ID());?>">
          <?php the_post_thumbnail(get_the_ID(), $thumbnail_size);?>
<?php mangapress_comic_navigation(); ?>

<div class="mangapres-entry-content">
    <?php the_content(); ?>

And that’s it – not a lot changed (but by crikey it was hard to hunt down exactly what I needed in wordpress tags to get it to do what I wanted, and I’m not convinced there isn’t a better way)

Anyway, that might be of use to some!