Is there a way to include an SVG image together with text as the placeholder of an <$edit-text> field?

[hubertgk]

Hi,

I'm trying to place a local (non-URL'ed) SVG image in a placeholder of a text input field but it doesn't get 'wikified'.

One workaround I've tried was to define a background image using CSS, however this doesn't seem to work with internal images.

Example code:

<$edit-text tiddler='$:/value' field='note' placeholder='[img width=12 [image.svg]] Bla bla bla'/>

I'd appreciate ideas how to solve this. Thank you!

Regards,
Hubert

[Matthew Lauber]

Hey Hubert,

I'm not sure that default html supports using a svg image in the placeholder field of the input box.  I'm pretty sure that this affect is typically implemented via css.  Take a look at https://stackoverflow.com/questions/13761654/html5-image-icon-to-input-placeholder to see how someone was implementing putting a magnifying glass in a text box.  

I did try the following, which got the html for the svg into the placeholder field, but as you can see, it doesn't render as html, but as plain text.

<$wikify name="temp" text="[img width='12' [Motovun Jack.svg]] bla bla bla" output="html">


<$edit-text tiddler='$:/value' field='note' placeholder=<<temp>> />
</$wikify>

[Matthew Lauber]

You could also consider if any of the font-awesome icons would work for your purposes, because I believe you can use those within the placeholder field.

[hubertgk]

Thanks for your suggestions. But doesn't Font Awesome require an online connection in order to work? If it does then I think that the CSS route would be the way to go, if only I could get it to point to an internal SVG image.

input {

    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

[Matthew Lauber]

You can get an plugin (offline) version of font awesome from here, I believe.  https://github.com/TheDiveO/TW5FontAwesome/releases/tag/1.2.1

[hubertgk]

Thanks, I've tried that in the meantime and it could work; too bad the plugin increases my TW's size by 300-400 kB -- not much in absolute terms but way too big a bump for a single/simple solution that I'm looking for.

I will revert to fiddling with CSS for now. Thanks again for your suggestions.

[@TiddlyTweeter]

I agree. And for other reasons too. Font Awesome can be useful in some narrow situations. But generally SVG is much more appropriate for what we need to do. I can't help on the specifics. SVG is not rendered via CSS, though it may use it. Its a thing in itself. SVG and TiddlyWiki are natural companions IMO. I think we need get better with it.

One question. Does the SVG you are trying to use in input field render correctly in a normal tiddler?

FWIW here is a codepen illustrating one usage. I have NOT checked this is TW compliant.

https://codepen.io/anon/pen/wizIp

[@TiddlyTweeter]

I forgot to mention that you could use CSS to include the SVG image, or via an HTML img too. But however that works direct inclusion of SVG code would probably work too.

[c pa]

input type="text" name="txtName" class="input" />

.input
{
    border: 0px solid #444444;
    height:39px;
    width:346px;
    background:url(images/Contact_05.jpg) no-repeat right top; 
    color:#fff; 
    padding-left:4px; 
    font-size:20px;
    }

[hubertgk]

Thanks. Unfortunately, this doesn't work.

Using your code, how would I reference an image that's embedded in the TiddlyWiki itself? What's the exact path then, if we're trying to use the url definition?

Also, are jpeg files treated differently in this code than svgs?

Thanks