My client would like to add a quote to each post and have it to the side of each post.
I’ve attached the wireframe for reference.
Does anyone have any suggestions on how to accomplish this?
Interesting question! It it looks like you need formatting for this content, right? Not just a text string.
How comfortable with HTML is the client?
Two thoughts:
- Use the custom_excerpt field. (It’s in the right pull-out menu on each post.) The client is going to have to type HTML in that field, but if it’s just wrapping some bits in
<b>tags, they can probably handle it. This is by far the simplest solution. - Write some javascript that extracts that quote from the post content. You’d need to do some javascript-and-handlebars wizardry. Within your posts loop (inside the foreach), you’d have something like:
<div id="@slug"></div>
<script>
yourCustomFunction("{{content}}", "@slug")
</script>
And then yourCustomFunction (defined just once on the page, not in the foreach) extracts the first blockquote or product card or some other structure you can pull out with querySelector, grabs the contents, and inserts it into that target div.
This is significantly more complex and involves loading the full html of the post body on the index page (which has implications for page loading times of slow networks). I think you’d be better served by option #1 in this case, since the html to be inserted looks pretty simple. I’d go with option #2 if you needed something more complex, like a video added to the index page.
1 Like