[TW5] What is the exact syntax for an imported image in my custom stylesheet?

[peter....@hotmail.de]

Hi folks

Probably a simple question:

I want to add a background image to my tiddlers and it should be done with a stylesheet. The idea is to have some kind of a ribbon behind the title and stuff. I imported an jpeg which is now a tiddler named "Background.pattern-2.jpg". The plan is to size and repeat it after embedding it to my stylesheet. So I wrote this 

body.tc-body.tc-tiddler-frame{
 background:{{[img[Background.pattern-2.jpg]]}}
 }

I am pretty shure the syntax is wrong, but I tried different ones without success. 

[Mat]

To set a background for the whole tiddler (not just the "colum" with text inside the tiddler) use the tc-tagged method.

Or check out the data Uri macro that uses the css background property.

Is that sufficient or do you insist on doing it manually via stylesheet?

<:-)

[peter....@hotmail.de]

Ok my call for the picture was completely wrong.

Thanks for your links. I found the dataURI page before but wasn't shure its the right thing. Now I have the following line in my stylesheet:

background-image: url(<<datauri "Background-pattern-2.jpg">>);

It works, but only if the tiddler type is not css. Isn't this the opposite of the last sentence of the example tiddler? I might be wrong. For me as a NonCoder the documentation is often hard to understand.

Is there a syntax for a css type? What exactly are the differences between the one above and this one:

background: url(<$macrocall $name="datauri" title="Motovun Jack.jpg" $output="text/plain"/>);

Nice you mention the tc-tagged method. This is my final goal. I have three ribbons which should be triggered by a tag. Unfortunately I didn't get step 1 work in a pleasent way.

Is there a way to add an extra html element which works as a container for the background image?

... I will do a short sketch

,

This will be the looking I have in mind. This color should appear if given the tag "Ribbon_2". Then I want to add 1-2 more templates for other colors.

[peter....@hotmail.de]

I am near desperation.

The last days I crawled through so many examples to find a solution. I looked 1000 times on the documentation of DataURI, Macros and everything what could help me in my misery. But I don't find the answer.

Fro my point of view at least one of the code-snipplets above should do anything. But no. Ok, not completely. If I set  the tiddler Type to TiddlyWiki 5 (text/vnd.tiddlywiki) my background pictures are shown. But - I don't know why - everything is a mess.

I love the de-facto completely free arrangements in TiddlyWiki, but I am sad it wouldn't be for me. 

Please Help

[Mat]

Put this in a tiddler that is tagged $:/tags/Stylesheet

.tc-tagged-bbb .tc-tiddler-title:after {

width:95%;

height:6em;

content:"";

position:absolute;

margin-top:-2em;

margin-left:-2em;

background-color:rgba(1,1,1,.3);

border:1px green solid;

}

To have it apply, tag a(nother) tiddler with the "tc-tagged" value, i.e "bbb"

The ":after" that you see is called a css pseudo element if you want to look it up.

At least it's something to experiment with.

<:-)

[Hegart Dmishiv]

Hi Mat,

I don't think you're quite getting the basic problem that Peter is talking about here. While we can reference an external image in CSS by the image URL, how do we reference an internal image, one which has been imported into TW as a tiddler type image/png or whatever. Sorry Peter, I don't know the answer to your question either, but am keen to learn what the answer is.

Hegart.

[Mat]

I don't think you're quite getting the basic problem that Peter is talking about here. While we can reference an external image in CSS by the image URL, how do we reference an internal image, one which has been imported into TW as a tiddler type image/png or whatever.

The thing is, there are so many alternatives - but my impression is that they all bring with them different pros and cons depending on the use case. Not saying that I know all the alternatives tho. 

anyway, threw this togehter just now but  I'm tired so it's not polished.  It's nto difficult but it is complex so easier to make it than explain it, so you can study it yourselves. I left the SideEditor installed (and even open) so you can easily manipulate the stylesheet to see the results.

<:-)

[Devin Weaver]

Two things to note here:

While we can reference an external image in CSS by the image URL, how do we reference an internal image

 You don't the fact is imported images are not referable via a URI and so can not be referenced in a CSS definition. Imported images are data. And this is why they can be transcluded into a CSS definition but again that means nothing in CSS because it is just base64 gibberish. It isn't till it is process through the datauri macro does it get decorated into a data URI specification which is allowed in CSS. (Almost like an inline script).

[img […]] will not work because unlike transculsion this is simply the same as the HTML <img src="…"/> with the added feature of converting an internal image tiddler into a data URI like you would have manually described in the paragraph above. And obviously that would be just silly in css:

.foobar {
  background-image: url(<img src="…"/>);
}

Lastly, a tiddler with the type text/css will not be processed through the widget / parsing tree and instead be placed into the HTML as is. That is why the above <<datauri "…">> only works if the tiddler is of the type text/vnd.tiddlywiki so that it does get parsed.

[peter....@hotmail.de]

Thanks Hegart for specifying my problems. I sometimes have trouble with making a detailed call.

@Devin 

