October: |theme filter will not pull content and images

[it-werxdotca]

• OctoberCMS Build: 465
• PHP Version:
  7.2
• Database Engine:
  Mariadb (mysql)
• Plugins Installed:

Description:

Attempting to use the |theme filter to pull images into dot.htm

Filter used: style="background-image: url('{{ 'assets/media/various/bg-pattern-inverse.png'|theme }}');"

The filter will not find the theme directory when you want to put images into the theme...

Steps To Reproduce:

Use the |theme filter to pull images into dot.htm

[bennothommo]

@it-werxdotca Just checking, you do have a file located at themes/<active theme>/assets/media/various/bg-pattern-inverse.png?

[it-werxdotca]

Yes. It is not an uncommon problem. I was peeking at another theme from the store and they had to directly link images... There are issues on the forum regarding this dating back four years... So, no help there either.

[mjauvin]

@it-werxdotca I'm using this exact technique in my CMS pages and it's working fine.

I think you have an extra single quote in there... try this:

{% set url = 'assets/media/various/bg-pattern-inverse.png'|theme %}
style="background-image: url( {{ url }} );"

[it-werxdotca]

Ah... I am not using it the way you described. I applied it the way the documentation suggests.

style="background-image: url('{{ 'assets/media/various/bg-pattern-inverse.png'|theme }}');"

[mjauvin]

Yes, but you have extra quoting that's breaking it. Try this:

style="background-image: url( {{ 'assets/media/various/bg-pattern-inverse.png'|theme }} );"

[it-werxdotca]

<div class="bg-white bg-pattern" style="background-image: url( {{ 'assets/media/various/bg-pattern-inverse.png' | theme }} );">

This does not work.

It should work as documentation dictates. It works fine when loading scripts. JavaScript or CSS.

Again, it has been on the forum for four years. Other themes I have looked at link directly to media. This is not an uncommon problem.

[Samuell1]

Are you sure you have images in your assets/media/ folder in your theme? And does it returns anything to your code or just is empty? @it-werxdotca

[mjauvin]

This is definitely working for any type of asset, there must be something you are doing wrong or I am missing information.

[mjauvin]

Also not sure what documentation you are referring to as what I wrote is the proper documented usage.

[it-werxdotca]

100% positive. When I link directly it works fine.

Again. This has been an issue for four years... Nothing new.

[mjauvin]

Can you link the outstanding issues you are referring to? I never had problems with this, ever.

[LukeTowers]

@it-werxdotca please paste the exact output of style="background-image: url('{{ 'assets/media/various/bg-pattern-inverse.png'|theme }}');"

[it-werxdotca]

style="background-image: url('{{ 'assets/media/various/bg-pattern-inverse.png'|theme }}');"

Again... does NOT work. Again... there are around 83 issues involving this on the forum over the past four years... This IS an issue.

None of the theme on the store use this when using images either. They use work arounds or link directly to the media.... Again. I am following the documentation. I can go through the code and try to fix it.

It is strange that all other calls to source eg: JavaScript, CSS work fine. It seems that it only allows certain mime types for what ever reason.

[mjauvin]

If you are not providing more information, we will need to close the issue. All of us are using this without issue, this is a BASIC feature of OctoberCMS... We are trying to help but you provide no helpful information to help us identify where the problem is on your end.

[bennothommo]

@it-werxdotca When you say it "doesn't work", what do you mean by it doesn't work? Is an error screen shown? Does it appear incorrect in the generated HTML for that page?

When @LukeTowers asked for the exact output of your line of code, the fact that you repeated it back to him, are you saying that the final HTML that is output when you view the page has the Twig variable still within it, unparsed?

With respect, I can definitely verify that several themes use this Twig filter for images, for example our Vanilla theme uses them here, here and here.

[mjauvin]

I checked other free themes, and they all use the theme filter:

https://github.com/ArtCodeStudio/viola-theme/blob/master/pages/work-progress.htm
https://github.com/ArtCodeStudio/viola-theme/blob/master/partials/about.htm

https://github.com/vojtasvoboda/oc-newage-theme/blob/master/partials/sections/download.htm

https://github.com/responsiv/flat-theme/blob/master/pages/home.htm
https://github.com/responsiv/flat-theme/blob/master/pages/blog/blog.htm
https://github.com/responsiv/flat-theme/blob/master/pages/portfolio/portfolio.htm

...

[it-werxdotca]

Well, not sure how much more information I can give.

The ones I have checked out do not use it. There are 83 issues over the past four years on the forum regarding the same thing. All I see are work arounds on the forum. I do see the code I read the documentation the files work when you use a direct link. They do not when I use the |theme filter...

If you do not want to fix it. Fine. All good. I will directly link to the images.

[bennothommo]

@it-werxdotca I'm simply trying to find out what doesn't work. It doesn't load the image? It has an incorrect URL? Help us, to help you.

[Samuell1]

@it-werxdotca I tested it and it correctly generates url.

There are 83 issues over the past four years on the forum regarding the same thing

Can you point us to that 83 issues?

[LukeTowers]

@it-werxdotca since you are unwilling to provide the information that we have explicitly asked for multiple times in this thread in order to provide completely free support to you, we are unwilling to spend any more of our own time helping you solve your problems.

If you want our help, then you need to put in the basic work to provide the information we asked you for. Otherwise, we're going to treat this as PEBKAC and move on. Feel free to comment with the information we asked for and I'll reopen the issue and we can move forward.

Once again, what is the generated HTML that results from you using style="background-image: url('{{ 'assets/media/various/bg-pattern-inverse.png'|theme }}');". The final end result of what you get. What you actually mean when you say "doesn't work".

We're not mind readers, you are not paying for our time, so I suggest you respect those facts and make it easy for us to help you solve your problems.

[it-werxdotca]

I have figured out what the problem is... When using the |theme filter you CAN NOT go further than two directories deep:
{{'assets/dir/file.png'|theme}}

What I was doing was going the extra directory.
{{'assets/dir1/dir2/file.png'|theme}}

This is STILL a bug. I do not know why it is written this way but hey...

Also, this is the LAST time I intersact with the october CMS team. The experience was horrible. If you guys got your shit together and where not such douche bags to deal with... You would have a great product.

Good luck. You'll need it.

[mjauvin]

Personally, I am accessing 3 levels deep as in:

"assets/images/home/portrait.jpg" | theme

[mjauvin]

And by the way, we kept asking for more details to actually help you but you just wouldn't provide any... other than "it's not working"

I'm sorry but this is not how it works.

Good luck finding a community that will magically guess and fix your stuff!

[LukeTowers]

I just tested {{ 'assets/images/break/break/break/logo.png' | theme }} and it worked fine. Your description further confirms my belief that this is PEBKAC and you were using the wrong path to your asset and now you're too embarrassed to admit it and are blaming us.

Feel free to prove me wrong, and if this is actually a reproducible bug in October I'd be more than happy to fix it.

[bennothommo]

@it-werxdotca

Good luck. You'll need it.

And to you too, buddy.