Greetings, Richard - Thank You for your comments/suggestions :) On Sunday, July 24, 2016 at 1:17:15 AM UTC-4, RichardWilliamSmith wrote: > > Hi Zaphod, > > In my opinion, you will be better off using external images - meaning that > you serve your own copy of the images you want, but alongside the > tiddlywiki, not inside it. >
This has been my aim and intention from the beginning, and also the cause of all my problems :P I think this is better becasue a) it's a bit rude to load other people's > resources routinely (I know this isn't a huge concern these days) > Well, this point is the second main reason why I chose TW to be the platform to use for my little 'project' (the first being its single-file format). I have been publishing this movie database as a (downloadable, from Dropbox) static webpage for a while, now, but really wanted to include screenshots for each movie (plus other 'features' of a Blog-like ecosystem), but that's not possible with the static webpage as it would have to load ALL the screenshots for ALL the movies when the page loaded (it already weighs over 2MB and takes 30-45 seconds to load), so I hit upon the idea of using TW as each tiddler could be its own self-contained little webpage, with the screenshots hidden behind a custom <$reveal> and <$button>, only loading if and when the user clicked on it. c) it makes what you're trying to do easy instead of difficult. > Heh heh - I thought that, too, until trying to use those same externally-stored graphics as the background for the page :-P (well, specifically being able to switch them instantly) Externalising your images using the Node configuration is really easy and > the instructions are on Tiddlywiki.com but I also wrote a tool, which I > will post to the group soon that lets you manage external images from > inside the single-file app. They behave like regular tiddlers but the > payload is external and so doesn't weigh down your file. > I've looked at Node.js and it seems to be more than I'd care to get into, plus I could never ask my (very) non-techie users to attempt using it... BTW, 20-50kb per tiddler sounds a bit excessive - you should consider > having only the basics inside each record tiddler and then using template > tiddlers to add the fancy ui. > I have offloaded (I think) as much as possible, creating shortcode style names for many repeated styles through my Stylesheet tiddler, but I had not thought about template tiddlers. Could you point me somewhere that I might see some practical examples of them being used? I use a template tiddler to create the 'skeleton' movie tiddler, ready for data input: <html> <div class="SearchTerms"></div> <div class="Post"> <div class="Container"> <div class="CoverLeft"><img width="40" src="http://i.imgur.com/bFw3goc.jpg"; title="Genuine Zaphod-Rip" alt="Genuine Zaphod-Rip"> <img src= "http://i.imgur.com/2Fj0Cnj.png"; alt="Warner Archive Collection" title="Warner Archive Collection"> <img width="50" src="http://i.imgur.com/tbvCWGe.png"; alt="20th Century Fox Cinema Archives" title="20th Century Fox Cinema Archives"> <img width="40" src="http://i.imgur.com/EhU4tBM.png"; alt="Disney DVD" title="Disney DVD"> <img width="50" src= "http://i.imgur.com/sSOU3JI.png"; alt="Alpha Video" title="Alpha Video"> <img width="40" src="http://i.imgur.com/RBmDcu1.png"; alt="Feature Films for Families" title="Feature Films for Families"> <img width="40" src= "http://i.imgur.com/qMR8dGs.png"; alt="Children's Film and Television Foundation (CFF)" title="Children's Film and Television Foundation (CFF)"> <img width="50" src="http://i.imgur.com/VPNuLyZ.jpg"; alt="MGM Limited Edition Collection" title="MGM Limited Edition Collection" ><p></p><br><p></p><br><p></p><span id="Contrib">This Item Courtesy of <p></p><span id="ContBord">CONTRIBUTOR</span><p></p>Thank You! </span>,,<img src="http://i.imgur.com/WgjjEap.gif";>,,<p></p></div><!-- CoverLeft --> <div class="CoverMiddle"><a href="FULLSIZE" target="_blank"><img alt="Cover Art" title="Cover Art" src="THUMBNAIL"></a></div><!-- CoverMiddle --> <div class="CoverRight"><a href="FULLSIZE" target="_blank"><img alt="Cover Art" title="Cover Art" src="THUMBNAIL" ></a><p></p><br><p></p><br><p></p><span id="BoldGreen">aka or Original Title <br>""</span></div><!-- CoverRight --> </div><!-- Container --> <div class="FloatClear"></div> <div class="IMDb"><a href="IMDb URL" target="_blank"><img width="100" alt="IMDb Logo" title="IMDb Logo" src="http://i.imgur.com/sI6cPld.png";></a></div><!-- IMDb --> <p></p> <div class="Container"> <div class="Tagline">TAGLINE</div><!-- Tagline --> </div><!-- Container --> <p></p> <div class="Container"> <div class="Synopsis"><span class="FirstWord">FIRSTWORD</span> </div><!-- Synopsis --> <div class="Extras"> <span id="HeaderRed">DVD Extras:</span><br> <ul> <li> <span style="font-weight: normal;">()</span></li> <li> <span style="font-weight: normal;">()</span></li> <li> <span style="font-weight: normal;">()</span></li> <li> <span style="font-weight: normal;">()</span></li> <li> <span style="font-weight: normal;">()</span></li> </ul> </div><!-- Extras --> </div><!-- Container --> <div class="FloatClear"></div> <p></p> <div class="QuoteBox1"><span id="HeaderBlue">HEADER:</span> </div><!-- QuoteBox1 --> <p></p> <div class="TechWrapper"> <div class="TechTable"> <div class="row header red"> <div class="cell"><span class="skew">Origin</span></div> <div class="cell"><span class="skew">Filesize</span></div> <div class="cell"><span class="skew">Format</span></div> <div class="cell"><span class="skew">Dimensions</span></div> <div class="cell"><span class="skew">Audio</span></div> <div class="cell"><span class="skew">Subtitles</span></div> </div><!-- row header red --> <div class="row"> <div class="cell">ORIGIN</div> <div class="cell"> Bytes</div> <div class="cell">screen</div> <div class="cell"> x </div> <div class="cell">English</div> <div class="cell">NONE</div> </div><!-- row --> </div><!-- table --> <div class="Container"> <div class="SSButton"><$reveal type="nomatch" state="$:/SampleRevealState3" text="show"> <!-- ============ SPACE ============ --> <$button class="SSB1" set="$:/SampleRevealState3" setTo="show"><img src="LEFT GRAPHIC"> Screenshots <img src="RIGHT GRAPHIC"></$button> <!-- ============ SPACE ============ --> </$reveal> <$reveal type="match" state="$:/SampleRevealState3" text="show"> <!-- ============ SPACE ============ --> <$button class="SSB2" set="$:/SampleRevealState3" setTo="hide"><img src="LEFT GRAPHIC"> Close <img src="RIGHT GRAPHIC"></$button> <!-- ============ SPACE ============ --> <div class="SSButtonInner"> <span id="MSD">Menu Screens</span> <p></p> SCREENSHOTS GO HERE </div><!-- SSButtonInner --> </$reveal> </div><!-- SSButton --> </div><!-- Container --> <div style="Container"> <div class="BAButton"><$reveal type="nomatch" state="$:/SampleRevealState1" text="show"> <!-- ============ SPACE ============ --> <$button class="BAB1" set="$:/SampleRevealState1" setTo="show"><img height= "50" src="LEFT GRAPHIC"> Actor(s) <img height="50" src="RIGHT GRAPHIC"></$button> <!-- ============ SPACE ============ --> </$reveal> <$reveal type="match" state="$:/SampleRevealState1" text="show"> <!-- ============ SPACE ============ --> <$button class="BAB2" set="$:/SampleRevealState1" setTo="hide"><img height= "50" src="LEFT GRAPHIC"> Close <img height="50" src="RIGHT GRAPHIC"></$button> <!-- ============ SPACE ============ --> <div class="BAButtonInner"> <div class="BATable"> <div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class= "BAEllipsis"> …… </div><div class="BAName">ROLE </div></div> <div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class= "BAEllipsis"> …… </div><div class="BAName">ROLE </div></div> <div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class= "BAEllipsis"> …… </div><div class="BAName">ROLE </div></div> <div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class= "BAEllipsis"> …… </div><div class="BAName">ROLE </div></div> <div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class= "BAEllipsis"> …… </div><div class="BAName">ROLE </div></div> <br> </div><!-- BATable --> ADDENDUM<br> </div><!-- BAButtonInner --> <!-- ============ SPACE ============ --> </$reveal> </div><!-- BAButton --> <!-- =============================================== --> <div class="DLButton"><$reveal type="nomatch" state="$:/SampleRevealState2" text="show"> <!-- ============ SPACE ============ --> <$button class="DLB1" set="$:/SampleRevealState2" setTo="show"><img height= "50" src="LEFT GRAPHIC"> Download Links <img height= "50" src="RIGHT GRAPHIC"></$button> <!-- ============ SPACE ============ --> </$reveal> <$reveal type="match" state="$:/SampleRevealState2" text="show"> <!-- ============ SPACE ============ --> <$button class="DLB2" set="$:/SampleRevealState2" setTo="hide"><img height= "50" src="LEFT GRAPHIC"> Close <img height="50" src="RIGHT GRAPHIC"></$button> <!-- ============ SPACE ============ --> <div class="DLButtonInner"> <p></p> <a href="" target="_blank"></a><br> <a href="" target="_blank"></a><br> <a href="" target="_blank"></a><br> <a href="" target="_blank"></a><br> <a href="" target="_blank"></a><br> <a href="" target="_blank"></a><br> <a href="" target="_blank"></a><br> <a href="" target="_blank"></a><br> <a href="" target="_blank"></a><br> <p></p> </div><!-- DLButtonInner --> </$reveal> </div><!-- DLButton --> </div><!-- TechWrapper --> <div class="FloatClear"></div> <div class="Container"> <div class="EPButton"><$reveal type="nomatch" state="$:/SampleRevealState4" text="show"> <!-- ============ SPACE ============ --> <$button class="EPB1" set="$:/SampleRevealState4" setTo="show"><img src="LEFT GRAPHIC"> Ephemera <img src="RIGHT GRAPHIC"></$button> <!-- ============ SPACE ============ --> </$reveal> <$reveal type="match" state="$:/SampleRevealState4" text="show"> <!-- ============ SPACE ============ --> <$button class="EPB2" set="$:/SampleRevealState4" setTo="hide"><img src="LEFT GRAPHIC"> Close <img src="RIGHT GRAPHIC"></$button> <!-- ============ SPACE ============ --> <div class="EPButtonInner"> <div class="EPWrapper"> <div class="EPHeader"><img src="http://i.imgur.com/A7NvL35.png";></div> <div class="EPContent">POSTER</div> <div class="EPContent">POSTER</div> <div class="EPContent">POSTER</div> </div><!-- EPWrapper --> <hr id="hrthick"> <div class="EPWrapper"> <div class="EPHeader"><img src="http://i.imgur.com/ZJiFNlg.png";></div> <div class="EPContent">LOBBY CARD</div> <div class="EPContent">LOBBY CARD</div> <div class="EPContent">LOBBY CARD</div> </div><!-- EPWrapper --> <hr id="hrthick"> <div class="EPWrapper"> <div class="EPHeader"><img src="http://i.imgur.com/v9r2fN8.jpg";></div> <div class="EPContent">DVD COVER</div> <div class="EPContent">DVD COVER</div> <div class="EPContent">DVD COVER</div> </div><!-- EPWrapper --> <hr id="hrthick"> <div class="EPWrapper"> <div class="EPHeader"><img src="http://i.imgur.com/oaTM0xH.png";></div> <div class="EPContent">MISC</div> <div class="EPContent">MISC</div> <div class="EPContent">MISC</div> </div><!-- EPWrapper --> </div><!-- EPButtonInner --> </$reveal> </div><!-- EPButton --> </div><!-- Container --> </div><!-- Container --> </div><!-- Post --> </html> and this in itself weighs 9.5kb (with the graphic links (omitted here) included. Of course this skeleton template features every field and graphic that a movie post could conceivably contain - Most will have less items than this (and, yes, I know I can get rid of more extra weight by eliminating the comment tags after the closing < div >'s - They were there temporarily while I was testing the layout, to make sure I knew WHICH div was being closed...) --Zaphod -- 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 [email protected]. To post to this group, send email to [email protected]. 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/29322633-ba04-420c-b0fe-5740a27beefc%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
![http://i.imgur.com/bFw3goc.jpg"](http://i.imgur.com/bFw3goc.jpg"){kind=link}
![http://i.imgur.com/2Fj0Cnj.png"](http://i.imgur.com/2Fj0Cnj.png"){kind=link}
![http://i.imgur.com/tbvCWGe.png"](http://i.imgur.com/tbvCWGe.png"){kind=link}
![http://i.imgur.com/EhU4tBM.png"](http://i.imgur.com/EhU4tBM.png"){kind=link}
![http://i.imgur.com/sSOU3JI.png"](http://i.imgur.com/sSOU3JI.png"){kind=link}
![http://i.imgur.com/RBmDcu1.png"](http://i.imgur.com/RBmDcu1.png"){kind=link}
![http://i.imgur.com/qMR8dGs.png"](http://i.imgur.com/qMR8dGs.png"){kind=link}
![http://i.imgur.com/VPNuLyZ.jpg"](http://i.imgur.com/VPNuLyZ.jpg"){kind=link}
![http://i.imgur.com/WgjjEap.gif"](http://i.imgur.com/WgjjEap.gif"){kind=link}
![http://i.imgur.com/sI6cPld.png"](http://i.imgur.com/sI6cPld.png"){kind=link}
![http://i.imgur.com/A7NvL35.png"](http://i.imgur.com/A7NvL35.png"){kind=link}
![http://i.imgur.com/ZJiFNlg.png"](http://i.imgur.com/ZJiFNlg.png"){kind=link}
![http://i.imgur.com/v9r2fN8.jpg"](http://i.imgur.com/v9r2fN8.jpg"){kind=link}
![http://i.imgur.com/oaTM0xH.png"](http://i.imgur.com/oaTM0xH.png"){kind=link}