Regex to insert images automatically

Pippo53s03 · 05-21-2020, 12:21 PM

Hallo, my friends.
I would like a regex to insert images automatically in my epub.
I mean:
having "Fig. 1.1" and similiar "Fig. 1.2" (and so on until "Fig. 99.99")
I would like to "translate" in:
"<a href="../Images/Fig 1.1.jpg">Fig. 1.1</a> "
and so on....
could you help me?
Thanks in advance!

DNSB · 05-21-2020, 01:24 PM

Quote:

Originally Posted by Pippo53s03

Hallo, my friends.
I would like a regex to insert images automatically in my epub.
I mean:
having "Fig. 1.1" and similiar "Fig. 1.2" (and so on until "Fig. 99.99")
I would like to "translate" in:
"<a href="../Images/Fig 1.1.jpg">Fig. 1.1</a> "
and so on....
could you help me?

Perhaps something such as:

Code:

Find:      <b>Fig\. (.*?)</b>

Replace: <b><img alt="Fig. \1" class="whatever" src="../Images/Fig \1.jpg"/>Fig. \1</b>

Before:

Code:

  <p><b>Fig. 1.1</b></p>
  <p><b>Fig. 1.2</b></p>
  <p><b>Fig. 2.1</b></p>
  <p><b>Fig. 2.4</b></p>
  <p><b>Fig. 49.3</b></p>
  <p><b>Fig. 99.72</b></p>

After:

Code:

  <p><b><img alt="Fig. 1.1" class="whatever" src="../Images/Fig 1.1.jpg"/>Fig. 1.1</b> </p>
  <p><b><img alt="Fig. 1.2" class="whatever" src="../Images/Fig 1.2.jpg"/>Fig. 1.2</b> </p>
  <p><b><img alt="Fig. 2.1" class="whatever" src="../Images/Fig 2.1.jpg"/>Fig. 2.1</b> </p>
  <p><b><img alt="Fig. 2.4" class="whatever" src="../Images/Fig 2.4.jpg"/>Fig. 2.4</b> </p>
  <p><b><img alt="Fig. 49.3" class="whatever" src="../Images/Fig 49.3.jpg"/>Fig. 49.3</b> </p>
  <p><b><img alt="Fig. 99.72" class="whatever" src="../Images/Fig 99.72.jpg"/>Fig. 99.72</b> </p>

Tex2002ans · 05-21-2020, 11:12 PM

Also, just to warn: spaces in filenames aren't a good idea.

So if you adjust DNSB's to:

Replace: <img alt="Fig. \1" class="whatever" src="../Images/Fig\1.jpg"/>

that would get you:

Code:

<img alt="Fig. 2.4" class="whatever" src="../Images/Fig2.4.jpg"/>

instead.

I would then recommend using Sigil's mass renaming to fix the filenames. Follow steps 3 and 4 in this little tutorial I wrote back in 2019.

Pippo53s03 · 05-23-2020, 01:55 PM

after applying also suggestions about blanks in file names, I tried but the result is not what I'm trying to do.
I need to translate code as:
<div>
<p>vedi Fig._3.1 e Fig._10.6), allora si può.
</p>
</div>

into

<div>vedi Fig._3.1)
<p>
<img alt="Fig_3.1" src="../Images/Fig_3.1.jpg" style="font-size: 1em;"/>e Fig._10.6),
<img alt="Fig_10.6" src="../Images/Fig_10.6.jpg" style="font-size: 1em;"/>allora si può.
</p>
</div>

This is an extract (complete) from the original epub:
https://mega.nz/file/MP5WSSzZ#VL6BKb...Qf8WUsz3yfcB0U

Tex2002ans · 05-23-2020, 02:59 PM

Oh, I see. I was reading DNSB's post and thinking you wanted to insert an actual image.

Now that I'm taking a closer look at Post #1:

Search: Fig\._([\d\.]+)
Replace: <a href="../Images/Fig_\1.jpg">Fig._\1</a> 

That will get you what you "want".

BUT!!! Linking directly to an image file won't work on an actual ereader (it doesn't even work in ADE).

You will want to point to the figure's location within the book, for example:

Chapter01.xhtml:

Code:

<p class="figuretitle">Figure 3.1</p>

<div class="image">
	<img alt="Figure 3.1" id="Fig3.1" src="../Images/Fig_3.1.jpg"/>
</div>

Chapter30.xhtml:

Code:

<p>As you can see in <a href="../Text/Chapter01.xhtml#Fig3.1">Fig 3.1</a>, the cat is brown.</p>

Turtle91 · 05-23-2020, 03:01 PM

Edit - DOH - Ninja'd again...

Try -

Code:

search:
<div>\s*<p>(.*?) Fig._(.*?) e Fig._(.*?)\), (.*?).</p>\s*</div>

replace: 
<div class="images">\n<p>\1 Fig._\2)<img alt="Fig_\1" src="../Images/Fig_\1.jpg" /></p>\n<p>e Fig._\3),<img alt="Fig_\3" src="../Images/Fig_\3.jpg" />\4.</p>\n</div>

