I have a .rst document which was imported from Wordpress using wp2rst (which uses pandoc).
During the import, all my images were translated into substituted.. image:: as such :
This is some text |myimage| followed by some more text
.. |myimage| image:: https://myiage.png
:class:alignnone size-full wp-image-1864
:width: 1075px
:height: 135px
My images originally have captions. So I tried something like this :
This is some text |myimage| followed by some more text
.. |myimage| figure:: https://myimage.png
:class:alignnone size-full wp-image-1864
:width: 1075px
:height: 135px
This is my figure's caption
I get the following error when running Sphinx :
WARNING: Substitution definition "myimage" empty or invalid.
Working with figures in a more traditional fashion works well, but it would require me to refashion the entirety of
This is some text
.. figure:: https://myimage.png
:class:alignnone size-full wp-image-1864
:width: 1075px
:height: 135px
This is my figure's caption
followed by some more text
Is there a way to create substitutes for .. figure:: the same way as .. image::?
Related
So I'm writing reStructuredText which creates an HTML page and a PDF at the same time. I'd like to add alternative text for the image in HTML, but when I add it in my code the image doesn't work in the PDF!
My code without alternative text (which work in both case):
.. image:: https://********.jpg
My code that doesn't work in PDF:
|alternative en plusieurs mots|
.. |alternative en plusieurs mots| image:: https://*********.jpg
From the documentation of the docutils image directive, the following should work:
.. image:: https://********.jpg
:alt: alternative en plusieurs mots
How do we capture the image that has the following code ? since it is different from general format where i only capture the src and img.
<div class="avatar" style="background-image:
url(customavatars/545/5453285_1410924046.jpg);background-size: cover;background-repeat: no-repeat;background-position: center;width: 120px;height: 120px;border-radius: 70px;margin: 10px 0 10px 10px;" onmouseover="showUserInfoBox('userinfo234340519')" onmouseout="clearShowUserInfoTimer()"></div>
Original web site
Visit https://mobile.uwants.com/viewthread.php?tid=19780494&extra=page%3D1
The image : Visit https://imgur.com/Gbckna1
Thanks
Since the image you want to get is defined as a css background, you'll need to extract the contents of the style attribute, and parse the css you get from that.
You can try to do this yourself, but it would probably be easier to use an existing library, such as cssutils or tinycss2.
You can use re_first()
response.xpath('//div[#class="avatar"]/#style').re_first(r'url\([^\)]+')
Seems like restructured text markup is very limited when it comes to image options:
The following options are recognized:
alt : text
height : length
width : length or percentage of the current line width
scale : integer percentage (the "%" symbol is optional)
align : "top", "middle", "bottom", "left", "center", or "right"
target : text (URI or reference name)
Is it possible to set some custom attributes like title via reStructuredText markup?
e.g.
.. image:: foobar.jpg
:title: mouse over text, hi!
Would output:
<img src="foobar.jpg" title="mouse over text, hi!"></img>
You can use figure
.. figure:: picture.png
This is the caption of the figure.
According to docutils, the following options are recognized: alt, height, width, scale, align, target, class, and name. No title.
Options include rewriting in the client with JavaScript or work with the docutils team to make a feature request and implement it.
Alternatively you could simply use the "raw" directive and directly use your ideal target html
.. raw:: html
<img src="foobar.jpg" title="mouse over text, hi!"></img>
For some reason the titles of my featured images are being appended to their links. I can't figure out why it's happening.. any ideas?
"Test image" is the text that appears next to the image.
<a href="http://localhost/mysite/test/" class="post-thumbnail" aria-hidden="true">
<img src="http://localhost/mysite/wp-content/uploads/ds/2017/12/sample2-1080xauto-c-default.jpg" class="featured-image tease-featured-image " alt="<span itemprop=" name"="">Test Image" />
</a>
And it's the post title, not the image title that's displaying. Removing the image title doesn't do anything. Changing the title of the post changes the text.
Why would you have a span inside your alt?
The alt is for people who can't see images -
Normally the rules for alts is :
No special characters. This includes UTF-8 characters such as unencoded curly quotes, as well as HTML Character Entities.
No HTML.
No more than 125 characters.
Just identify the picture. No need to refer to it (“This is a picture
of…”).
Read more at: https://html.com/attributes/img-alt/
Also - the span created is not closed properly.
I would like to format an internal link - defined with :ref: - in my documentation using CSS classes.
My problem is that I cannot convert :ref:`Link <internal_link> to the following bit of HTML Link
I've tried defining a new role but that was unsuccessful too.
.. role:: ref
:class: btn btn-sm btn-primary
:ref:`Link <internal_link>`
My current solution is to use raw html and render it as such, but I cannot link the RST files but have to point to the HTML files instead (which doesn't work for PDF output).
.. role:: raw-html(raw)
:format: html
:raw-html:`Link`
Does anyone know how to add custom CSS classes to :ref:?
I'm not sure about getting the class in the link directly. But you should be able to get it in the parent with:
.. cssclass:: btn-primary
:ref:`link`
then adjust the css selector to use:
.btn-primary a