A problem with the ASCII encoding detection

[toplisek]

I have tried to put at website the following code which is based on programming language HTML and PHP:

HTML URL Encoding Reference

A problem is it will be detected as ASCII encoding
{ %7B %7B
} %7D %7D

https://www.example.com/%7B%7Bthumb%7D%7D

As Chrome browser detects ASCII encoding, it is not the correct display. How to manage transformation withon PHP as I like to detect characters not ASCII encoding?

Even Sitepoint forum generates a warning:
Sorry, we were unable to generate a preview for this web page, because the web server returned an error code of 404. Instead of a preview, only a link will appear in your post:
…/%7B%7Bthumb%7D%7D

Is it possible that Chrom console detects wrong encoding in the case of correct HTML input?

[wake689]

May we see your code please.

[mabismad]

Since a template-tag would get replaced with a value, prior to being output to the browser, the browser should never receive the {{thumb}} characters.

I guess the question becomes, how are you using the template system, and are you doing it correctly?

[toplisek]

I try to insert inside HTML the following src element. It works locally but I see it is added URL inside src element. Maybe this is an issue as it will push 404 error for a thumb image.

Source code: http://docs.averta.net/display/MSJQ/Loading+photos+from+Flickr

$img_title_thumb = "{{title}}";//PHP
$img_alt_thumb = "{{thumb}}";//PHP
$smarty->assign('img_alt_thumb','$img_alt_thumb');//Smarty design framwork

<img class="ms-thumb" src="{$img_src_thumb}" alt="{$img_alt_thumb}"/><!-- HTML -->
<!-- masterslider -->
<div class="master-slider ms-skin-default" id="masterslider">
        <div class="ms-slide" id="slide1">
            <img src="masterslider/blank.gif" data-src="{{image}}" alt="{{title}}"/>          
            <img class="ms-thumb" src="{{thumb}}" alt="{{title}}"/>
            <p   class="ms-layer"
                style="background:rgba(255,255,255,0.5); padding: 20px;"
                data-offset-x = "50"
                data-offset-y = "50"
                data-origin = "bl"
            >
                {{title}}<br>
                {{description}}<br>
                by:{{owner-name}} <br>
                date:{{date-taken}}
            </p>
        </div>
</div>
<!-- end of masterslider -->

[rpkamp]

You also need to include the javascript that is mentioned on that page in order for this to work. Just putting the HTML in the page is not enough.

[toplisek]

It is on the same link. Slider is under license. The whole source can be only purchased.

ar slider = new MasterSlider();
slider.control("arrows", {autohide:false});
slider.control('bullets',{autohide:false,hideUnder:300,align:'bottom',margin:15})
slider.control('thumblist',{fillMode:'fill',autohide:false,width:100,height:66,inset:false,align:'bottom',dir:'h',space:5,margin:5,hideUnder:800})
 
slider.setup("masterslider", {
    width:850,
    height:650,
    space:0,
    speed:20,
    view:'focus',
    layout:'fullwidth',
    instantStartLayers:true
});
var flkr = new MSFlickrV2(slider , {key:'[Your Flickr API Key]' , id:'[Photoset ID or User ID]' , count:15, imgSize:'o'});

[rpkamp]

It looks as though the code will only replace placeholders inside the div with ID masterslider. Any occurrence of {{thumb}} etc outside of that div will not be replaced, so it literally remains {{thumb}}, which indeed is not a valid URL.

[toplisek]

What do you think it should be modified to work URL? If I remove

 <img class="ms-thumb" src="{{thumb}}" alt="{{title}}"/>

it will posted an error.

[rpkamp]

Can you please first explain what your desired end result is? All you’ve posted so far is code with the comment that “it doesn’t work”, but you haven’t stated how you’d expect it to work.

[toplisek]

Code is under license. So, I can not give you by forum as it is purchased application. Above code is one piece of templates as it is Flickr API and slider.

I try to remove a thumb but do not know which part.

When I upload to the server it will be an error inside Web Console and an error 404.
Failed to load resource: the server responded with a status of 404 ()
An error: https://www.example.com/{{thumb}}

This is execution of

src="{{thumb}}"

Another option is to see an example: https://codepen.io/aguadecoco/pen/PwMPRm/
But if you see a ZIP file it will be without update version and

<img class="ms-thumb" src="{{thumb}}" alt="{{title}}"/>

So, I hope I was more clear. Sorry.