Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

187
Views
Setting a custom place holder image in twig/timber theme

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?

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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!

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!