Smarty 3 add last modified to image

Question

I am using Smarty and i am also using browsercaching. Whenever a image is modified (with aviary) i would like to show it in the 'scr' attribute so the browser will reload the image whenever it has been modified. I know this can be done in PHP with filemtime() so it adds a Unix timestamp displaying when the file was last changed. But when i try to implement this, i can't get it working.

I currently have this:

<img id="PrvImage" class="js_lightbox" data-id="42" data-image="https://example.com/content/uploads/photos/2017/01/c2d1c2547b0c3feec3f86af7a6484832.jpg" data-context="album" src="https://example.com/content/uploads/photos/2017/01/c2d1c2547b0c3feec3f86af7a6484832.jpg" alt="alt">

what i want is this:

<img id="PrvImage" class="js_lightbox" data-id="42" data-image="https://example.com/content/uploads/photos/2017/01/c2d1c2547b0c3feec3f86af7a6484832.jpg" data-context="album" src="https://example.com/content/uploads/photos/2017/01/c2d1c2547b0c3feec3f86af7a6484832.jpg?=1483848592" alt="alt">

The original code in the .tpl file which generates the html looks like this:

<img id="PrvImage" {if $profile['user_picture_id']} class="js_lightbox" data-id="{$profile['user_picture_id']}" data-image="{$profile['user_picture']}" data-context="album" {/if} src="{$profile['user_picture']}" alt="{$profile['user_fullname']}">

{$profile['user_picture']} is the path to the file. So i added this to the PHP file which is related to the .tpl file:

$filemtime = filemtime($profile['user_picture']);

// assign variables
$smarty->assign('filemtime', $filemtime);

And I modified the .tpl to this:

<img id="PrvImage" {if $profile['user_picture_id']} class="js_lightbox" data-id="{$profile['user_picture_id']}" data-image="{$profile['user_picture']}" data-context="album" {/if} src="{$profile['user_picture']}?={$filemtime}" alt="{$profile['user_fullname']}">

which generates:

<img id="PrvImage" class="js_lightbox" data-id="42" data-image="https://example.com/content/uploads/photos/2017/01/c2d1c2547b0c3feec3f86af7a6484832.jpg" data-context="album" src="https://example.com/content/uploads/photos/2017/01/c2d1c2547b0c3feec3f86af7a6484832.jpg?=" alt="alt">

After debugging I get the following error:

filemtime(): stat failed for https://example.com/content/uploads/photos/2017/01/c2d1c2547b0c3feec3f86af7a6484832.jpg in /var/www/vhosts/qreets.nl/httpdocs/profile.php on line 164

My questions:

What am i doing wrong and how do i make it display the last modified time?

I know Unix Timestamp will be problematic in 2038 so is there a better alternative which has the same effect?

Answer 1

Well, like my other question(s) they get viewed by people ..."and not a single suggestion or attemt to help was made that day". great...

I managed to write a javascript function to break the cache. works for every image. If you don't want a timestamp added to certain images (like google static maps for example), you can add a id so they are excluded. I hope it helps someone.

<script type="text/javascript">  

    function replaceSrc()
    {

        var images = document.getElementsByTagName('img');

        for(var i = 0; i < images.length; i++)
        {
            var dt = new Date();
            var img = images[i];

            if(img.src.length >= 0 & img.id != 'idImageNoTimestamp')
            {
                img.src = img.src + "?" + dt.getTime();
                //javascript:alert(document.lastModified);
            }
        }
    }
    replaceSrc();
      </script>