Telegram API Question posted in
A comprehensive official documentation can be found here.

Replace attribute "data-original" to src in telegram instant view – Telegram API

I need to replace “data-original” attribute with “src” using telegram template code.

I’m running an error with a telegram instant view template.

Image source not found: src attribute expected in <img data-plugin-lazyload="" data-plugin-options="{'effect' : 'fadeIn'}" data-original="https://site.com.br/thumbs/chamadas/xbox.jpg" alt="PS5 e Xbox Series X podem atrasar por causa do Coronavírus, estima analista" title="PS5 e Xbox Series X podem atrasar por causa do Coronavírus, estima analista"/>

Original site use an attribute “data-original” in all imagens in place of “src” attribute because of lazy loading script.
I’m trying to extract data-original from tag and replace by src attribute with data-original value.

I guess I can get img nodes using:

//section[has-class("section")]//img

And I can get data-original nodes if I use:

//section[has-class("section")]//img/@data-original

Debug result:

-------
Debug 6 nodes:
  [0]:  data-original="https://site.com.br/thumbs/chamadas/xbox.jpg"
  [1]:  data-original="https://site.com.br/uploads/2020/03/15/63185/consoles-next-gen-aberta.jpg"
  [2]:  data-original="https://site.com.br/thumbs/chamadas/B550chamada.jpg"
  [3]:  data-original="https://site.com.br/thumbs/chamadas/nvidia-rtx-ampere-chamada.jpg"
  [4]:  data-original="https://site.com.br/thumbs/chamadas/amd-zen-3-zen-4-roadmap-0.jpg"
  [5]:  data-original="https://site.com.br/thumbs/chamadas/xbox-srs-x-chamada1.jpg"

I tried a lot of combinations without success like:

@replace("data-original", "src"): $body//img/@data-original

And the closest try is:

@replace("data-original", "src"): //section[has-class("section")][.//img]

But in this last code it remove all img tags and all text is putted in one line <p> only so all article have only one paragraph line with all content and no images.

Theorically “simply” (not simple) replacing “data-original” attribute to “src” would do template works.

References may help:

#1 Instant View Reference

#2 Instant View Reference

#3 Instant View Docs

#4 Medium Instant View Template

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've made it using following snnipet:

    # first of all, site use an attribute object to renderize lazy loaded images. Let convert them to img src attrbute so we cna ride of src not set error
<abc>: //div[has-class("news__text")]//img # Find all images in content div class and convert it to <abc>

@set_attr(src, ./@data-original) # Set src attribute from data-original

$imagetag # var to current <abc>

<img>: //div[has-class("news__text")]//abc # Find abc and convert it to <img> again with seted src

    All based on response of @haacki47 in: https://stackoverflow.com/questions/54786100/extract-create-and-append-using-xpath-and-telegram-instant-view


  2. 0

    Consider using below code to resolve the problem:

    @set_attr(src, @data-original): //div[has-class("section")]//img

    If you have srcset attribute in your img you can use below code also, Telegram will use high resolution image automatically:

    # Use Instant View version 2.1
~version: "2.1"

# Disable Lazyload
@set_attrs(src, @data-original, srcset, @data-srcset): //div[has-class("entry-content")]//img
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search