Dynamic Image Links

Twine Version: Sugarcube 2
[also choose a Story Format tag above]

So, here’s the run down: I’ve got a bunch of images already in my Twine creation and I’ve been working on some alternative versions. I would like to be able to alter the image path on click without having to create conditional statements for each image link (there’s rather a lot of them and some of them already have some rather nested statements dependant on various actions taken).

Let’s say I have my primary Images folder and its called Images. Within it, I have sub folders for Locations, Items and Characters. I have another folder called Images2 with the same sub-folders and the same file names. Within StoryInit I have defined <<set $imageFolder = "Images">>

and done the following in the passage where I want the toggle link

<<link "Toggle Images">>
<<if $imageFolder == "Images">>
  <<set $imageFolder = "Images2">>
  <<update>>
<<else>>
  <<set $imageFolder = "Images">>
  <<update>>
<</if>>
<</link>>

And then, using this as a test case I have modied the code for the image path as follows from:

<img src="Images/Locations/Bedroom1.jpg" alt="Bedroom Image">

to

Bedroom Image

Bedroom Image

But the net result of this is I just get the alt text - regardless of clicking the link or not.

Any help please?

How are you viewing the story? If you just click the Play button you’ll get a page that’s in some temp directory, so it won’t be able to find the images.

The src="Images/Locations/Bedroom1.jpg" is a relative URL, so the HTML file needs to be in the folder containing the Images folder. You’ll need to Build > Publish to File and save your story in the correct place.

Apologies if you already know that, but that’s the usual mistake that everybody makes…

Yeah, publishing it to file (and having it in the root folder at the same level as the subfolders) is pretty much the only way I test things these days.

The issue you are encountering likely stems from the fact that the image paths are not dynamically updated when the $imageFolder variable changes. The <> macro will only re-render the part of the passage where it is placed, and in this case, it’s not being applied to the images.

Here’s how the complete passage should look:

:: StoryInit
<<set $imageFolder = "Images">>

:: YourPassage
<<link "Toggle Images">>
    <<if $imageFolder == "Images">>
        <<set $imageFolder = "Images2">>
    <<else>>
        <<set $imageFolder = "Images">>
    <</if>>
    <<update>>
<</link>>

<<set _imagePath = $imageFolder + "/Locations/Bedroom1.jpg">>
<img src="<<=_imagePath>>" alt="Bedroom Image">

Not sure if it helps, but it’s still worth trying.

<img src="<<=_imagePath>>">

Is not valid SugarCube syntax. You can’t put a macro inside an HTML attribute like that.

What you want is

<img @src="_imagePath">

Your code is also using a macro, <<update>> which is part of Cyrus Firheir’s Live Update macro set, but it doesn’t work like this. The value to be updated must be inside a <<liveblock>> to get updated.

:: StoryInit
<<set $imageFolder = "Images">>

:: YourPassage
<<link "Toggle Images">>
    <<if $imageFolder == "Images">>
        <<set $imageFolder = "Images2">>
    <<else>>
        <<set $imageFolder = "Images">>
    <</if>>
    <<update>>
<</link>>

<<liveblock>>
<<set _imagePath = $imageFolder + "/Locations/Bedroom1.jpg">>
<img @src="=_imagePath" alt="Bedroom Image">
<</liveblock>>

If you update to SugarCube 2.37 you can use the new <<do>> and <<redo>> macros to do this.

:: StoryInit
<<set $imageFolder = "Images">>

:: YourPassage
<<link "Toggle Images">>
    <<if $imageFolder == "Images">>
        <<set $imageFolder = "Images2">>
    <<else>>
        <<set $imageFolder = "Images">>
    <</if>>
    <<redo>>
<</link>>

<<do>>
<<set _imagePath = $imageFolder + "/Locations/Bedroom1.jpg">>
<img @src="=_imagePath" alt="Bedroom Image">
<</do>>

Thanks, that’s seems to have mostly done the trick. I mean, it works. But its going to be more editing of image links than I was hoping for - I wish I’d thought of this at the start of the project before I had so many image links to update. Think I might just have to go old school and ask people to rename the file rather than be able to do it on the fly.

You could replace the image links with a widget to make it easier, but you will still have to go through and change stuff.