That will result in the following:

Code:

<div class="images">
<p>vedi Fig._3.1)<img alt="Fig_3.1" src="../Images/Fig_3.1.jpg"/></p>
<p>e Fig._10.6),<img alt="Fig_10.6" src="../Images/Fig_10.6.jpg"/>allora si può.</p>
</div>

That is not exactly what you asked for - it has some improvements. You can obviously modify it as you wish.

You should avoid inline styling whenever possible (don't put 'style="..." ' in your tags). Instead, put the styling in a CSS file and refer to it with class names like:

CSS:

Code:

.images p   {text-align:center; font-size:1em; margin:0}
.images img {display:block; margin:0 auto; width:90%; max-width:600px}

This makes it MUCH easier to review/read and you can edit with a change at a single location. The max-width should be set based on your image sizes - this keeps your small images from being over-blown and fuzzy on larger displays.

Pippo53s03 · 05-24-2020, 06:12 AM

Quote:

Originally Posted by Tex2002ans

Oh, I see......

Sorry, I'm really a donkey newbie and maybe I was non clear...
I want to insert directly the image, not the link to it and regex I'm looking for is one to translate:

Code:

Fig._3.1&nbsp;

into

Code:

Fig._3.1&nbsp;<img alt="Fig_3.1" src="../Images/Fig_3.1.jpg"/>

or

Code:

Fig._10.6&nbsp;

into

Code:

Fig._10.6&nbsp;<img alt="Fig_10.6" src="../Images/Fig_10.6.jpg"/>

Turtle91 · 05-24-2020, 12:31 PM

The <img alt="" src="..."/> tag IS the actual image...it is not a link. A link tag looks like <a href="">

Try it in Sigil and you will see the image magically appear in the Preview window.

Turtle91 · 05-24-2020, 12:43 PM

Quote:

Originally Posted by Pippo53s03

Sorry, I'm really a donkey newbie and maybe I was non clear...
I want to insert directly the image, not the link to it and regex I'm looking for is one to translate:

Code:

Fig._3.1&nbsp;

into

Code:

Fig._3.1&nbsp;<img alt="Fig_3.1" src="../Images/Fig_3.1.jpg"/>

or

Code:

Fig._10.6&nbsp;

into

Code:

Fig._10.6&nbsp;<img alt="Fig_10.6" src="../Images/Fig_10.6.jpg"/>

That is a little different than what you had originally.

Try:

Code:

search: 
Fig._(.*?)&nbsp; 

replace:
Fig._\1<img alt="Fig_\1" src="../Images/Fig_\1.jpg"/>

Also, I would highly recommend taking a look at the basic eProduction tutorial on our wiki...it will help you alot if you choose to make ebooks. There is also some basic regex examples here. And also a good reference for HTML and CSS on W3Schools website.

Cheers!

Pippo53s03 · 05-25-2020, 10:11 AM

I tried this:

Quote:

search:
Fig._[0-9]+[0-9]+.[0-9]+[0-9]+

replace:
Fig._[0-9]+[0-9]+.[0-9]+[0-9]+<img src="../Images/Fig._[0-9]+[0-9]+.[0-9]+[0-9]+.jpg"/>

and I found correctly chars:

Quote:

Fig._10.41

but it is translated into:

Quote:

Fig._[0-9]+[0-9]+.[0-9]+[0-9]+<img src="../Images/Fig._[0-9]+[0-9]+.[0-9]+[0-9]+.jpg"/>

maybe some special char in replace makes the regular expression not executable?
Please, help!

theducks · 05-25-2020, 11:32 AM

you do NOT use the search term in the replace.
You use what was captured inside the ( ) by using \1 for the first

No time for further but DO search MR for REGEX tutorials (

These are how I learned)

Turtle91 · 05-25-2020, 12:06 PM

Quote:

Originally Posted by Pippo53s03

I tried this:

and I found correctly chars:

but it is translated into:

maybe some special char in replace makes the regular expression not executable?
Please, help!

Yes....try the example I gave you...

Pippo53s03 · 05-29-2020, 12:01 AM

Quote:

Originally Posted by Turtle91

Yes....try the example I gave you...

Good answer, I hadn't seen it

Quote:

search:
Fig._(.*?) 
replace:
Fig._\1<img alt="Fig_\1" src="../Images/Fig_\1.jpg"/>

i tried and it works.

05-21-2020, 11:12 PM	#3
Tex2002ans Wizard Posts: 2,306 Karma: 13057279 Join Date: Jul 2012 Device: Kobo Forma, Nook	Also, just to warn: spaces in filenames aren't a good idea. So if you adjust DNSB's to: Replace: <img alt="Fig. \1" class="whatever" src="../Images/Fig\1.jpg"/> that would get you: Code: <img alt="Fig. 2.4" class="whatever" src="../Images/Fig2.4.jpg"/> instead. I would then recommend using Sigil's mass renaming to fix the filenames. Follow steps 3 and 4 in this little tutorial I wrote back in 2019.

05-23-2020, 02:59 PM	#5
Tex2002ans Wizard Posts: 2,306 Karma: 13057279 Join Date: Jul 2012 Device: Kobo Forma, Nook	Oh, I see. I was reading DNSB's post and thinking you wanted to insert an actual image. Now that I'm taking a closer look at Post #1: Search: Fig\._([\d\.]+) Replace: <a href="../Images/Fig_\1.jpg">Fig._\1</a>  That will get you what you "want". BUT!!! Linking directly to an image file won't work on an actual ereader (it doesn't even work in ADE). You will want to point to the figure's location within the book, for example: Chapter01.xhtml: Code: <p class="figuretitle">Figure 3.1</p> <div class="image"> <img alt="Figure 3.1" id="Fig3.1" src="../Images/Fig_3.1.jpg"/> </div> Chapter30.xhtml: Code: <p>As you can see in <a href="../Text/Chapter01.xhtml#Fig3.1">Fig 3.1</a>, the cat is brown.</p> Last edited by Tex2002ans; 05-23-2020 at 03:02 PM.

05-23-2020, 03:01 PM	#6
Turtle91 A Hairy Wizard Posts: 3,312 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Edit - DOH - Ninja'd again... Try - Code: search: <div>\s<p>(.?) Fig._(.?) e Fig._(.?)\), (.?).</p>\s</div> replace: <div class="images">\n<p>\1 Fig._\2)<img alt="Fig_\1" src="../Images/Fig_\1.jpg" /></p>\n<p>e Fig._\3),<img alt="Fig_\3" src="../Images/Fig_\3.jpg" />\4.</p>\n</div> That will result in the following: Code: <div class="images"> <p>vedi Fig._3.1)<img alt="Fig_3.1" src="../Images/Fig_3.1.jpg"/></p> <p>e Fig._10.6),<img alt="Fig_10.6" src="../Images/Fig_10.6.jpg"/>allora si può.</p> </div> That is not exactly what you asked for - it has some improvements. You can obviously modify it as you wish. You should avoid inline styling whenever possible (don't put 'style="..." ' in your tags). Instead, put the styling in a CSS file and refer to it with class names like: CSS: Code: .images p {text-align:center; font-size:1em; margin:0} .images img {display:block; margin:0 auto; width:90%; max-width:600px} This makes it MUCH easier to review/read and you can edit with a change at a single location. The max-width should be set based on your image sizes - this keeps your small images from being over-blown and fuzzy on larger displays.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to insert automatically valid id's in ToC headings?	chaot	Editor	18	02-01-2017 06:55 AM
How can insert a citation automatically?	calven	Calibre	3	01-21-2016 05:30 AM
How can insert a footnote automatically?	calven	Editor	0	12-29-2015 07:52 PM
Regex to insert word at beginning of a line	macnab69	Library Management	1	05-20-2013 02:56 AM
Insert new line with regex	deckoff	Sigil	6	08-08-2010 11:24 AM

