tw5 question about thumbnails and links to external image files

[steve]

Hi

I am using TW5 to write documentation for a application and I would like to embed screenshots in the text
So far I am able to have a clickable link to the image (see below)

[ext[App Screenshot|./externalFiles/image.tiff]]

What I would really like to do is:
* have the image displayed in the tiddler without having to click on a link (good);
* have a thumbnail of the image displayed; click on thumbnail to see the full resolution image (better)
* generate the thumbnail "on the fly" without having to a separate thumbnail image; click on the thumbnail to see the full resolution image (best)

Steve Wharton

[Mark S.]

You could roll your own macro that would do some of that:

\define imageit(image:"image.jpg")
<a href=$image$ target="new"><img src=$image$ width="25%" height="25%" /></a>
\end

e.g.

<<imageit "TW-Images\chimps_77646868_3patrol.jpg">>

This produces a 1/4 size clickable "thumb" (no actual thumb is generated).

To actually generate a thumb would probably take a FF plugin.

The tiddlyclip plugin (http://tiddlyclip.tiddlyspot.com/) can capture screenshots of  web pages, BTW.

[PMario]

On Monday, November 10, 2014 7:57:50 PM UTC+1, steve wrote:

I am using TW5 to write documentation for a application and I would like to embed screenshots in the text
So far I am able to have a clickable link to the image (see below)

[ext[App Screenshot|./externalFiles/image.tiff]]

Hi Steve,
Is there a reason, why you use .tiff images. They tend to be really big.
-m

[steve]

Mark:

The imageit macro works, it generates an image outline, that when clicked shows the full image. 

Is there a way to simply have an image displayed in the tiddler without having to click a link?

Thanks
Steve Wharton

[steve]

Mario

I am using the high resolution tiff format for now because that is what is generated by the Mac OS "grab" utility.
In practice I would switch to another smaller image format.

Thanks
Steve Wharton

[steve]

An Update:

I tried a number of ways (see below) to display the images "screenshot.jpg" and "screenshot.tiff" in a tiddler. The files screenshot.jpg and screenshot.tiff are in the same directory as the html file. I'm using Firefox. The problem appears to be the .tiff format

1. The following successfully displays the screenshot.JPG image.
<img src="screenshot.JPG" width="50%" height="50%">

2. The imageit macro does work with the screenshot.JPG image, but it opens the full image in a new tab.
<<imageit "screenshot.jpg">>

3. The following does not display the screenshot.tiff image.
<img src="screenshot.tiff" width="50%" height="50%">

4. The imageit macro kind of works with the screenshot.tiff image. It shows an outline. If you click on the outline it shows the screenshot.tiff image in a separate preview window.
<<imageit "screenshot.tiff">>

Steve Wharton

[Mark S.]

On Tuesday, November 11, 2014 7:12:53 AM UTC-8, steve wrote:

An Update:

I tried a number of ways (see below) to display the images "screenshot.jpg" and "screenshot.tiff" in a tiddler. The files screenshot.jpg and screenshot.tiff are in the same directory as the html file. I'm using Firefox. The problem appears to be the .tiff format

 

2. The imageit macro does work with the screenshot.JPG image, but it opens the full image in a new tab.
<<imageit "screenshot.jpg">>

That was the intention ;-)

I guess what you want is to click on it and reveal it in the same place? I think something like that could be done by using the reveal macro.

AFAIK, Safari is the only browser that even attempts to support tif format. My guess is that it has only partial support and that is why the scaled image just shows up as an outline. You might search if there is a plugin for Safari that will allow scalable tifs.

The more universal solution would be to use a batch utility to convert your tifs to jpegs.

And/or, use a batch utility to create your thumbs as tifs in a sub-directory (e.g. "myimages/thumbs") and then have the macro reveal the thumb until a button is clicked, whereupon it shows the full-size version. The main thing is, as long as the images are tif format they're not going to be viewed correctly on other browsers.

Mark 

[PMario]

On Tuesday, November 11, 2014 2:17:57 PM UTC+1, steve wrote:

I am using the high resolution tiff format for now because that is what is generated by the Mac OS "grab" utility.
In practice I would switch to another smaller image format.

If you use it for sceen shots, tiff isn't needed at all. IMO gif is still the best image format for screenshots, if you don't need transparency.
Since sceen shots have huge portions of the same pixels, gif creates small lossless files

For sceenshots jpg is crap since it always produces rendering artefacts at text and can't produce lossless images, like tiff or gif.

