Custom Python Dominate Tag Element

Question

Custom Python Dominate Tag Element

3.4k views Asked by George Hernando At 27 April 2019 at 20:29

To support both a JPEG and WEBP compressed image, I'd like to include the following HTML code in a web page:

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

I've been using Python Dominate and it has generally worked well for me. But the Picture and Source tags I think are not supported by Dominate. I could add the HTML as a raw() Dominate tag, but was wondering if there was a way to get Dominate to recognize these tags.

p = picture()
with p:
    source(srcset=image.split('.')[0]+'.webp', type="image/webp")
    source(srcset=image, type="image/jpeg")
    img(src=image, alt=imagealt)

I am seeing this kind of error:

p = picture()
NameError: global name 'picture' is not defined

Original Q&A

There are 2 answers

oivvio On 14 April 2020 at 12:17

You can create a picture class by inheriting from the dominate.tags.html_tag class

from dominate.tags import html_tag

class picture(html_tag):
    pass

This can now be used as any of the predefined tags.

**Laurent LAPORTE** · Accepted Answer · 2019-04-27 20:40:15

Dominate is used to generate HTML(5) documents.

The list of elements are defined in the tags.py file, see the repository in GitHub: https://github.com/Knio/dominate/blob/master/dominate/tags.py.

But, picture is not a standard tag.

You may look at the lxml library which contains a ElementMaker similar to Dominate to build XML tree easily. See the E-Factory.

For instance:

>>> from lxml.builder import E

>>> def CLASS(*args): # class is a reserved word in Python
...     return {"class":' '.join(args)}

>>> html = page = (
...   E.html(       # create an Element called "html"
...     E.head(
...       E.title("This is a sample document")
...     ),
...     E.body(
...       E.h1("Hello!", CLASS("title")),
...       E.p("This is a paragraph with ", E.b("bold"), " text in it!"),
...       E.p("This is another paragraph, with a", "\n      ",
...         E.a("link", href="http://www.python.org"), "."),
...       E.p("Here are some reserved characters: <spam&egg>."),
...       etree.XML("<p>And finally an embedded XHTML fragment.</p>"),
...     )
...   )
... )

>>> print(etree.tostring(page, pretty_print=True))
<html>
  <head>
    <title>This is a sample document</title>
  </head>
  <body>
    <h1 class="title">Hello!</h1>
    <p>This is a paragraph with <b>bold</b> text in it!</p>
    <p>This is another paragraph, with a
      <a href="http://www.python.org">link</a>.</p>
    <p>Here are some reserved characters: &lt;spam&amp;egg&gt;.</p>
    <p>And finally an embedded XHTML fragment.</p>
  </body>
</html>

TechQA.

Custom Python Dominate Tag Element

There are 2 answers

Related Questions in PYTHON

Related Questions in HTML

Related Questions in WEBP

Related Questions in DOMINATE

Popular Questions

Popular Tags

Trending Questions