05-21-2020, 12:21 PM	#1
Pippo53s03 Member Posts: 19 Karma: 10 Join Date: Apr 2015 Device: Kobo Aura H2O 2ed	Regex to insert images automatically Hallo, my friends. I would like a regex to insert images automatically in my epub. I mean: having "Fig. 1.1" and similiar "Fig. 1.2" (and so on until "Fig. 99.99") I would like to "translate" in: "<a href="../Images/Fig 1.1.jpg">Fig. 1.1</a> " and so on.... could you help me? Thanks in advance!

05-23-2020, 01:55 PM	#4
Pippo53s03 Member Posts: 19 Karma: 10 Join Date: Apr 2015 Device: Kobo Aura H2O 2ed	after applying also suggestions about blanks in file names, I tried but the result is not what I'm trying to do. I need to translate code as: <div> <p>vedi Fig._3.1 e Fig._10.6), allora si può. </p> </div> into <div>vedi Fig._3.1) <p> <img alt="Fig_3.1" src="../Images/Fig_3.1.jpg" style="font-size: 1em;"/>e Fig._10.6), <img alt="Fig_10.6" src="../Images/Fig_10.6.jpg" style="font-size: 1em;"/>allora si può. </p> </div> This is an extract (complete) from the original epub: https://mega.nz/file/MP5WSSzZ#VL6BKb...Qf8WUsz3yfcB0U

05-24-2020, 12:31 PM	#8
Turtle91 A Hairy Wizard Posts: 3,312 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	The <img alt="" src="..."/> tag IS the actual image...it is not a link. A link tag looks like <a href=""> Try it in Sigil and you will see the image magically appear in the Preview window.

05-25-2020, 11:32 AM	#11
theducks Well trained by Cats Posts: 30,908 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	you do NOT use the search term in the replace. You use what was captured inside the ( ) by using \1 for the first No time for further but DO search MR for REGEX tutorials ( These are how I learned)

Advert

Advert