gif is not good for "real world" images ... there jpg has its strength.

just my 2cents
mario

[Ton Gerner]

Or use png which has the same advantages for screen shots: it creates small lossless files as well. *And* has transparency possibility.

Cheers,

Ton

[PMario]

On Wednesday, November 12, 2014 10:03:45 AM UTC+1, Ton Gerner wrote:

Or use png which has the same advantages for screen shots: it creates small lossless files as well. *And* has transparency possibility.

You are right and it may even create smaller files.

... but gif lets you easily create animaged gif, that's imo supported by all browsers. Where else apng [1] is not well supported and not standardized :/

-m

[1] http://caniuse.com/#search=apng

[steve]

Mark

The simplest thing for me to do right now is to stop using tiff. I have a small number of images and it is easy for me to convert them to jpg using preview.

You are correct that what I wanted to do was to reveal the full image in the same place. I used a twc utility called ThumbThing (from Eric Shulman, see http://www.tiddlytools.com/#ThumbThing) that worked this way (see attachment). I used the utility to randomly select a file (from a list of locally stored pictures), automatically display it as thumbnail, click on thumbnail to show the full image, and click on the full image to hide it.

Steve Wharton

[Mark S.]

This is a more elaborate version of the macro. It assumes you have a directory with your images (you can change the default) and a subdirectory below that with the the thumbs called "thumbs". You click a button to show either the large or full version. This may be littering your tiddler space with state tiddlers.

One of the reasons to generate actual thumbs rather than just to scale them is that when you scale an image the browser has to load the entire mega-pixel thing into memory.

I'm sure others can tweak or replace this to make something better:

\define imageit(image:"image",path:"TW-Images/")
<$macrocall $name="imageaid" image="$path$$image$" thumb="$path$thumbs/$image$" state="$:/ImageState/$image$" />
\end
\define imageaid(image:"image.jpg" ,thumb:"pathToThumb", state:"ImageRevealState")
<$button set="$state$" setTo="hide">Full image</$button>
<$button set="$state$" setTo="show">Small Image</$button><p/>
<$reveal type="match" state="$state$" text="show">
<img src="$thumb$" />
</$reveal>
<$reveal type="match" state="$state$" text="hide">
<img src="$image$" />
</$reveal>
\end

Example:

<<imageit "chimps_77646868_3patrol.jpg" >>

On Monday, November 10, 2014 10:57:50 AM UTC-8, steve wrote:

[Sylvain Naudin]

Hi Mark, I like your macro example :)

I don't know if I'll use it, but just curious and test it with success.

Sylvain

[steve]

Mark

In my use case (periodically displaying a new image - kinda like a digital picture frame) I wouldn't have to load all of the images at once. For me the convenience of not having to create a predefined set of thumbnails would outweigh any extra work for the browser. I'll still give it a try though. Apologies for the late response.

Thanks
Steve Wharton

[Roger Ferrari]

Hi, sorry to bring such old discussion, but I am trying to reproduce this macro and it doesn't work for me.

I created it with the tiddlywiki technique to implement global macros (macros defined in tiddlers with the $:/tags/Macro tag)

and the syntax is exactly the same as you show above, do you have any idea what could I possibly be doing wrong? Thank you so much for any help and your time.

[Mark S.]

One of the great things about macros written with TiddlyWiki is that, if you used all core components, they will continue to be backward compatible no matter how much time has passed.

I just ran a test, and the 4 year old code still works.

With this particular macro, what is going to matter most is the directory structure of your images. It's expecting that you will put a directory below your TW directory, and then a subdirectory "thumbs" below that. The default image directory was TW-Images, but you can supply a different image path.

So you might explain a bit about your set-up, and the image names you're using.

Good luck

-- Mark

[Roger Ferrari]

Good morning!

This is the code I am using:

\define imageit(image:"image.jpg")
<a href=$image$ target="new"><img src=$image$ width="25%" height="25%" /></a>
\end

https://i.imgur.com/ouGocUq.jpg (Macro screenshot)

And in another tiddler I am using this code:

<<imageit "images\phandalin.jpg">>  

And this is what happens:

well, I was about to take the screenshot as I recreated the steps and it worked as intended lol. Thanks!

I might have missed something, it was pretty late at night yesterday. Thank you so much.

Roger Ferrari

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, 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/54340cfb-75db-454d-8e22-b67989cfc397%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.