I was hoping there would be an alternate to  changing the type of the tiddler to text/vnd.tiddlywiki because that messes up some stuff. In the example for dataURI Example there is the macro $output="text/plain". It would be nice to mark up the necessary part of my stylesheet so it will render as vnd.text. The biggest confusion for me was the sentence in the same Tiddler:

 If the example was in a CSS tiddler, you could simply write:

background: url(<<datauri "Motovun Jack.jpg">>);

For me, or let me say from the eyes of a non coder, that does simply allows me to copy this line in my stylesheet.

TiddlyWiki is quick and easy. And I love the idea of one single file which included everything. I have only limited experience in writing and understanding code. As soon as it comes to whirled languages I will see my restrictions in understanding. But I am more one type of graphical person which is the reason I try to alternate the looking so badly. In the meantime I got a little peek into the matrix and I think I now understand why it is not simple possible to add an imported picture to the stylesheet. But shouldn't it be possibe? Guys don't get me wrong, the work everyone did for tiddlywiki is amazing. Probably I just want to make a suggestion coming from the minor side of a simple user.

 @Mat

Thanks for your forpeter tiddler ^^

Correct me if I'm wrong. You simply avoid my problem by adding a new html-element to the tiddlers (if needed). You gave me a huge playground. If thats work for my ideas that would be great. Again thank you!

I will post my experience and hopefully succes

[Devin Weaver]

On Friday, April 29, 2016 at 6:24:56 AM UTC-4, peter....@hotmail.de wrote:

I was hoping there would be an alternate to  changing the type of the tiddler to text/vnd.tiddlywiki because that messes up some stuff.

Like what specifically? Rendering? Here is what I do in my TiddlyWikis:

If the style sheet has no macros then I use text/css if it does use macros (like <<colour>> or <<datauri>>) then I use type text/vnd.tiddlywiki and wrap the whole tiddler in a <pre> tag so it renders nicely. I could also use the three back ticks to code highlight if I had the highlight plugin. Since the inclusion of CSS seems to ignore HTML surrounding it:

title: MySpecialStyle
tags: $:/tags/Stylesheet
type: text/vnd.tiddlywiki

\define border-radius(size)
  border-radius: $size$;
  -moz-border-radius: $size$;
  -webkit-border-radius: $size$;
  -o-border-radius: $size$;
\end

<pre>
.foobar {
  <<border-radius 6px>>
  color: <<colour foreground>>;
  background-color: <<colour background>>;
}
</pre>

Eventually I realized the only time I needed to see the style was while editing and that had no formatting so I dropped the <pre> tags all together. And to be honest this makes sense. I would want my application/javascript to be interpreted with the wikitext parser (gods, one left shift bit opperation and all hell would break loos (var x = y << 1; // => BOOM!) Or in a text/css if you has an empty string it would think you meant bold:

.foobar {
  content: '';
}
.bar {
  content: '';
}

Would expand to:

.foobar {
  content: <b>;
}
.bar {
  content: </b>;
}

And that would be silly.

So there are reasons that macros are only parsed in text/vnd.tiddlywiki and not in alternative types (gosh think about parsing wikitext out of an image/jpg).

[Jeremy Ruston]

It’s worth also mentioning the `\rules` pragma which can be used at the top of a wikitext tiddler to limit the parse rules that are recognised during parsing.

Most of the core stylesheets are typed wikitext but include the following at the top to suppress all wikitext formatting except transclusions and macro calls and definitions:

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock

Best wishes

Jeremy.

--
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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/465873e8-8ffb-4a02-beba-ce7a9ed61452%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mat]

On Friday, April 29, 2016 at 12:24:56 PM UTC+2, peter....@hotmail.de wrote:

 @Mat

Thanks for your forpeter tiddler ^^

Correct me if I'm wrong. You simply avoid my problem by adding a new html-element to the tiddlers (if needed). You gave me a huge playground. If thats work for my ideas that would be great. Again thank you!

I will post my experience and hopefully succes

 So what's happening is thsi

* an image (twaddle)

* create a new viewtemplate (myviewtemplate) -  i.e a tiddler is made up of a list of viewtemplates (the title is one, the tags, the body, etc). They are all tagged $:/tags/ViewTemplate. You are creating an additional one.

*...and in this viewtemplate, there is the image transclusion.

*The viewtemplate also has a field list-before:$:/core/ui/ViewTemplate/body to ensure that the image is before the body viewtemplate because you dont want the image do be pushed down from the text in the tiddler body.

*However, this viewtemplate affects all tiddlers. So the image would show up in all tiddlers! You want to control this so first step is to block it everywhere by wrapping the image transclusion in a div that is styled to "display:none"

*...and instead change this to display:block only in tiddlers tagged with applymyimage. This is achieved in the stylesheet, using the tc-tagged-applymyimage.

*In the stylesheet the image is also styled for position, size etc. You'd also add the colored field here. (and you might need to use css pointer-events:none to prevent a color field fro blocking underlying buttons etc)

FYI, I'm also not a coder (yet). A year ago I would not have figured this out. But I would also think there are easier/more direct solutions. The whole route with a special viewtemplate for just an image feels convoluted but that's what I come up with right now. But, the idea to have it accessible for every tiddler is appealing if you add loads of things into it, i.e have everything display:none and then on a per-tiddler basis activate whatever bits you want.

<:-)