Home → Extras (Style Sheets, etc.) →

Auto-fitting images

• Edit

tsvoronos

09 Feb, 2015 06:38 PM

I apologize for asking this question so broadly, but can't figure out how to make this work:

I'd like images in a stylesheet to autofit to the preview window's width, as most of the style in Marked do. If there's an easy answer to this I'd love to know rather than digging into these style packages quasi-blindly.

1. Support Staff 1 Posted by Fletcher on 09 Feb, 2015 06:46 PM

   

   That would be a matter of using CSS to set the width for images/figures
   to 100%.

   Fletcher

   • Edit

2. 2 Posted by tsvoronos on 09 Feb, 2015 07:46 PM

   

   Hm, I'm using Myword.style, which has

   #wrapper img{border:none;display:block;max-width:100%;margin:1em auto;}

   in the css component, and my preview still looks like this:

   Teddy

   • PastedGraphic-1.png 118 KB
   • Edit

3. Support Staff 3 Posted by Fletcher on 09 Feb, 2015 08:09 PM

   

   There's tons of resources out there for learning CSS. Perhaps some
   others can jump in here, but I don't have the time to walk you through
   it (there's a lot to cover!). In general, there are better places than
   this site to ask CSS questions.

   I will say, though, that max-width is just like it says -- the "maximum"
   width, not the actual width.

   If there's something that works in regular CSS and not when displayed in
   the Composer preview, then feel free to bring that up here. But I can't
   offer general CSS support, just like I can't offer general LaTeX support.

   F-

   • Edit

4. 4 Posted by tsvoronos on 09 Feb, 2015 08:20 PM

   

   Hi Fletcher,

   Thanks for your reply. I certainly wasn't asking for CSS help; my question was about whether MMD Composer interprets stylesheets in a non-traditional manner, since this same syntax works just fine in Marked.

   Apologies if my question was misinterpreted; from your response it sounds like this is a CSS issue, so I'll figure it out on my own.

   Teddy

   • Edit

5. Support Staff 5 Posted by Fletcher on 09 Feb, 2015 08:52 PM

   

   You can't use Marked as a comparison -- Brett does a lot of hand-waving
   in Marked, so there's no telling what is actually happening. Composer
   uses what you give it, *except* to add some padding above and below to
   allow for synchronized scrolling (esp. in Typewriter mode), and a few
   things as specified in the preferences.

   Export your file from Composer as HTML and view it in a browser. If the
   browser and Composer are different, it's worth asking about here.

   Fletcher

   • Edit

6. Support Staff 6 Posted by Fletcher on 09 Feb, 2015 08:53 PM

   

   And you realize that Marked uses separate styling, right?? It doesn't
   (to my knowledge) support Composer's style sheets/themes.

   F-

   • Edit

7. 7 Posted by tsvoronos on 09 Feb, 2015 08:58 PM

   

   Fletcher,

   If you're interested, the issue is that MMD Composer appears to dismiss a large portion of Myword's CSS section due to the presence of "#wrapper" tags, which as far as I understand it are a fairly common way to specify wrappers in CSS. Again, dropping this into Marked does not have this issue at all.

   You said "If there's something that works in regular CSS and not when displayed in
   the Composer preview, then feel free to bring that up here." This seems to fit into that category, so there you go.

   Teddy

   • Edit

8. 8 Posted by tsvoronos on 09 Feb, 2015 09:05 PM

   

   I sent this without seeing your responses, so you can ignore the part about Marked. I do realize that it uses separate styling, but I took only the CSS portion of MMC's .style file and made a new .css file that I added to Marked.

   • Edit

9. Support Staff 9 Posted by Fletcher on 09 Feb, 2015 09:11 PM

   

   #wrapper is not standard at all. You have to add something to your HTML
   with the #wrapper class for it to work.

   If you didn't add that, then it **shouldn't** work.

   (Caveat being that I am not looking at the style sheet, so I'm assuming
   your description is accurate).

   • Edit

10. Support Staff 10 Posted by Fletcher on 09 Feb, 2015 09:14 PM

    

    Yup. Just use a regular browser with the exported HTML and then get
    back to me if there are issues.

    Marked is great, but it does a lot for you, which then confuses people
    because they don't actually understand what is going on (the magic
    "black box" approach). I like people to know what is going on and be
    able to tweak/fix it themselves. Different philosophies.

    • Edit

11. 11 Posted by tsvoronos on 09 Feb, 2015 09:16 PM

    

    Ok, I'll speak with the maker of that style. Thanks for the information Fletcher, didn't mean to waste your time.

    • Edit

12. Support Staff 12 Posted by Fletcher on 09 Feb, 2015 09:21 PM

    

    You're not wasting it, just explaining why I can't get into helping
    everyone figure out CSS/LaTeX/<insert favorite hugely complicated
    software here>.

    • Edit

13. 13 Posted by tsvoronos on 09 Feb, 2015 09:23 PM

    

    For sure, and I'm sure you get a lot of requests like that; definitely wasn't my intention.

    • Edit

14. 14 Posted by Evan Lovely on 18 Jul, 2015 07:11 PM

    

    Hi there! I work with CSS professionally and I can chime in here on the CSS rule needed for liquid, "squishy" images that are never bigger than their container and maintain aspect ratio with this CSS rule:

    img {
        max-width: 100%;
        height: auto;
    }
    

    Hope that helps!

    • Edit

15. 15 Posted by Evan Lovely on 18 Jul, 2015 07:25 PM

    

    OK, so I got it figured out!

    Step 1 - Right click on /Applications/MultiMarkdown Composer and select "See Package Contents"
    Step 2 - In the Resouces/ folder, you'll see all the default themes with a .theme extension; copy the one of your choice to ~/Library/Application Support/MultiMarkdown Composer/Themes/ and rename it.
    Step 3 - Open the new .theme file and you'll see a long line that starts with css = and has a comment of // Preview above it – that's the CSS that handles the style of the preview. All we have to do is add the CSS I mentioned at the end, though we need to keep it all on one line; so just add the code below between css = " and ";

    CSS to add:

    img {max-width: 100%; height: auto;}
    

    I'm also attaching a screenshot comparing the old theme and new theme file; hope this all helps! Cheers!

    • Kaleidoscope_–_My-New-Dark_theme___New-Dark_theme.png 149 KB
    • Edit

16. Fletcher closed this discussion on 21 Aug, 2015 09:14 PM.