Re: [tw5] Re: Tiddler Background

[Sylvain Comte]

Ooops i forgot the thread link

https://groups.google.com/forum/m/#!topic/tiddlywiki/YznqeuiZyqQ

:-)

Cheers

Sylvain
@sycom


Le mer. 6 nov. 2019 à 19:33, Michael Wiktowy  a écrit :

>
>
> On Wednesday, November 6, 2019 at 2:14:24 PM UTC-4, Michael Wiktowy wrote:
>>
>>
>> The DataURI macro is not suitable for directly converting SVG tiddlers so
>> I had to use the website:
>> https://websemantics.uk/tools/svg-to-background-image-conversion/
>> and save the resulting (including the quotes!)
>>
>>
>>
> Curses! I just realized that quotes are important. I could have used the
> built-in datauri macro ... I had just forgotten the "" around the macro:
>
>   background-image: url("<>");
>
> It looks like too many quote marks but it works without all the external
> dataURI website conversion. The opacity step is still needed though.
>
> Doh!
>
> /Mike
>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "TiddlyWiki" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/tiddlywiki/ph6RwByi7t0/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> tiddlywiki+unsubscr...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/tiddlywiki/1ef343fb-b3da-4b54-bc7f-39f068689273%40googlegroups.com
> 
> .
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/CAOWAUqGs%3D1bsazKPVcp6W9V7z8fLfFseqxfvB97LMREy7cCC5Q%40mail.gmail.com.

[tw5] Re: Tiddler Background

[Michael Wiktowy]

On Wednesday, November 6, 2019 at 2:14:24 PM UTC-4, Michael Wiktowy wrote:
>
>
> The DataURI macro is not suitable for directly converting SVG tiddlers so 
> I had to use the website: 
> https://websemantics.uk/tools/svg-to-background-image-conversion/
> and save the resulting (including the quotes!)
>
>
>
Curses! I just realized that quotes are important. I could have used the 
built-in datauri macro ... I had just forgotten the "" around the macro:

  background-image: url("<>");

It looks like too many quote marks but it works without all the external 
dataURI website conversion. The opacity step is still needed though.

Doh!

/Mike

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/1ef343fb-b3da-4b54-bc7f-39f068689273%40googlegroups.com.

[tw5] Re: Tiddler Background

[Michael Wiktowy]

On Wednesday, November 6, 2019 at 2:10:36 PM UTC-4, Sycom wrote:
>
> Hi,
>
> Habe a look at this thread. I think the issue can be solved by tweaking
>
> * Xlmns declaration
> * Tiddler type attribute
>
> Cheers
>
> Sylvain
> @sycom
>

I read the discussion about that and I tried fiddling with those to no 
avail. I found a solution 
 
though.

Thanks,
/Mike

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/da99a7a4-6dde-4cda-976e-ed926ca0d754%40googlegroups.com.

[tw5] Re: Tiddler Background

[Michael Wiktowy]

On Wednesday, November 6, 2019 at 1:00:30 PM UTC-4, Michael Wiktowy wrote:
>
>
> In doing some more poking and prodding, it looks like an external svg 
> image works fine ... the issue is with the datauri encoding that is going 
> on that it breaking the format and the browser is just ignoring it. I tried 
> the long-form macro call <$macrocall $name="datauri" title="Example SVG" 
> $output="text/plain"/> but no joy.
>
>
I finally figured it out and thought that I would share the solution here 
... it is a bit painful but works:

The DataURI macro is not suitable for directly converting SVG tiddlers so I 
had to use the website: 
https://websemantics.uk/tools/svg-to-background-image-conversion/
and save the resulting (including the quotes!)


"data:image/svg+xml;charset=utf8,%3Csvg ..."

into a tiddler named 'SVG Background DataURI'.

I then could use the same trick as you use to transclude an SVG into a 
splash screen to transclude it into a stylesheet (admittedly ... I could 
have just cut and paste it directly into the stylesheet but it makes a big 
mess):

background-image: url({{SVG Background DataURI||$:/core/templates/plain-text
-tiddler}});

Unfortunately, background-images have no opacity property so rather than go 
an edit the original SVG and re-datauri-encode it, I had to use this hack:
https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

So the resulting CSS looks like this:

.svg-foreground { 
position: relative; 
z-index: 1; 
} 
 
.svg-background { 
position: relative; 
overflow: hidden; 
} 
.svg-background:after { 
content: ' '; 
display: block; 
position: absolute; 
left: 0; 
top: 0; 
z-index: 0; 
width: 100%; 
height: 100%; 
opacity: 0.1; 
background-image: url({{SVG Background DataURI||$:/core/templates/plain-
text-tiddler}}); 
background-repeat: no-repeat; 
background-position: center; 
} 



-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/6d667aa1-ff9a-4620-bdb7-9ee5d2ae7c55%40googlegroups.com.

[tw5] Re: Tiddler Background

[Michael Wiktowy]

On Wednesday, November 6, 2019 at 11:48:48 AM UTC-4, Michael Wiktowy wrote:
>
> Hello,
>
> I am trying to make a particular tiddler show a background SVG image 
> "watermark". The SVG image is also in the same tiddlywiki.
> I searched through the GG archive and found some good information to get 
> me to this point but I need some further help.
>
> I have the following in my stylesheet tiddler:
>
> [data-tiddler-title="Example Tiddler"] .tc-tiddler-body { 
>   border: 1px solid blue; 
>   background-image: url(<>); 
>   background-repeat: no-repeat; 
>   background-position: center;  
>   position: relative; 
> }
>
> ... and while I see a nice blue border around the body of "Example 
> Tiddler", the background image is not visible, I can't quite figure out why 
> the image is not showing up anywhere. There is no sign of it so I can't 
> even see what might be obscuring it. I can set a background-color which 
> works perfectly but not a background-image.
>
> I am missing something critical here. Can some CSS-guru point me in the 
> right direction?
>

In doing some more poking and prodding, it looks like an external svg image 
works fine ... the issue is with the datauri encoding that is going on that 
it breaking the format and the browser is just ignoring it. I tried the 
long-form macro call <$macrocall $name="datauri" title="Example SVG" 
$output="text/plain"/> but no joy.

/Mike
 

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/f547e352-f78f-44c4-9ea9-0c62cfd7d2d6%40googlegroups.com.