[TW5] Question for Tobias about Link Images Macro

[Zaphod Beeblebrox]

Hello, Tobias :)

I am using your Link Images Macro to display external images that I use as backgrounds for a Blog I'm working on (Many Thanks for it, it works great! :) )

What I'd like to know is, is there a way to have it display images stored locally on ones hard drive, instead of out on the Internet?
I know, that's kinda the opposite of what it was made for, but I'd like for my users to be able to display their own files from their computers, without having to upload them somewhere, or bloat their TW with base-64-encoded image tiddlers.

I have tried using various formatted file links in the _canonical_URI field, but none work perfectly:

If I use file://Drive:/Folder/Image.jpg or file:///Drive:/Folder/Image.jpg, a thumbnail of the image appears in the Background Switcher display, but when clicked on, it just blanks the background of the page instead of displaying the image.

If I enclose either of those in quotation marks, "file://Drive:/Folder/Image.jpg" or "file:///Drive:/Folder/Image.jpg", the image does not appear in the Background Switcher (but I have a CSS hover: background-color declaration on the links, so I can see that it IS there), but when clicked on, the background does change to that image.

Any ideas?

Here is the complete code for the Background Switcher:

<span style="display: block; text-align: center; font-size: 150%; font-weight: bold; color: #FF0000;">TITLE<br>Descriptive Title of Your Choosing :&#222;</span><hr><$linkcatcher to="$:/themes/tiddlywiki/vanilla/settings/backgroundimage">
<div style="border: 2px solid silver; border-radius: 10px; height: 355px; overflow: auto;"><$list filter="[tag[Background]sort[title]]">
<$macrocall $name="linkimg" tiddler=<<currentTiddler>> image=<<currentTiddler>> tooltip=<<currentTiddler>> width="115"/>
</$list>
</div>
<hr>
<$link to="">
<table style="width: 100%; text-align: center; border: 2px solid rgba(255, 255, 255, 0);"><tr><td><$button><$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize" $value="contain"/>Fullscreen</$button></td><td><$button><$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize" $value="cover"/>Widescreen</$button></td><td><$button>Clear Background</$button></td></tr></table>
<hr>
</$link>
</$linkcatcher>

You can see it in action at http://zaphod2016.tiddlyspot.com/

Thank You
--Zaphod

[Tobias Beer]

Hi Zaphod,

Your code works just fine for me.

I have tried both relative and absolute file paths.

Best wishes,

Tobias.

[Zaphod Beeblebrox]

On 9/30/2016 2:42 AM, Tobias Beer wrote:

Hi Zaphod,

Your code works just fine for me.

Have you tried relative paths in folder below the TiddlyWiki?

Best wishes,

Tobias.

Thank You for the reply, Tobias :)

Well, I've just gone through another session, trying out every conceivable combination I can think of, and still have very mixed results.

My pictures are stored in E:\Pictures

Absolute Paths
file://E:/Pictures/ImageName.jpg - Functions correctly
file:\\E:\Pictures\ImageName.jpg - Thumbnail but blank background

file://E:/Pictures/Image Name with Spaces.jpg - Thumbnail but blank background
file:\\E:\Pictures\Image Name with Spaces.jpg - Thumbnail but blank background

"file://E:/Pictures/ImageName.jpg" - Background but no thumbnail
"file:\\E:\Pictures\ImageName.jpg" - No thumbnail or background

"file://E:/Pictures/Image Name with Spaces.jpg" - Background but no thumbnail
"file:\\E:\Pictures\Image Name with Spaces.jpg" - No thumbnail or background


Relative Paths
../../Pictures/ImageName.jpg - Functions correctly
..\..\Pictures\ImageName.jpg - Thumbnail but blank background

../../Pictures/Image Name with Spaces.jpg - Thumbnail but blank background
..\..\Pictures\Image Name with Spaces.jpg - Thumbnail but blank background

"../../Pictures/ImageName.jpg" - Background but no thumbnail
"..\..\Pictures\ImageName.jpg" - No thumbnail or background

"../../Pictures/Image Name with Spaces.jpg" - Background but no thumbnail
"..\..\Pictures\Image Name with Spaces.jpg" - No thumbnail or background

The spaces in the filename is still somewhat of a problem, as we'd have to rename any files used as backgrounds, and folks might not want to do that...

Might this be a result of how your macro works, or is it just the way TW handles filenames?

Do you see any obvious syntax errors that I've made?

Could you send me the syntax that you used to get satisfactory results?

This is maddening!

Thanks again for your help :)

--Zaphod

[Tobias Beer]

Hi Zaphod,

I see no reason why linkimg would bother how you define your _canonical_uri.
If it works in general to transclude that using the [img[]] wikitext syntax,
then it should also work with linkimg.

I think, if anything, this has to do with how your OS / browser works.

Best wishes,

Tobias. 

[Zaphod Beeblebrox]

Greetings, Tobias :)

Hmm...

I tried transcluding an image and it performs the same way!
Tried it on an empty 5.1.13 TW and it works.  This tells me something has messed up somewhere.

I'll have to start from scratch and add each plugin/macro/change that I've made one at a time and test again to find the culprit.
I've already enabled/disabled my SideBar Shade, and the custom Stylesheet I've built, but it's neither of those.

Thank You for the help, kind Sir :)

--Zaphod

[Zaphod Beeblebrox]

Sorry, forgot to mention that I'm using Windows 7 Professional with
Service Pack 1, and the latest versions of Firefox and Chrome.

--Zaphod