Telegram's instant view: fails to load .webp and .ico images - xpath

Question

I have a problem when trying to create my Telegram's Instant View template, with this error:
Resource fetch failed: https://gdude.de/blog/assets/images/Kaggle-Lyft/task.webp
Resource fetch failed: https://gdude.de/blog/assets/images/telegram.ico
The URLs are valid, I have checked.
These are the only two images that fail. Does IV support *.webp and *.ico images?

Answer 1

According to their manual, Instant View is only actually supporting gif, jpg and png.
with the attribute src and the optional attribute href to make the image clickable. Allowed formats: GIF, JPG, PNG (GIF would be converted into Video type by IV)

Answer 2

I had a similar problem and solved it in the following way.
Note: You need a hosting server to store a PHP script, a free one worked for me (000Webhost).
The diagram below represents the general idea
Instant View code
Note: I'm a beginner at Instant View and XPath, so for now I'm just writing code that works.
# Find unsupported images
$imgs: //img[ends-with(#src, ".webp")]
$imgs+: //img[ends-with(#src, ".ico")]
# Temporary element to create the URLs and make calls to the conversion service
#html_to_dom: "<a>"
$tmp_tag
# For each unsupported image
#map($imgs){
$img: $#
# Build de URL to request the image conversion service
#set_attr(href, "https://my-free-subdom.000webhostapp.com/imgconverter.php?url=", $img/#src): $tmp_tag/a
# Make the request
#load: $tmp_tag/a/#href
# Change the src of the unsupported image to that of the converted image created by the conversion service
#set_attr(src, $#//img/#src): $img
}
#remove: $tmp_tag
PHP script to convert the image
To handle the ICO files I used the IcoFileLoader library, I found it thanks to this question PHP GD .ico handling. I just took the PHP files from the src directory and put them directly on my hosting, so I had to use a simple Autoloader.
// The URL of the image to convert
// If the url of the image is relative, you have
// to build it here, example $url = 'https://gdude.de'.$_GET['url'];
$url = $_GET['url'];
// File name
$file_name = basename($url);
// Directory where the image will be saved
$dir = './';
// File location
$save_file_loc = $dir . $file_name;
// Open file
$fp = fopen($save_file_loc, 'wb');
// Download the image using CURL
$ch = curl_init($url);
// Set options for a cURL transfer
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
// Close file
fclose($fp);
// Load the image
// ICO images need special handling
if(str_ends_with($file_name, '.ico'))
{
require_once('Autoloader.php');
$loader = new IcoFileService;
// You must define the size, I did the tests with a 16X16 favicon.
$im = $loader->extractIcon($file_name, 16, 16);
}
else if(str_ends_with($file_name, '.webp'))
{
$im = imagecreatefromwebp($file_name);
}
// Check if the image was loaded
if(!isset($im))
{
die('Unable to load image!');
}
// Convert it to a png file
imagepng($im, $file_name.'.png');
imagedestroy($im);
// Delte the original image
unlink($file_name);
// "Return" the image in an HTML tag so that Instant View can handle it
echo '<img src="https://my-free-subdom.000webhostapp.com/' . $file_name . '.png">';
Feel free to improve the above code, perhaps add some security, delete old images, use other libraries or PHP functions, accept multiple images in the same request, etc.

Answer 3

I found imageoptim to be helpful for free conversion of (in my case) svg images. Just prepend this url to the svg url and they'll start to load. I chose a resolution of 2560 as it's the max resolution that IV 2.1 supports.
#set_attr(src, "https://img.gs/<your-username>/2560,fit,format=png,quality=high/", ./#src): $body//img[contains(#src, ".svg")]
#set_attr(srcset, "https://img.gs/<your-username>/2560,fit,format=png,quality=high/", ./#srcset): $body//img[contains(#srcset, ".svg")]