Collage of image links without linebreaks

Hello all,

I have done the normal <@link to=><@link> with a bunch of images I am trying to make a collage with and want to remove normal system linebreak between them as list grows. How would I go about this?

Q

I think it should be <$link to=></$link>. You can place \whitespace trim at the beginning of the tiddler, if the tiddler only contains links.

You should post a little example, so we know, what you are talking about and we can test it.

white_space

I was using the correct <$link…, just haven’t taken time to figure out how to paste snippets here. If you will notice on pic posted I stroked a line about what ‘white space’ talking about. Basic line break white space. How specifically would this be used: ‘\whitespace trim’ if solution?

Thanks

TW pragmas like \whitespace trim have to be at the beginning of the tiddler. eg:

\whitespace trim

<$link to=aaa></$link>
<$link to=bbb></$link>

which internally would look as follows. So there should be no newlines.

<$link to=aaa></$link><$link to=bbb></$link>

If there’s no content in the link - which maybe there is in this case (the image?) - then this is the more compact syntax:

<$link to=aaa />

I already had links without spaces in string. Just tried the whitespace thing to no avail. Have text at top of tiddler. Just put whitespace inbetween. Then tried on new tiddler just links and white space and zip…

Post your code if you want beter help!

Just want to highlight for others with a similiar problem that pmairo is right on the money on not having spaces or newlines between pairs of angled brackets to remove border between images. Mine has a $list filter loop with $let and action widgets before my image widget and eliminating all spaces and newlines between my $list, $let, $action, image widgets allow the images to line up with no gap next to each other.

Like yours, I still have line gap between row of images but that’s because my images are not of uniform height. Maybe you can test by putting in a specific height for your images to see if that’s causing the problem.

Posting (original) code though not seeming pertinent with my previous posts and explanations. \whitespace trim had zero effect between paragraph and links. My links butt up directly to each other and all images are uniform height and width. Specifically, trying to get rid of line break so between row 1 and row 2 there is not space

Please visit our moderated <$link to=Patrons-Info>Patrons</$link> links as they have graciously supported fringe.wiki! Our latest Patron is first top left in rows of images.<br>



<$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/alpaca.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/ase.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/baby.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/bart.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/beef.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/bikini.png]]</$link><a href="https://getmonero.org" title="The ONLY privacy coin!">[img[patrons/xmr.png]]</a><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/biz.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/cat.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/porsche.png]]</$link><a href="https://markqueen.com" title="u b @ Q's krib">[img[patrons/q.png]]</a><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/flowers.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/gnr.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/couple.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/grandpa.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/reds.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/scooby.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/superman.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/vikings.png]]</$link><$link to=Patrons-Info>[img[I spit on those who do not support FW!|patrons/wings.png]]</$link>

In the middle of your code, you seem to mix between using the <$link> widget for links and the raw html <a> tag. Might that be why.

I am not sure if that is why. Do not think so. Why I am asking? But, do know there are two with and line does not break on earlier one, and both use tiddler [img] to get pics, using formats have thought read legit and all images uniform size… This is about default space with system linebreaks and eliminating if possible. Let me put it this way: on my laptop, because of wider screen, this is not issue as images only 32px wide x20 images, but linebreak you see visible in dual edit window (where I got screenshot) and on mobile.

I though about line-height but I was wrong. (Because the height of images are more bigger than line-height)

The problem is in the vertical- align of images in its container. The default is baseline, you need to change its value to bottom.

Here is a example to play in tiddlywiki.com

\whitespace trim
<style>
img.test{
  width: 32px;
  vertical-align: bottom;
}
</style>

<$list filter="[limit[30]]">
<$link to="HelloThere" tooltip="Custom tooltip">[img class="test" [Tiddlyhost Logo]]</$link>
<$link to="TiddlyWiki" tooltip="Custom tooltip">[img class="test" [$:/_tw_shared/favicons/links.tiddlywiki.org]]</$link>
</$list>