[TW5] make the rendered image of the img command a link to open the image in new tab

[Bob Flandard]

Hello,

I have this code in a tiddler

[img width={{!!imagewidth}} [.\images\2016-06-20 15_19_51.png]]

Where the image is stored in local TW sub-directory called "images".

I'd like to be able to the click on the rendered image and it to be opened in a new tab.

The justification for wanting to do this is that I have a table of shrunken images (using width={{!!imagewidth}} field) e.g.

| [img [...pic1.png]] | [img [...pic2.png]] | [img [...pic3.png]] |

... and I want to see one of them in detail.

I'd also like not to have to type the ".\images\2016-06-20 15_19_51.png" part twice.

Is this possible?

Thanks, Bob

[Bob Flandard]

Hello,

Assuming the scenario above is not possible, then would it be possible for an enlarged version of the image to be displayed on mousing over the small image?. If I need to type the image address twice that's fine. Or if it can be done using html rather than the img command then that's okay too.

Thanks, Bob

[PMario]

Hi Bob,

Not exactly, what you requested, but may be a good start: http://tobibeer.github.io/tw/ibox/#Examples

If you search the group for "modal" and "lightbox"  ... sorted by date ... you may find more useful posts.

have fun!
mario

[Bob Flandard]

Hi Mario,

Thank you for the link!

Regards, Bob

[Evolena]

With the same "lightbox", idea, I had come to this a year ago:

<style>
@media (max-width: 55em) {
    .tc-modal-body img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 55em) {
    .tc-modal {
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
        max-width: 95%;
    }
}

.tc-modal-body {
    padding: 1px 15px;
    min-width: 750px;
}

.tc-modal-body img {
    max-width: 100%;
}
</style>

<$list filter="[is[image]has[_canonical_uri]]" variable="currentImage">
<$button class="tc-btn-invisible tc-thumbnail-image">
<$action-sendmessage $message="tm-modal" $param=<<currentImage>>/>
<$image source=<<currentImage>> width={{!!imagewidth}}/>
</$button>
</$list>

The idea was to make the lightbox the width of the window, but the CSS seem to not work as intended...

[Evolena]

As I had to leave quickly when I first replied, here are some explanations.

This code works with ExternalImages, so you would have to create tiddlers for each images (but the image is not fully integrated into the wiki), which may not be what you want.
You can try it directly in a new tiddler on tiddlywiki.com, the filter retrieves its two external images.
The CSS is here embedded into a style tag, but you can create a custom stylesheet for that.

Another solution without external images:

A first template tiddler for the modal (e.g. template/picture), with this content:

<$image source=<<url>>/>

Then you use it with this code (that you can encapsulate in a macro, with the url as a parameter, for an easier use):

<$button class="tc-btn-invisible tc-thumbnail-image">
<$action-sendmessage $message="tm-modal" $param="template/picture" url="./images/Blurry%2520Lawn.jpg"/>
<$image source="./images/Blurry%2520Lawn.jpg" width={{!!imagewidth}}/>
</$button>

[Bob Flandard]

Hello Evolena,

Thank you for your lightbox and other macro ideas.

It'll take me a while to get what you've done, but thanks in the meantime.

Regards, Bob

[Evolena]

Let's me try to explain step by step:

<$button class="tc-btn-invisible tc-thumbnail-image">
...
</$button>

The WidgetButton creates a button.
The "class" attribute defines how it looks like: "tc-btn-invisible" removes the grey box of classic buttons, and "tc-thumbnail-image" is a facility to style the image (this class is used for the Thumbnail macro that you can see in action in the HelloThere tiddler of tiddlywiki.com).


<$action-sendmessage $message="tm-modal" $param="template/picture" url="./images/Blurry%2520Lawn.jpg"/>

The SendMessage action widget allows the button to trigger an action by sending a message (and this is why we used a button widget: it's currently the only element taht can trigger an action widget), here "tm-modal" to open a modal window. This message can take parameters:
- "$param" is the title of the displayed tiddler. As we don't have tiddlers for our images, I use a template tiddler: "template/picture". It acts as a skeleton for the content of the modal.
- "url" is a variable (or parameter) for the template

The template contains:

<$image source=<<url>>/>

So the modal will display an image, whose url is the variable set previously in the message "tm-modal".
The ImageWidget is used because the source is not already defined, the [img[]] syntax doesn't work with variables.

Finally


<$image source="./images/Blurry%2520Lawn.jpg" width={{!!imagewidth}}/>

displays the "label" of the button, here an image. It is exactly what you had at the beginong, but with an ImageWidget instead of [img[]] (which could work here).

If you want to create a macro, you would have to replace the name of the image with a parameter:



\define macro-image(url)
<$button class="tc-btn-invisible tc-thumbnail-image">
<$action-sendmessage $message="tm-modal" $param="template/picture" url="$url$"/>
<$image source="$url$" width={{!!imagewidth}}/>
</$button>


And then use it with


<<macro-image "./images/Blurry%2520Lawn.jpg">>





[Bob Flandard]

Hello Evolena,

Many thanks for your detailed explanatory notes. I shall explore them in detail this weekend.

Best wishes, Bob




[Bob Flandard]

Hello Evolena,

Thank you for the code!, it works nicely and was much easier to get working than I anticipated.

It's a shame the "tool tip" option of the img macro can't be overloaded or modified to show an enlarged image instead of text, that would save two mouse clicks and a mouse drag to locate the "close" button. Some folks... never satisfied.

All the best, Bob




[Evolena]

You can also look at the Popup exemple for the RevealWidget. You can put your little image as content of the button widget, your enlarged image in the content of the reveal widget, and make this a macro to avoid writing all this stuff each time.

Something like that:

\define image-popup(url)
<$button popup=<<qualify "$:/state/popup/$url$">>>
[img width={{!!imagewidth}} [$url$]]
</$button>

<$reveal type="popup" state=<<qualify "$:/state/popup/$url$">>>
[img[$url$]]
</$reveal>
\end
The qualify macro ensure all your image popup don't pop at the same time when you click on one.

Still one click to open and another one to close, but at the same place.

[Bob Flandard]

Hello Evolena,

I think I prefer this new method, except that the top of the popup image is too far down the page, which requires a bit of scrolling (to see the full image). Plus the sudden appearance of a scroll-bar on the right causes a small resizing of the elements on the page, which is ugly to watch.

Thanks again for all your help, Bob

[Bob Flandard]

Hi Evolena,

Now I've played around a bit with your last macro above, I really like it. The scroll-bar issue disappears if the tiddler has enough other content and having to scroll down a bit for larger images isn't too bad at all. It also has a compact elegance - eight lines!, Bowie would be proud. I tried singing it to the tune of "Eight Line Poem" but it doesn't flow too well - can't have everything.

Thanks again, Bob