Building a Webcomic with Wordpress Part 3 - Inserting your comic

Let's inspect our website:

Open up the developer tools.  In Firefox you can use a plugin called firebug, in Chrome you can use the built-in developer tools by pressing Ctrl + Shift + i.  This will pop up an invaluable little window at the bottom of your browser, that shows the code for the page you're viewing.  The little black arrows next to elements indicate nested bits of the page that you will have to navigate into to find where to place your comic.

Here, we're going to place our comic above the main section of the website, and below the navigation bar.  That means we'll have to find the space between the helpfully labeled "masthead" and the "main" sections in the code.  I first checked in the index.php file in the twentythirteen folder, since that's the main file that controls the page, but couldn't find the beginning of the "main" segment - it just begins with the "primary" div.

That means the place we need is in the header.php file.  Go into the twentythirteen folder and find the file called header.php.  Right click and copy the file, then go into your twentythirteen-child folder and paste it there.  Again, we're only going to make changes to the files in the child folder, so as to preserve the template theme.  Open up the header.php file in your child folder and you'll see at the bottom, a space between the masthead div and the main div.  This is where you're going to paste your comic code.

I gave the comic area its own div element so that I can make changes to it in the style.css folder.

Next, open up the style.css file in the twentythirteen-child folder, and add the following:

#comicarea {

margin: 0 0 0 0;

}

This isn't really necessary, but it gives you an idea.  Now if you wanted to make adjustments to the placement of the comic, you could come in and change the margins on that div in the style.css file.

Now you just need a comic, something that will allow you to really see where we're going with this tutorial.  As mentioned in the previous post, we need to think about the size and layout of our comic.  According to the w3schools, the most common screen resolutions are now 1024 x 768 px. You don't have to worry too much about these numbers at the moment - Comic Easel will resize your comic for different resolutions, but you do want to think about them as a proportion.

Open up whatever image editing software you use and create a new file.  I rather arbitrarily created one that was 900px wide by 706px tall.  I filled it with a color, and then added text to the middle, of varying sizes, like so:

I know it's really garish - this will hopefully force me to replace it quickly!

Now go into your dashboard on your new wordpress site.  If you've enabled the Comic Easel plugin, you should see a catagory for comics.  Click through there to add a new comic.  In the upper right hand corner of the screen, it allows you to add a featured image - that's going to be your comic.  Add the above file, then give it an arbitrary title and some arbitrary text.  You can even play around with some of the other options if you'd like.

Finish adding your comic, then scroll down to publish it.

If all has gone as planned, your webpage will now look like this:

You'll see that the image could be a lot wider, in my resolution, but what about someone with a smaller resolution?  The easiest way to check is to go into your computer's display properties, and drop it down.

Here we are at 1024 x 768.  You can see that there's still room for the image to be a little wider, and a little shorter, in order to all fit on one page.  Also, you'll notice that in my image, the smallest text size that's still readable is the 12 point - This will be hugely important when we're scripting and composing, because we won't want to make the dialog text any smaller than that.

See you next time!