ForEachTiddler with CSS for Images

6 views
Skip to first unread message

Dave Gifford - http://www.giffmex.org/

unread,
Nov 15, 2008, 1:21:03 PM11/15/08
to TiddlyWiki
Hi all,

I want the FET plugin to grab the contents of tiddlers tagged
'photo' (the tiddlers only contain links to photos) but I would like
two qualifications to that:

1. I would like to force the photos to a certain height, and
2. I would like the photos to display in one long horizontal row that
you can scroll across to view.

Any ideas on how I can do this? I am willing to add CSS to every photo
tiddler if need be.

Dave

Dave Gifford - http://www.giffmex.org/

unread,
Nov 15, 2008, 1:55:38 PM11/15/08
to TiddlyWiki
Okay figured out the first part on my own, thanks to this page

http://www.tiddlywiki.org/wiki/Resizing_Image

But I doubt I will be able to figure out the other part.

Dave

FND

unread,
Nov 15, 2008, 2:59:49 PM11/15/08
to Tiddl...@googlegroups.com
> I would like the photos to display in one long horizontal row that
> you can scroll across to view.

To prevent autmatic line breaks, wrap the images into a container
"white-space: nowrap;" (untested).
If required, I can elaborate tomorrow, but now I gotta run.


-- F.

Dave Gifford - http://www.giffmex.org/

unread,
Nov 15, 2008, 3:19:32 PM11/15/08
to TiddlyWiki
Hi Fred

I'll look forward to your reply tomorrow or Monday. I wrapped the FET
macro with a CSS class based on the style you mentioned and don't have
the effect I need. I have a feeling that the right dimension of the
tiddler area and the presence of the (hidden) right sidebar is what is
keeping it from widening.

Dave

FND

unread,
Nov 16, 2008, 3:09:32 AM11/16/08
to Tiddl...@googlegroups.com
> I wrapped the FET macro with a CSS class based on the style you
> mentioned and don't have the effect I need.

With the following in StyleSheet:
.gallery {
white-space: nowrap;
}
this works for me:
<<forEachTiddler
where 'tiddler.tags.contains("photos")'
write 'tiddler.text'
begin '"{{gallery{"'
end '"}}}"'
>>
That FET macro call expects that tiddlers tagged with "photos" contain a
simple image reference (e.g. "[img[foo.png]]").

Since you need have that wrapper class anyway, you might as well use it
to define image dimensions:
.gallery img {
width: 100px;
height: 100px;
}

HTH.


-- F.

Dave Gifford - http://www.giffmex.org/

unread,
Nov 17, 2008, 8:53:02 AM11/17/08
to TiddlyWiki
Thanks Fred, that worked great.

My problem was that the one FET example Udo gives on his site for
showing the content of all tiddlers is not very clear because it is
mixed in with showing another process.

Now my problem will be that I want to play with this too much!

Dave
Reply all
Reply to author
Forward
0 new messages