skip to Main Content

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?

3

Answers


  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)

    Login or Signup to reply.
  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

    enter image description here

    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.

    Login or Signup to reply.
  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")]
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search