Using inside of markdown table breaks table structure

MattMaginniss commented 3 years ago

Hello, I was editing my post in markdown, put the picture tags inside a table, and this was the output I recieved: I have tried to change the code in multiple different ways but nothing seems to make it better.

I am not sure what I could be doing wrong. Thank you!

Jekyll version 4.2 Ruby 2.7.3 jekyll_picture_tag 2.0.3

This is the input markdown

| default | dark | forest |
| --- |  --- | --- |
| {% picture jpt-webp screenshots/skins_default.jpg %} | {% picture jpt-webp screenshots/skins_dark.jpg %} | {% picture jpt-webp screenshots/skins_forest.jpg %} |

This is the output html

<table>
  <thead>
    <tr>
      <th>default</th>
      <th>dark</th>
      <th>forest</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><picture><source srcset="/assets/images/optimized/screenshots/skins_default-400-8b0b67c58.webp 400w, /assets/images/optimized/screenshots/skins_default-600-8b0b67c58.webp 600w, /assets/images/optimized/screenshots/skins_default-800-8b0b67c58.webp 800w, /assets/images/optimized/screenshots/skins_default-1000-8b0b67c58.webp 1000w" type="image/webp"><source srcset="/assets/images/optimized/screenshots/skins_default-400-f50e4887f.jpg 400w, /assets/images/optimized/screenshots/skins_default-600-f50e4887f.jpg 600w, /assets/images/optimized/screenshots/skins_default-800-f50e4887f.jpg 800w, /assets/images/optimized/screenshots/skins_default-1000-f50e4887f.jpg 1000w" type="image/jpeg"><img src="/assets/images/optimized/screenshots/skins_default-800-f50e4887f.jpg"></picture></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><picture><source srcset="/assets/images/optimized/screenshots/skins_dark-400-4d622fcce.webp 400w, /assets/images/optimized/screenshots/skins_dark-600-4d622fcce.webp 600w, /assets/images/optimized/screenshots/skins_dark-800-4d622fcce.webp 800w, /assets/images/optimized/screenshots/skins_dark-1000-4d622fcce.webp 1000w" type="image/webp"><source srcset="/assets/images/optimized/screenshots/skins_dark-400-98c3e5b63.jpg 400w, /assets/images/optimized/screenshots/skins_dark-600-98c3e5b63.jpg 600w, /assets/images/optimized/screenshots/skins_dark-800-98c3e5b63.jpg 800w, /assets/images/optimized/screenshots/skins_dark-1000-98c3e5b63.jpg 1000w" type="image/jpeg"><img src="/assets/images/optimized/screenshots/skins_dark-800-98c3e5b63.jpg"></picture></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><picture><source srcset="/assets/images/optimized/screenshots/skins_forest-400-990ec1b97.webp 400w, /assets/images/optimized/screenshots/skins_forest-600-990ec1b97.webp 600w, /assets/images/optimized/screenshots/skins_forest-800-990ec1b97.webp 800w, /assets/images/optimized/screenshots/skins_forest-1000-990ec1b97.webp 1000w" type="image/webp"><source srcset="/assets/images/optimized/screenshots/skins_forest-400-9846c5632.jpg 400w, /assets/images/optimized/screenshots/skins_forest-600-9846c5632.jpg 600w, /assets/images/optimized/screenshots/skins_forest-800-9846c5632.jpg 800w, /assets/images/optimized/screenshots/skins_forest-1000-9846c5632.jpg 1000w" type="image/jpeg"><img src="/assets/images/optimized/screenshots/skins_forest-800-9846c5632.jpg"></picture></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Screenshots: Code:

Output:

rbuchberger commented 3 years ago

Hello!

So JPT doesn't know anything at all about what happens around it. The problem is probably kramdown getting confused and mangling the output.

I talked about it a bit here: https://rbuchberger.github.io/jekyll_picture_tag/users/notes/kramdown_bug.html

The solution may be to add nomarkdown: true to the relevant preset.

MattMaginniss commented 3 years ago

That is fair.

I will look through this and attempt to see what I can do with that and report back!

MattMaginniss commented 3 years ago

Hello, I have read about this, I have attempted to use the default preset, created the picture.yml file:

presets:
  default:
    nomarkdown: true

and I have removed the jpt-webp from the tag to hopefully use this default preset. That did not fix my issue.

I have updated _config.yml to have nomarkdown: true

picture:
  source: "assets/images"
  output: "assets/images/optimized"
  dimension_attributes: true
  nomarkdown: true

Then, I have also attempted to manually add the {::nomarkdown} {:/nomarkdown} tags but that just added those tags to the output html and still has those odd in the other columns.

| default | dark | forest |
| --- |  --- | --- |
|{::nomarkdown}{% picture screenshots/skins_default.jpg %}{:/nomarkdown} | {::nomarkdown}{% picture screenshots/skins_dark.jpg %}{:/nomarkdown} | {::nomarkdown}{% picture screenshots/skins_forest.jpg %}{:/nomarkdown} |

It's quite weird. Maybe I am "overmedicating" the problem and something simpler will fix it, but it still is perplexing me why it is going the way it is.

rbuchberger commented 3 years ago

If there are any line breaks in between the {::nomarkdown} wrappers, kramdown ignores them. When JPT adds nomarkdown tags, it also gives its output on a single line for that reason.

I think at this point, you should just write the table in an HTML file and include it in the markdown file. As long as you add the front matter --- markers, you can use JPT just like you would in a markdown file.

rbuchberger commented 3 years ago

I'm going to close this since it's somewhat outside of JPT's scope. If something changes, feel free to reopen it or create a new issue.

rbuchberger / jekyll_picture_tag

Using inside of markdown table breaks table structure #253