Images keep breaking when new tiddler is opened

toykit · January 11, 2026, 10:23pm

Hello, I have been working hard on my own site on tiddlywiki. I was very happy to see I could use HTML on here, however I am having an issue I don’t think I have ever had before.

This looks great! The image loads in fine (thank you placedog) and the tabs work just fine. The issue arises when I load another tab also using this infobox.

Now, my placeholder dogs are gone, and all the energy is being hogged by another dog in another tiddler. Is there a fix for this? I have seen other wikis on tiddly use multiple character profiles like this before, is it an HTML issue? I am fairly new to this whole thing and I just can’t find a solution to this after searching. Thank you.

etardiff · January 11, 2026, 11:43pm

This sounds like it’s probably an issue with your template code, but it’s hard to say without seeing it. If you can upload a test version of your wiki to tiddlyhost.com, it will make it much easier for us to help you.

P.S. Your template looks great! I’ve seen a number of people asking about infobox-type layouts over the years, and this is a lovely implementation.

toykit · January 12, 2026, 1:13am

Here you go

Sorry If my code is a mess or anything. I tried to clean it up a bit before sending it over. A friend helped a little but besides that I wrote it myself after brushing up on html.

etardiff · January 12, 2026, 1:47am

I think this is probably your issue:

.tab-images img {
 width: 200px;
 border: 1px solid #cccc;
 display: none;
 margin: 0 auto
}

#img1:checked ~ .tab-images #image1,
#img2:checked ~ .tab-images #image2,
#img3:checked ~ .tab-images #image3 {
 display: block
}

You’re using the id attribute to set the visibility of each image — which is clever, except that id is meant to be unique within an HTML document. This becomes a particular issue in TiddlyWiki because, unlike more traditional wikis, your entire wiki is a single HTML document. So it’s not enough to simply avoid repeating an id within a single tiddler; you’d have to avoid any repeats anywhere in the wiki. Otherwise, if you have an image with id="img1" in more than one tiddler, you risk your CSS breaking… and I imagine this is exactly what happened.

I’m sure there are CSS workarounds for this, but I’d recommend using a more TW-based approach instead. One of the key ideas of TiddlyWiki is that everything can (and generally should!) be stored in a tiddler or a tiddler field — and this applies to everything from your own user content to the UI features visible at any given time. So rather than the HTML <input type="radio"> buttons, I’d suggest using $radio widgets to set the value of a given field to the URL of the image you want to display. Then use a single <img> (or the TW $image widget) with a dynamic src value — the transcluded value of the field set by the $radio widget, e.g. <img src={{!!display-image}} /> if your $radio widgets are using <$radio field="display image" ... >.

If that sounds like a lot, I understand! I do a lot of work with templates myself, and I’ll try to come back with some sample code for you if no one else gets there first.

toykit · January 12, 2026, 2:00am

Thank you I am still learning at the moment, I haven’t quite figured all of the Tiddly features out yet. Thank you for the explanation! I understand what went wrong now, I will see if I can figure out a solution if nobody else comes up with something.

toykit · January 12, 2026, 2:18am

If there isn’t an exact solution to this, I can just find some other way to handle how this works. I don’t truly need the tabs, just one image would be fine. I just think it would be visually pleasing to have multiple images for alternate character designs per tab. I can switch to a single image on the infobox with a gallery below though. It was interesting to put together either way!

etardiff · January 12, 2026, 2:36am

No, it’s a good idea and it’s totally doable! Here’s a quick example for you to play with: toykit’s image gallery.json (2.5 KB)

You can download that JSON package and drag it directly into your wiki to import it. It contains two tiddlers:

Your sample tiddler, lightly edited
A new procedure I made called <<image-tabs>>, which looks like this:

\procedure image-tabs()
<style>
.tab-images img {
	width: 200px;
	border: 1px solid #cccc;
	margin: 0 auto;
}

.tab-buttons {
	margin-top: 6px;

	input[type="radio"] { display: none; }
	label {
		cursor: pointer;
		padding: 4px 8px;
		background: #eeee;
		border: 1px solid #cccc;
		margin-right: 4px;
		font-size: 80%
	}
}
</style>
<div class="tab-wrapper">
	<div class="tab-images">
		<$let
			images={{!!images}}
			current={{{ [{!!display-image}!match[]] ~[enlist<images>first[]] }}}
			title=`Image ${ [enlist<images>allbefore:include<current>count[]] }$`
		>
			<$image source=<<current>> alt=<<title>> tooltip=<<title>> />
		</$let>
	</div>
	<div class="tab-buttons">
		<$list filter="[enlist{!!images}]" variable="url" counter="num">
			<$radio field="display-image" value=<<url>> ><<num>></$radio>
		</$list>
	</div>
</div>
\end

I’ve used a number of techniques here that you may or may not care about at this exact moment (but if you do want part or all of it explained, please ask!) Here are the major takeaways:

The macro contains all the CSS it needs to work (based on the CSS from your original template).
It uses two fields in the tiddler where it’s displayed
1. images: This should be a title list of all the image paths you want to use for this gallery. In edit mode, add a new images field containing all your desired URL with a space between each, e.g.

https://placedog.net/321/474?id=135 https://placedog.net/542/802?id=152 https://placedog.net/625/824?id=43

1. display-image: You don’t need to modify this field yourself; it’s automatically set by the radio buttons the first time you click on one of them. This specifies the URL of the image currently being displayed.
If you don’t like these field names, you can change them to whatever you want. Just make sure to make your updates consistently throughout the procedure definition.
To use this procedure, on the tiddler where you want the gallery to appear…
1. Make sure you’ve added at least one image path to the images field, as discussed above.
2. Paste the code <<image-tabs>> in the text field, wherever you want the gallery to appear.

Have fun!

toykit · January 12, 2026, 2:52am

I think I got it working!

Two different Infoboxes both with matching functional images! I will test this out a bit more tomorrow and see if there are any issues, otherwise, thank you!