Fallback Image File Extensions

[David Allen]

I have multiple images that I'm using that are of various types, and I'd like to create a macro that can easily create the image code I need without having to switch over to my containing folder and find the image individually (I use TiddlyDesktop).  Is there some way I can determine if a file exists from TiddlyWiki before I try to use it as an image's path?

For example, I wanna generate the following:

<img src="Race_Vulcan.jpg" class="basic_image">

I can generate the line as-is with a macro easily, but I'd like the macro to change the extension of the filename if the file doesn't exist.  That way, all I have to type is <<fetch_image Race_Vulcan>> and it will generate the first <img> line if a file called Race_Vulcan.jpg exists, or fall back to Race_Vulcan.png, .bmp. etc if it does not.

[David Allen]

Nevermind, solved it using HTML like this:

<object data="Race_Vulcan.png" class="basic_image">

<img src="Race_Vulcan.jpg" class="basic_image">

</object>

--
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/5CzIAf9hJI4/unsubscribe.
To unsubscribe from this group and all its topics, 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/b43ef77e-18ed-49fd-ba69-6fa616178fc0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

David Allen

[David Allen]

Well, I thought that worked.  It's now causing a different problem.

I have individual image tiddlers that contain an <img> tag, pointing to an external image and specifying a CSS class.  I then have a series of macros that transclude said tiddler within divs that are modified by other CSS classes.  Since I wanted the image tiddler to show an image without knowing its file extension, I did the following to make an image fallback:

Example Image Tiddler:

<object data="x.jpg" class="basic_image">

<object data="x.png" class="basic_image">

<img src="x.bmp" class="basic_image">

</object>

</object>

I have the following macros that I use with the image tiddler:

\define single_image(target_image)
<div class="single_image">
<<basic_image $target_image$>>
</div>
\end

\define basic_image(target_image)
<$button message="tm-modal" param="$target_image$" class="button_image">
<div class="image_container">
{{$target_image$}}
</div>
</$button>
\end

I use the following CSS styles:

.basic_image {
min-width: 150px;
}

html .image_container {
background: #444444;
border-radius: 5px;
padding: 5px;
}

.button_image{
padding: 0px;
margin: 0px;
background-color: #444444;
border: none;
}

.single_image {
float:right;
width: 150px;
margin: 5px;
}

If both of the object tags are pointing to non-existent files but the image tag is pointing to an existent one, this is the result:

https://goo.gl/photos/nyvmxDc2zEaX9sov8

However, if one of the object tags is pointing to an existent file, this is the result:

https://goo.gl/photos/bUamzuVp4sAkAYpa8

The first situation is the intended result.  It looks like the <object> tag isn't inheriting the width of the div with the single_image class, and I'm not sure how to rectify this problem.

--

David Allen

[David Allen]

More basic version of the problem: Is there some way I can use a fallback image if the source for an external image is missing?

--

David Allen