Playing with Comic-Easel
Like the site (not that it’s changed much)? Check out the new Archive and Cast pages.
The bulk of those pages are courtesy of Comic Easel, a new WordPress plugin-based comic system brought to you by Philip Hofer (a.k.a. Frumph) who has been maintaining ComicPress for lo these many years. He has 5 (and counting) excellent videos on YouTube Start here and look for the Migrating from CP to CE videos.
Here is my quick how-to and notes for doing the conversion:
If you didn’t use either a child theme or Companion, you will lose any customizations. You might want to convert to a child theme, first.
- Prep (can be done up-front)
- Probably best to upgrade all plugins, themes and WordPress to latest.
- Install plugins (don’t have to activate imediately):
- Comic Easel
- ComicPress To Comic Easel
- AJAX Thumbnail Rebuild
- Install theme (don’t activate):
- Easel
- If you are using a child theme, copy comicpress-xxx child theme to easel-xxx. In style.css file, change “@import” url to “../easel/style.css”. The advantage I found with using a child theme is that I didn’t lose the widgets, but save the settings, just in case.
- Make sure each comic is in only one category.
- Comic image filenames should be canonical date format. cp2ce doesn’t like more than one file with the same date in it.
- Take a snapshot of your key pages. I didn’t and couldn’t remember where certain things were supposed to be and what they looked like, exactly. This is a good idea whenever you’re tweaking a site.
- Save old settings
Write (or copy/paste) this stuff down.- widgets (current ones will be thrown into the inactive set). I found that you can open a widget tab and copy/paste the list. For replicated widgets (e.g., Text), note which one you have as they all will show up as the same name.
- comicpress settings: categories (and category numbers), folders, widths)
- ComicPress Options: Things like layout, general setting, copyright text, etc.
- active widgets (you’ll be deactivating most of these during the upgrade)
- Migration
- Activate new plugins, deactivate any other plugins to speed migration (note which).
- Under cp2ce converter migrate 5 comics first, if it comes back immediately, increase the number, if not, continue at current count.
- Actvate new theme. If using a child theme: use the child theme, not easel.
- Re-enable plugins as noted above.
- Re-enable widgets as noted above.
- Post-Trauma
First, fix all the CSS and stuff to get your site looking the way it did (remember that screenshot I had you take? You know, the one I forgot to do when doing my site.). Now you get to add all your characters to the character list and go through *all* the comics adding each character in that comic to that comic’s list. Fun for all of you OCD people. - Cast Page
To add a cast page:- Add your character in the comics ->characters page.
- Create a page and add the shortcode:
[cast-page]
at an appropriate spot (it could be the only thing on the page).
To add cast images:
- Upload the image to your site, noting the location where it went.
- Add the following for each character to your style.css (or equiv.) file:
.character-slug {
where:
background: url('file-location') top center no-repeat;
}- slug is the character slug from the Characters page.
- file is the URL pointing to the image. This can either be a full or relative URL.
Example:
.character-blob-2 {
background: url('/wp-content/uploads/blob.png') top center no-repeat;
}
If you uploaded it using the media upload, you can find the location by editing the image in the Media->Library page and looking at the “File URL” entry in the right column.
- Archive Page
For the archives page, just create a new page and add the shortcode:[comic-archive]
where you want your archive listing to show up on that page.
If you used chapters, you can make separate entries for each by adding the chapter keyword, e.g.,[comic-archive chapter=1]
where the chapter number corresponds to the ID found in the Comics->Chapters page.
Additionally, you can add a thumbnail for said chapter by addingthumbnail=1
to the shortcode, e.g.,[comic-archive chapter=1 thumbnail=1]
- (default) all chapters
- do it for series that have parent-%gt;child (chapter= does not work)
- by year; lists years as links followed by listing for year last clicked (default = current year)
- shows entire list separated by year headers
- list by chapter thumbnails
A recent addition (sometime before Jan 2017) is the list=num option where num indicates the list style:
You know what’s really frustrating about being forced to switch to WordPress? 1. Not knowing php and CSS enough to da as you instruct. And 2. The forum you reference regarding the cast-page? Page is down. I’ve spent hours trying to figure out how to add icons to the cast hover feature and have zilch. Lawks.
Frumph took the forum down due to too much spam. I’ll update the post with some new instructions.
Edit: Updated!
Do you know it’s years later and I STILL can’t get the icons to show up. LOL.
Send me the URL for your comic via the “contact kaitou” link and I’ll take a peek.
I am not sure where to add the shortcode for the cast page. Is it in the CSS and if it is then where in the CSS
Short codes go on a page or post where you want it’s contents to go. For the cast page, I created a page, titled “Cast” and put the short code in its text.
I tried that and for some reason it didn’t work. I put [cast-page] and nothing showed up for it ( not even the words [cast-page]. Is there something else I need to do before that?
It sounds like you didn’t add your characters to the Comics->Characters config page or you haven’t added them to a comic page as a Character. If a character hasn’t shown up in a comic (i.e. has a count of 0 on the Characters config page), that character won’t show up in a cast-page.
Okay! yes the character page is first thing I am working on and I do not have pages in yet. so there is nothing I have to add to the function or style.css files? Thanks so much!!
One hint that saves getting unwanted added characters: when you start to type the chatacter’s name into the Characters box, it will show name completions and you can click on the one you want. I didn’t once and had a “blob” in addition to “The Blob” in my cast page that I hadn’t noticed for a while.
I tried adding the short code [comic-archive chapter=1] but it shows up as Uncategorized, everything else I got to work.
The chapter number has to match the ID found in your comic->chapter page. (Will fix artticle.)
oh but this code worked [comic-archive chapter=chapter1 thumbnail=1]
I added the chapter ID [comic-archive chapter=73 thumbnail=1] but it just spits out something like this …
book 1
Aug 20, 2012V2 024
No thumbnail, I wonder if there is an additional code I need to add somewhere. Oh well, I guess I will just create a manual archive page.
I’ve seen thumbnail issues recently. I suspect that a recent WP update has some incompatibility that broke thumbnails.
Holy crap, the thumbnails are showing up now, all I did was reset Comic Easel to default settings and it worked. I guess I must have changed the thumbnail sizes at some point. Wow Thanks for your help I would have NEVER figured out that we needed to use the chapter ID
Thanks for discovering the reset trick. I just did that and mine just showed up, again.
I am trying to add thumbnails to my casts. I followed the guide but I am still dont getting cast images. any advice?
Did you try resetting Comic Easel to the default settings liike alex discovered?
I have not. How do i reset comic easel? Only thing i see in the plugin settings is css sheets
Under Comics->Config.
Go to Comics->Config. At the bottom of the page, there should be a button that says “Reset all settings” (you should note any specific settings you changed before you click this so you can put them back afterwards). Click on it.
I tried resetting comic press and comic easel and comic press. no dice unfortunately.
This sucks I really want the cast function to work with an image and make a cast page and cast images. I am kind of suprised their isnt a built in feature for this. Here us the code I used in comic press stylecss at the very bottom of this.
}
.character-korra {
background: url(‘mywebsiteurl/wp-content/uploads/2017/03/korra.jpeg’) top center no-repeat;
}
If you have wordpress installed in the top directory (usual), your url should be:
url(‘/wp-content/uploads/2017/03/korra.jpeg’)
You can leave of the “http://mycomic.example.com” part, but do put in the leading “/”.
Double check to make sure the file location and filename are correct. Make sure the slug is correct as shown on the Comics->Character page (e.g. in my case, the blob character slug was blob-2).
Since my comic was placed in a comic directory, the css I used was:
.character-blob-2 {
background: url(‘/comic/wp-content/uploads/2012/07/blobddd150.png’) top center no-repeat;
}
The advantage of not putting the site name in the url is if you have to change your domain name, you don’t have to hunt down all the places you put it.
Sanity check: in the source for your cast page (usually ctrl-u or right-click->View Page Source), you should find a line containing:
I looked at the above. But I am a visual type person so Its hard for me to follow. I took some screenshots of what I did and uploaded them to this url. my website is adult in nature so I would like to reframe from posting the the url.
[url read and removed – thanks]
I sent a reply but it contained a URL so I am not sure if it went through if Possible id like to send you screen shots as I am a visual person
Send me your site url from the “Contact Kaitou” page.
Email sent via your contact page. I clicked submit and got 404 so im not 100% sure it went through.
Yeah, the contact page appears to be broken. Will fix it.
In the meantime, I sent you mail regarding your problem.
Does anyone have any clue how this archive page was set up http://www.meekcomic.com/archives/ ? if not its no big deal but man that looks sweet.
Looks like a custom/modified archive page. Just requires some php hacking.
One way you could do this on the front end is after you enable jetpack plugin, go to a post or page you want to be archives, type in the title, then just click the add media button and create a gallery for each chapter. no coding required. the end result will look the same.
That is pretty much what I did thanks. I resized the thumbnails to 125wx176h and it works just fine … but the tinker-er in me wants to know how to do it on the fly. That is a battle for another day. I want to get to the part where I draw already.
No problem, glad I could help. Other than changing colors I am not really a coder. So I always try to find the non coder work arounds.
Hello, I am very much having the same problem as Deviant otaku did in march. I have a cast/characters page all set and ready, and i’m trying to get the image to display next to each character. In my style.css i have added (at the bottom)
.character-jessikat {
background: url(‘/wp-content/uploads/2017/08/jessikat.jpg’) top center no-repeat;
}
I have checked that the slug is correct, the filename and location are correct. I have ensured that I am saving any updates/edits to style.css and I’m still not seeing the image displayed. I’ve checked the source code and found the section with the table data containing the and the character-jessikat is accurate (proper slug).
Any ideas on what other things I could try to get this working? http://wingedkitten.com/characters/
what the fish? I went and checked it again and it’s working… <_< You can disregard my question and such, thanks
You probably caught a cached page – either in your browser or on your site via a plugin like WP Super Cache that wasn’t set up to not cache for logged in users.
I’ve been working on making our site more robust. I still have to add a “good” character page, I have one just not happy with it. Just another “to do to” add to the list! lol