Setting a custom place holder image in twig/timber theme

Question

So I am having a twig/timber issue where I have a difficult time getting a placeimage set, here is what I have so far:

{% set defaultimg = site.theme.link ~ '/images/placeimage.png' %}

and then later in my code I have:

<img src="{{ post.thumbnail.src | default(defaultimg) | resize(360, 240)}}" class="card-img-top">

post.thumbnail.src pulls in the images just fine but if no featured Img in attached to the post I want the defaultimg to pull in an image from my custom themes image folder. But currently this is outputting a really erroneous url of:

<img src="https://toolcart.local/wp-contentC:\Users\User\Local Sites\toolcart\app\public\wp-content\themes\toolcart-theme\images/placeimage-360x240-c-default.png" class="card-img-top">

However a {{defaultimg}} outputs the image url correctly.

https://toolcart.local/wp-content/themes/toolcart-theme/images/placeimage.png

I am not sure what to try next?

Homoousian

Answer 1

This is an issue with the way twig/timber defines paths!!! Supper weird way of doing things which adds unnecessary complexity to a project.

That being said, according to their documentation, you could add a filter called relative to the end of your defaultimg variable which converts an absolute URL into a relative one which eventually outputs the correct path to your default image.

So your code would be something like this:

• Defining the path to your default image:

{% set defaultimg = Image(site.theme.link ~ '/images/placeimage.png') | relative %}

NOTE:
The | relative filter will do the trick here.

• Calling it in the image source attribute:

<img src="{{ post.thumbnail.src | default(defaultimg) | resize(360, 240)}}" class="card-img-top">

I just tested the code and it worked fine! Le me know if you could get it to work too!

Ravens

I want to thank-you for taking the time to explain this for me. I do have a followup question: It seems that some times the | resize(360, 240) just totally messes up the url to the default image such as this example here: ImageLink would you happen to have any thoughts on why this would happen? – Homoousian

No problem! Happy to help! Make sure that use the code I provided you with. The code I provided works fine on my end. Here's a screen shot. Both featured image and custom placeholder image work fine! – Ravens