Style a metafield inside of a "replace" object

Technical Q&A
1

Hey folks, I’m trying to create an automated pull quote inside a blog, so that when our editor wants to feature a sentence in an article, it can appear in large, stylized text inside of the article.

My editor isn’t a coder so I thought I’d use a metafield where she can input the text she wants to feature and simply write “pullquote” in the part of the article she wants it to appear.

I got all the way there, but just short of now being able to stylize it. In static-article.liquid, I edited the article content object to add a replace:

{{ article.content | replace: “pullquote”, article.metafields.custom.pull_quote }}

This works. Inside of the article, where pullquote appears, it’s replaced with the content of the metafield. But it’s in plain text.

I can’t add styling inside of the curly brackets, as far as I can tell.

I’d like to style this extensively so that wherever this metafield is used, it’ll appear inside of a box, in large stylized font. I’m guessing I could do this in CSS, but how do I always style a metafield as if it were a class?

2

In more straightforward terms, how do I reference a metafield as if it were a class in the CSS file so that I can give it styling parameters.

I tried this, which didn’t work:

.article.metafields.custom.pull_quote {
color: #FF00FF;
}

3

Hi @iPedro

You can capture your content first

{%- capture pull_quote_html-%}
      
          {{article.metafields.custom.pull_quote}}
      

{%- endcapture -%}

{{ article.content | replace: "pullquote", pull_quote_html }}
4

Very clever. Thank you @Kani this worked!