Support » Plugin: Webcomic » Webcomic Media Widget – Format Field

  • Resolved vidalliger

    (@vidalliger)


    Hi! So, I’m pretty new to all of this: webcomics, websites, the whole shebang. I want to start posting my webcomic on my wordpress site. I’ve got the ComicPress theme installed, and now I’ve got the Webcomic plugin installed and activated, as well.

    The problem is that I can’t seem to get my comics to display the way that I want them to. Basically, I want to upload a three-panel strip in the form of three separate images, where each panel is its own image. I was thrilled to find the Webcomic plugin, because it seems to be the only webcomic-specific plugin that allows you to upload multiple comic images per post.

    However, by default, the webcomic media widget displays the panels at full-size, creating a new row whenever the viewing area is decreased such that all three images no longer fit together in the same row (hopefully I’m being clear). In other words, the design is responsive, which is awesome, but it’s not responsive in quite the way I would like it to be. As it stands now, when you shrink your browser’s viewing area, there is a window of time during which two panels will appear in the same row, left-aligned, and the third panel appears below them, also left-aligned.

    I would like it so that the three panels appear in a row on large screens, like desktops, but switch to being displayed vertically at some specific breakpoint, say 600px. Now, I know this can be done with CSS, but I’m not sure if I can do something to the Webcomic Media widget to make this happen?

    From what I’ve read, it seems like maybe the format option field could be my best bet? But I don’t know what to enter into the field…

    “Optional media format, like before{{join}}after{size}. Size may be be any valid image size or a comma-separated list of width and height pixel values (in that order), and may be specified without the rest of the format arguments.”

    What syntax is “before{{join}}after{size}”? Is there anyone who has any experience with widgets who could point me in the right direction? I would greatly appreciate any help in this matter! Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Mike

    (@mgsisk)

    Hey @vidalliger, thanks for using Webcomic! I think I follow what you want to do, and to be honest CSS is probably the easiest way to do this; something like this should work:

    
    /* mobile display with stacked images */
    .widget_mgsisk_webcomic_collection_widget_webcomicmedia img {
      height: auto;
      max-width: 100%;
    }
    
    @media screen only and (min-width: 600px) {
      .widget_mgsisk_webcomic_collection_widget_webcomicmedia img {
        max-width: 33%;
      }
    }
    

    Thank you for responding and thanks for the awesome plugin!

    I ended up adding some custom CSS to the theme and, like you said, that did the trick! Actually I found an awesome article about manipulating CSS into determining how many items are in a container, which was super helpful to me, since I may occassionally end up doing strips that have four, rather than three panels. Here’s a link to the article, since I think it might be useful to others using this plugin: https://alistapart.com/article/quantity-queries-for-css

    And here’s the code I ended up with:

    @media (min-width:601px) {
    .webcomic-media img:nth-last-child(3):first-child, img:nth-last-child(3):first-child ~ img {height:auto;width:33.33%}
    img:nth-last-child(4):first-child, img:nth-last-child(4):first-child ~ img {height:auto;width:25%}
    }
    @media (max-width:600px) {
    .webcomic-media img {height:auto; width:100%}
    }

    It seems to work, but I’ll have to look into this “screen only” thing. I’m not familiar with that.

    Also, here’s the site, in case anyone wants to see how the code ends up working: http://funnyhowitgoes.com/

    Thanks again for your help, Mike! I know I’ll be back with more questions… I’m having trouble customizing the navigation buttons, but I suppose I should create a new thread for that?

    Plugin Author Mike

    (@mgsisk)

    The screen only bit is related to CSS media types; it’s technically optional, but useful as a general practice to separate screen-only styles from print-media styles.

    Feel free to ask more questions here or start a new thread, whichever is easier.

    Awesome! Thank you! I’m having trouble customizing the navigation buttons that appear under my comic. I want to replace them with some buttons I drew myself. I tried using the widget area… Am I right in thinking that I would add the “First Webcomic Link” widget, “Next Webcomic Link” widget, etc., to the Webcomic Navigation Widget Area, and add my media to each one? When I tried that, nothing would show up on my site.

    Also, the navigation buttons don’t seem to be working? I just posted my second comic, and it appears on the homepage, but when I click the previous button, the comic stays the same (the second one). It even seems to have replaced the first comic at the first comic’s URL. Is this a common problem? For reference, I’m using the ComicPress theme. Thanks!

    Plugin Author Mike

    (@mgsisk)

    You’re correct; you should be able to just add “[whatever] Webcomic Link” widgets to the Webcomic Navigation area to customize your navigation.

    This one has me a little stumped, though; everything seems to be working ok with a clean install on my test box. Can you share a little more about how you have ComicPress and Webcomic configured (e.g. ComicPress settings, Webcomic collection settings and integration settings, other plugins, etc.)?

    Sorry, never mind. I’m not sure what I did to fix it, but it seems to be working now! I may have to fiddle with things a bit more to get it to look the way I want, but the issues seem to have resolved themselves for now…? Anyway, thank you for being so responsive!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Webcomic Media Widget – Format Field’ is closed to new replies.