HTML snippet breaks post

Bugs
1

Hey Ghost team

I believe there is a major bug in Journal theme with Ghost. When I create a HTML snippet, all the content after the HTML snippet converts to plain HTML although I am closing the HTML brackets. Please see below:

image
image2140×1033 307 KB

Mert

2

Hi @Mert_Deveci,

Could you post the full snippet of HTML you are using?

3 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box for Readme</title>
    <style>
      a.button-one:hover {
        box-shadow: 8px 4px 8px 4px rgba(255, 255, 255, 0.2);
      }

      a.button-two:hover {
        font-weight: bold;
        color: black;
      }
    </style>
  </head>
  <body
    style="
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
        sans-serif;
    "
  >
    <div
      style="
        border-radius: 12px;
        padding: 4%;
        background: linear-gradient(to right, #000000 0%, #1f1f1f 100%);
      "
    >
      <svg
        width="60"
        height="60"
        viewBox="0 0 180 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M90.0077 4V175.999M79.9216 9.3289L6.12851 117.562C5.1601 118.979 4.50142 120.584 4.19548 122.273C3.88954 123.961 3.94321 125.696 4.35299 127.362C4.76278 129.029 5.51946 130.59 6.57364 131.945C7.62782 133.299 8.95579 134.416 10.4709 135.222L84.2486 174.563C86.0161 175.507 87.9888 176 89.9923 176C91.9959 176 93.9685 175.507 95.7361 174.563L169.529 135.207C171.044 134.4 172.372 133.284 173.426 131.929C174.481 130.575 175.237 129.013 175.647 127.347C176.057 125.68 176.11 123.946 175.805 122.257C175.499 120.568 174.84 118.963 173.871 117.546L100.094 9.3289C98.9735 7.68666 97.4691 6.34281 95.7114 5.41413C93.9536 4.48544 91.9957 4.00001 90.0077 4.00001C88.0197 4.00001 86.0617 4.48544 84.304 5.41413C82.5463 6.34281 81.0419 7.68666 79.9216 9.3289Z"
          stroke="white"
          stroke-width="8"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>

      <h1 style="color: #ffffff">Take your Game to Millions</h1>
      <p style="color: #ffffff">
        In order to use Stash Renting SDK and APIs, you need to provide an API
        key to the SDK. If you want to use Stash technologies for your own
        game or platform, fill out the form below to
        retrieve your API key and start building right away!
        You can always contact us via email at team@joinstash.io 
      </p>
      <div>
        <a
          class="button-one"
          target="_blank"
          href="https://form.typeform.com/to/XeLQ6lMp"
          style="
          margin-right: 12px;
            background: linear-gradient(to right, #3880ff 0%, #3dc2ff 100%);
            border-radius: 4px;
            color: white;
            font-size: 18px;
            font-weight: bold;
            line-height: 60px;
            text-align: center;
            text-decoration: none;
            width: fit-content;
            height: fit-content;
            padding: 12px 20px 12px 20px;
          "
          >Get an API Key</a
        >
        <a
          class="button-two"
          target="_blank"
          href="mailto:mert@joinstash.io"
          style="
          margin-right: 12px;
            border: 2px solid white;
            border-radius: 4px;
            font-size: 18px;
            color: white;
            line-height: 60px;
            text-align: center;
            text-decoration: none;
            width: 300px;
            padding: 10px 20px 10px 20px;
          "
          >Contact</a
        >
        </div>
      </div>
    </div>
  </body>
</html>

What is wrong?

4

@Mert_Deveci have you cleared all of your caches?

Your HTML Snippet does seem to work just fine on a freshly-installed Casper site…

screencapture-casper-ghost-pub-mert-deveci-2022-10-09-09_29_14
screencapture-casper-ghost-pub-mert-deveci-2022-10-09-09_29_142263×2809 467 KB

https://casper.ghost.pub/mert-deveci/

Can you please provide a link to the post on your site?

5

The post is not live. Would you mind trying it out with Journal theme? I cannot imagine any problems regarding the cache.

6

@Mert_Deveci it looks like you’re trying to add a whole HTML document in a HTML card? Nested documents is not valid HTML and could cause weird issues that are different in various browsers and other contexts.

If you’re adding HTML via the HTML card it should be written in a way that is valid to appear anywhere inside an existing HTML document, no <html> or <head> or <body> tags should be used.

1 Like
7

I understand but the issue persists when I write and wrap the element in only

s. No body, html or head tag. Were you able to reproduce the issue?

Mert

8

@Mert_Deveci the HTML is still invalid, you have an extra </div> which will cause the post contents container element in the theme to be closed meaning any content after is not styled correctly.

2 Likes
9

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.