{tag_filesize} - Anyone know if there's a TreeplCMS Liquid equivalent?

Can anyone tell me if there is a TreeplCMS liquid equivalent for {tag_filesize} (or similar?) when used with the migrated Media Download PDF files? Have tried {{this[‘FileSize’]}} with no luck - is it possible to generate like BC MediaDownloads eg. Screenshot below

tag-filesize

Hi @Craig.
There’s nothing in the current Liquid data for file size.
I know you can do this with javascript - but it’s not very efficient as you basically have to load all files to get their sizes.

But I had a crazy idea that I had to test and surprisingly it’s working pretty well :slight_smile:

Basically I thought if you could pull in a file’s raw text content and count the characters you should be able to get a pretty good idea of it’s file size??? (assuming 1 character = 1 byte, approx.)
So I did this:

{% capture fileStr %}{% include '/images/treehouse-logo.svg' %}{% endcapture%}
({{fileStr | size}} Bytes)<br>
({{fileStr | size | divided_by: 1000}} KB)<br>
({{fileStr | size | divided_by: 1000000}} MB)

and it’s not too far off. But file size various depending on various factors anyway.
Perhaps the maths being used here could be more accurate too?

Disclosure: calculating file size like this is generally not accurate and varies depending on file type.
However, I tested a .jpg, .svg, .pdf and .tff file and all weren’t too far off.

I’d probably round these figures up using the | round filter and just report them as approximate sizes.

But yes, | fileSize would be a good backlog request item :slight_smile: but maybe this’ll help in the meantime.

3 Likes

And so using this with a module item it might look like this:

{% capture fileStr %}{% include this['fileField'] %}{% endcapture%}
  • fileField being the name of your file property in the module setup.
1 Like

Thanks Adam - love your crazy ideas - where would we be without you? I’ll give that a try.

Honestly, where do you even come up with this stuff. So creative. Great workaround.

Hey Adam - I’ve nearly got this but am not getting any file size. This is my code

 <!-- set name -->   
 <span class="name">
      <a href="{{this['File']}}">{{this['Name']}}</a>
</span>

<!-- capture file size -->
<span class="filesize">
   {% capture fileStr %}{% include this['File'] %}{% endcapture%}({{fileStr | size | divided_by: 1000}} KB)

and here is the display on the page https://sauvage.treepl.co/about-taichi
I’m trying to set this up in the media download list layout. Is that possible?

Hi @doodlefish. I’m guessing it’s because you have downloadable=1 applied to the file (and I’m assuming you did this via the admin and not hardcoded in the List layout, so that comes through as part of the file name).

As a quick test to see if it is the downloadable=1 causing the issue, just temporarily uncheck that option for the file and see if the size is then output.

If so, perhaps to overcome this try filtering out the downloadable=1 in your include:

{% include this['File'] | remove: '?downloadable=1' %}

If it doesn’t like the filter here, you may need to create a variable first and then add the variable to the include:

{% assign fileName = this['File'] | remove: '?downloadable=1' %}
{% capture fileStr %}{% include fileName %}{% endcapture %}
1 Like

Just did a test and the ‘remove’ filter works fine in the include so this should work:

{% include this['File'] | remove: '?downloadable=1' %}
1 Like

Thanks Adam - you are a gem!

I see you’ve had success - would you mind sharing your code? - I’m still struggling to get mine to work…

If you want to post your code too @Craig I can take a look.

Sorry Adam - didn’t want to bother you again - getting a result with this - but the same result for each PDF

<p style="font-size: 12px;" class="literature-container">
    <span class="name"><a class="doc-link" href="{{this['File']}}">{{this['Name']}}</a></span> {% capture fileStr %}{% include this['File'] | remove: '?downloadable=1' %}{% endcapture%}({{fileStr | size | divided_by: 1000}} KB)
</p>

Ok, turns out the remove filter within the include isn’t actually working as expected.
@Craig and @doodlefish, you’ll both need to implement my second code sample for this to work correctly, eg:

{% assign fileName = this['File'] | remove: '?downloadable=1' %}
{% capture fileStr %}{% include fileName %}{% endcapture %}

NB: adding the filter to the include seems to then just use the this['file'] ... as a literal string, so the code is just calculating the size of that string and not the actual file character size.

2 Likes

Thanks again Adam - working nicely

@Adam.Wilson Just one questions: How does this work in terms of page speed? Let’s say I have an archive file of 100MByte size or even a couple of them. And I need to list them all on my donwloads page. My assumtion is that all the files need to loaded to capture them in a string in order to filter their size, right?

@TimL you definitely have a point. I’d say there could be a bit of a performance hit, especially for larger files and/or bigger lists.
But it may not be the equivalent of loading all those files on to a page normally, because the include is just loading the file contents as a text file basically, so there isn’t any browser processing required to parse and paint the file.
Not sure how much of a difference this would be but it’d be an interesting test.

Thanks Adam - I can’t get this to work. I’m getting a liquid error
Liquid Error: Invalid character: ‘�’. at line:0, col:3

I think its this line causing the problem
{% capture fileStr %}{% include fileName %}{% endcapture %}

Any idea on how to check for what’s causing this?

Hmmm, it seems like with PDF’s there are some characters that don’t play nicely with Liquid…
I’m trying to find some workarounds but it’s not looking promising.
This did work in my original tests though, so I think it might depend on the actual PDF contents/code.

Will report back any further findings with this…

1 Like

Thanks Adam - If I add a space after the downloadable = 1 I don’t get the error but I also don’t get any sizing. It looks like its a space issue but I can’t see whats causing it.

{% assign fileName = this[‘File’] | remove: '?downloadable=1 ’ %}

I think it’s to do with the character set or encoding of the PDF file code. There are conflicting characters in there, or it’s just too complex to load in like this.

I think for PDFs this method is a bust :frowning:
We’ll have to hope for a Liquid property for file size in the future and for now probably use a Javascript solution.