Formatting/Markdown broken after inserted picture

When inserting pictures from the panel to a blog post via the image: tag, the picture displays fine, but breaks formatting of the text after that. The Markdown doesn’t get properly translated to HTML after the image.

This is what it looks like in the panel/text file: (image: a-nice-picture.jpg)

Image source code looks like this:

<img src="http://localhost:8888/content/blog/blog-post-1/a-nice-picture.jpg" alt="blog-post-1"> == $0

I guess the culprit is the == $0, but where does this come from? I’m doing a major redesign, but didn’t touch anything in the tags.php.

Can anyone point me in the right direction? Thanks!

Which Kirby version is that? Have you installed any plugins, custom fields or whatever? Any special config settings?

Does this happen in all pages or only particular ones? Do you have the same problem in a fresh starterkit?

Is the line/row after

in the panel field empty?

If not, put the rest of every (image: ... )-line/row in the next line/row.

Good luck!

1 Like

@anon77445132: It should not matter where you put the image tag, otherwise this should be regarded as a bug.

In Kirby 2.2.3 it is a bug.

Thank you! I’m indeed using 2.2.3 and could’ve sworn it did work in previous, older versions though. I had the image: tag in a line with a markdown heading (##) and that caused the issue. Guess I have to go back and edit some older posts, that’s probably best practice anyway.

Oh yes, looks like that issue still exists in 2.3 beta as well.

That is not nice! There are some more (older) errors like this in this beta version.

I hope, they could be catched before the final release… :kissing_smiling_eyes:

Although, a brief test revealed that it seems to depend on your kirbytext.image.figure setting (in 2.2.3 and 2.3)

If kirbytext.image.figure is set to false, you can put the image tag on the same line as text, if set to true (default), you can’t.

… means, it is an error.

Sorry!

[Added:]
Look at Parenthesis in a link produces a wrong link and others…, but here in the forum they are “Solved”.

Well, maybe, but a figure tag is a block element, not an inline element. It’s the same as if you put a markdown header on the same line as the rest of the text, it does not work either.

Now, this post is also “Solved”, but I think the related error is yet NOT solved.

We live in a difficult world!

It would be as simple to create a new status like “Issue at GitHub” and to assign it here. Then EVERY reader can see HERE exactly, what the status is. Now we have so search at GitHub…

Please feel free to create an issue on GitHub, I’m not sure this is really a bug.

Well, that one was changed to “solved” by you. :stuck_out_tongue:
We generally create issues on GitHub for bugs we can reproduce, but in this case it is not sure if it is a bug.

Is this something you are only seeing in the DOM inspector? If you view page source is it still there?

It looks identical to what Chrome now shows in the DOM inspector (which has confused me before). Looks like the Command Line API explained here - https://developer.chrome.com/devtools/docs/commandline-api

A better example with == $0 shown here, top image - https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/?hl=en

I havent used it but its allows shortcuts to jump you to the last elements you inspected.
Hope that helps solve this issue.

1 Like

$0 is only a “shortcut” to access that particular element in de developers console (and since it’s a programming default in most other languages / IDE’s);

https://www.reddit.com/r/chrome/comments/2grws2/did_you_knew_about_the_0_operator_in_chrome/

Just right click on an element in your DOM, select inspect element and type $0 in the console;

That way you will have direct access to it, without the need to write your own selector.


- edit - Of course you can also access $1 and $2, etc… (when set, of course).

Is this behavior a bug or a feature?

When I place an image on the same line with some other text, all the markup after that image is broken.

When I place the image on a single line, followed by the text, the markup is okay.

I can only place images on the same line with other text, with this settings;

c::set("kirbytext.image.figure", false);

Why is all the markup broken, when a figure is placed on the same line of text?

It is allowed by W3C - so why not follow these rules?

figure is a block-element, but you can force the markup to jump to a new line - with all the markup intact, I guess?


my markup code


markup of the text, with figure set to false


markup of the text, with figure set to true

I’ve already said this above, I don’t think it’s a bug but related to how markdown is rendered:

As I have said:

to me it is a bug, because a part of the in the content file saved text is ignored.

Let's get not too technical about the definition of a bug

:stuck_out_tongue:

Maybe it’s not a bug - but it isn’t handy as well;

Why are you forced to place an image-tag on a new line?

I can perfectly insert figure tags on the same text-line, without writing invalid HTML-code.

But Kirby can’t; it simply breaks-down on a perfect valid syntax, and ignores all mark-up afterwards;

That’s not a nice feature… and when it’s not a feature, I do consider it as a bug.

Imagine this;

(image:foo.bar class:left) Some random **text** and more text

Where the image is aligned / floating left relative to the text after it;

You can not write down this markup, because all the text afterwards is not formatted…

Now I am forced to do this;

(image:foo.bar class:left)

Some random **text** and more text

Which will insert (needless) <p> tags between the image and text itself…

But I will write a regex myself and inject it as a plugin, so I am finally able to place an image-tag on the same line as some plain-text :slight_smile:

Thanks for the perfect support, by the way :+1: I really like Kirby :slight_smile: