How to write an image caption in MMD to copy into Wordpress?

je
jennb
Posts: 3
Joined: Sat Sep 22, 2018 4:34 am
Platform: Mac

Tue Oct 16, 2018 2:06 am Post

I have started writing in multimarkdown in scrivener, as it is not hard to learn the basics, and then copying and pasting into Wordpress.org, using the Jetpack plugin to render it to HTML on publish. The only thing I'm having trouble figuring out is how to make an image caption appear centered beneath the image. I can put in alt-text (for screen readers) and/or Title, which is seen only on mouseover, but I can't figure out how to put in what would be called an image caption--words that appear in the browser below the image no matter what.

Curious if anyone has solved this problem or do you just write everything else in MMD and then add images and captions in the WYSIWIG editor in Wordpress? Thanks!

User avatar
nontroppo
Posts: 1219
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Tue Oct 16, 2018 3:41 am Post

Jetpack apparently (I don't use wordpress or Jetpack personally) only supports some of the features that Multimarkdown does (which Scrivener uses), and proper captions for figures which is supported by MMD (and Pandoc) is not supported by Jetpack (which uses Markdown Extras).

https://michelf.ca/projects/php-markdown/extra/

You could either write them directly in HTML in Scrivener, or manually add them in the web editor. HTML to create captioned figures looks something like this:

Code: Select all


<figure>
  <img src="pic.jpg" alt="blah">
  <figcaption>Fig.1 - Blah blah blah.</figcaption>
</figure>


User avatar
AmberV
Posts: 24272
Joined: Sun Jun 18, 2006 4:30 am
Platform: Mac + Linux
Location: Ourense, Galiza
Contact:

Tue Oct 16, 2018 9:31 am Post

Curious if anyone has solved this problem or do you just write everything else in MMD and then add images and captions in the WYSIWIG editor in Wordpress? Thanks!


Do you need to store MD in WordPress, or is storing HTML well enough? Before I found a Markdown plug-in I liked, I would use MMD for one of its intended purposes: the production of solid, clean HTML. I’d paste the result into WordPress source editor and be done with it. The only time I would use raw HTML is if I needed to do something MMD doesn't convert to HTML itself.
.:.
Ioa Petra'ka
“Whole sight, or all the rest is desolation.” —John Fowles

je
jennb
Posts: 3
Joined: Sat Sep 22, 2018 4:34 am
Platform: Mac

Tue Oct 16, 2018 10:08 pm Post

Thanks for the replies!
Nontroppo (love your handle), thanks for the verification--I thought maybe I was missing something!
AmberV--thanks too. I've chosen MMD because it's a little easier than fiddling with formatting and I can copy/paste from Scrivener to the Wordpress editor without pulling in lots of extraneous code (or so I hear). I want to write in Scrivener bc I want to leverage all the organizational benefits of Scrivener, I also would like to have to do as little as possible getting it into Wordpress and published. The Jetpack plugin allows me to just copy and paste without having to convert the MMD to HTML, but it looks like if I want captions on any images, I'll either have to manually add the code or switch over to the Visual Editor in wordpress and put it in that way.

Jo
JoRo
Posts: 828
Joined: Sat May 26, 2018 6:40 am
Platform: Mac

Tue Oct 16, 2018 10:38 pm Post


User avatar
AmberV
Posts: 24272
Joined: Sun Jun 18, 2006 4:30 am
Platform: Mac + Linux
Location: Ourense, Galiza
Contact:

Wed Oct 17, 2018 12:06 pm Post

I want to write in Scrivener bc I want to leverage all the organizational benefits of Scrivener, I also would like to have to do as little as possible getting it into Wordpress and published.


That is always my goal as well. I’m not afraid to put a little effort into getting a system set up so that I can in the future spend less time messing around with post-compile clean up.

It’s slightly technical, but compile can be made to work with the clipboard instead of files, meaning we can roll “convert to HTML” and “copy and paste” into one simple process:

  1. Select the documents you want to convert to HTML.
  2. Compile (Opt-Cmd-E + Return + Return does the trick with minimum fuss—I even have a macro that does that, which I’ve bound to Shift-Opt-Cmd-E).
  3. Paste into WordPress source view.

It’s only a few key presses more than simple copy and paste, and you benefit from better HTML conversion by using MMD instead of a stricter Markdown-based PHP converter.

To get things set up so that the process can be so simplified, we’ll need to adjust a few compile settings, both for the project and the Format it uses. The recipe is given in the user manual, §24.22, Processing, under the Arguments subsection, pg. 670. Here is how this trick can be implemented:

  1. In the binder, select the document(s) you wish to publish in WordPress.
  2. Load up File ▸ Compile..., and make sure you have Compile for: MultiMarkdown set at the very top of the dialogue, not MMD to HTML.
  3. On the right side in the Contents tab, set the top setting to Compile: Current Selection.
  4. Click over to the Metadata tab, and delete the “Title” and “Author” keys. If we compile without these particular MultiMarkdown metadata fields then the result will be an HTML “snippet” rather than a full page.
  5. Now we need to make a small tweak to the compile Format, working from “Basic MultiMarkdown” as a start: right-click on it in the leftmost sidebar and duplicate & edit the format.

    (You can set the compile Format to be saved to “My Formats” instead of project formats, so that all of your Markdown-based projects can easily compile to the clipboard.)
  6. In the Processing compile format pane, enable Post-process on command-line.
  7. Set the script type to Path, from “Script”. If you have MMD installed as a stand-alone utility, then you can use “/usr/local/bin/multimarkdown” here, but if not, just specify Scrivener’s own copy with:

    Code: Select all

    /Applications/Scrivener.app/Contents/Resources/MultiMarkdown/bin/multimarkdown
  8. In the Arguments field, paste the following:

    Code: Select all

    <$inputfile> | pbcopy


    So in full, the command is “multimarkown compiled_file.md | pbcopy”. The part on the end indicates that the output generated by MultiMarkdown should be piped to a Mac utility called “pbcopy”, or pasteboard copy. You can do that yourself in Terminal—but with these compile settings that can all be automated.
  9. Select the Delete source file after processing setting. (Optional: but with this checked, compile becomes purely a clipboard process instead of leaving files around.)

That should do, click the Save button and test compile (assigning any appropriate Section Layouts if necessary). You will still be asked for a file name, just put anything here as it won’t be saved.
.:.
Ioa Petra'ka
“Whole sight, or all the rest is desolation.” —John Fowles

ti
timothy
Posts: 18
Joined: Mon Jul 02, 2018 10:01 pm
Platform: Windows

Tue Nov 19, 2019 8:19 pm Post

Is this same / similar capability available on the Windows 3 beta? I followed the instructions up to the point of the "post-processing" script, but I do not see any place to specify that.

Thanks,
Tim

User avatar
AmberV
Posts: 24272
Joined: Sun Jun 18, 2006 4:30 am
Platform: Mac + Linux
Location: Ourense, Galiza
Contact:

Wed Nov 20, 2019 11:36 am Post

The Windows beta does not have the Processing compile format pane. I’m not sure if this trick would work even if it did though—I’m not familiar enough with the Windows shell, and the utilities it provides, to say for sure. The script I posted above depends upon a utility that comes installed on every Mac, which takes the output on the shell and pipes it into the universal clipboard.
.:.
Ioa Petra'ka
“Whole sight, or all the rest is desolation.” —John Fowles

ti
timothy
Posts: 18
Joined: Mon Jul 02, 2018 10:01 pm
Platform: Windows

Thu Nov 21, 2019 4:40 pm Post

Got it, thanks Amber.

bi
billymandy
Posts: 1
Joined: Tue Feb 18, 2020 8:51 pm
Platform: Windows
Contact:

Tue Feb 18, 2020 8:57 pm Post

Thank you very much