example.html doesn't replace the whole holder.js line

[XhmikosR]

This

{{- include.content | replace: 'data-src="holder.js', 'src="...' -}}

Matches only the holder.js part and not the whole string. As far as I can tell there's no regex support here, so I'm not sure how to proceed.

/CC @m5o

[m5o]

This was the idea, as far as I remember. When you look at the output of the markup example, the data-src="holder.js is replaced by src="... to not run holder.js twice.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

📝 https://getbootstrap.com/docs/4.1/components/card/#example

[XhmikosR]

Nope, the idea was to replace the whole data-src=holder.js... with src=....

[morrissey-ingenious]

I think you will need to include a gem like this one https://github.com/joshdavenport/jekyll-regex-replace https://rubygems.org/gems/jekyll-regex-replace/versions/1.0.0

[m5o]

For reference, this #25784 (comment) is the last comment before @XhmikosR continued and did some final changes and merged the PR.

---

If regex dosn’t work out of the box and to make the example html working without a js dependency. What do you think to replace the holder.js prefix with //picsum.photos/? This would at least create a working image url.

[XhmikosR]

I'd even go with a simple SVG too if we can make it work and just pass the fill color, width and height.

[morrissey-ingenious]

what about the embed example? https://github.com/twbs/bootstrap/blob/v4-dev/site/docs/4.1/utilities/embed.md

[XhmikosR]

Not sure what you mean. Embed doesn't have any placeholder images.

[morrissey-ingenious]

@XhmikosR there is a sample YouTube video in the embed example that is not replaced by ... I was thinking that all src elements should be replaced with ... not just the placeholder data-src ones.

[XhmikosR]

Well, ideally, we could do that. But it's only one case so it's not so important to just use highlight manually.

[XhmikosR]

@m5o: so do you have any suggestions? Otherwise I guess we'll need to revert back to the plugin.

[m5o]

I'm traveling currently and don't have my tech stuff with me. Sorry, bad timing.

• An inline SVG could work, but it won't be a short one-liner if I get the inline SVG correctly. IMHO this creates to much noise into the example markup.
• Probably easiest would be a link to a spacer gif, self hosted (bootstrapcdn?) or hot linked (imgplaceholder.com / dummyimage.com / unsplash.com) which use the same url structure.

[XhmikosR]

We can wait a bit more, no hurry :)

I already have #27491 open and ready to be merged and to be honest I feel like it's the best solution due to Liquid's lack of regular expression support.

But if we can come up with a simple patch with SVGs, we can decide then which one to merge.

[XhmikosR]

@MartijnCuppens: any luck with the placeholder SVG solution?