Random background image
388 views
Skip to first unread message
Duarte Farrajota Ramos
Mar 10, 2015, 1:02:46 PM3/10/15
to tiddl...@googlegroups.com
Hello guys, once again come to ask for your expertise in Tiddlywiki, is it possible at all to assign a random background image to tiddlywiki using some sort of javascript and css trickery?
My coding skills are very lacking at best, but I found here on the forum that I can assing a background image using
My coding skills are very lacking at best, but I found here on the forum that I can assing a background image using
html body.tc-body { background: url("path/to/image.jpg") no-repeat center center fixed; background-size: cover; height: 100%;}in a tiddler tagged with $:/tags/Stylesheet which I managed to accomplish successfully.
Now I fund out a few methods online (like this one) that can randomize i using java script or jquery, is there a way to adapt this or use it inside tiddlywiki?
I tried to adapt that but my basic copy-pasting techniques are insufficient here.
Thanks for the help
Jed Carty
Mar 10, 2015, 2:02:02 PM3/10/15
to tiddl...@googlegroups.com
I like this idea so in exchange for showing you how to implement it I am using it on my site.
This should bring you to my site with all of the needed tiddlers open.
This would be a lot simpler using the choose random widget Neil made rather than the randval widget I made, but his choose random widget returns results with [[ and ]] around them, which breaks what I am doing. There may be a way around this but nothing immediately comes to mind. (So, Neil, if you want to add an option to not have the [[ and ]] that would help in this one very narrow case.)
To add more images just add them to the '$:/data/Random Background URL List' tiddler. The 1s are there because something has to be, but it doesn't matter what.
This should bring you to my site with all of the needed tiddlers open.
This would be a lot simpler using the choose random widget Neil made rather than the randval widget I made, but his choose random widget returns results with [[ and ]] around them, which breaks what I am doing. There may be a way around this but nothing immediately comes to mind. (So, Neil, if you want to add an option to not have the [[ and ]] that would help in this one very narrow case.)
To add more images just add them to the '$:/data/Random Background URL List' tiddler. The 1s are there because something has to be, but it doesn't matter what.
Jed Carty
Mar 10, 2015, 2:07:29 PM3/10/15
to tiddl...@googlegroups.com
If you wanted to have the image change every time the wiki is loaded you could use the startup actions plugin. The trigger actions plugin could update the background on other events.
Stephen Kimmel
Mar 11, 2015, 8:45:55 AM3/11/15
to tiddl...@googlegroups.com
Now that is seriously cute.
Duarte Nuno de Paiva Farrajota Ramos
Mar 11, 2015, 8:57:16 AM3/11/15
to tiddl...@googlegroups.com
Sorry for the delay in replying.
Well this sounds very interesting, have to give it a try myself when I'm back at the computer.
My main interest in this would be to have it randomly change the background on each page load, so I will probably have to check that plugin too
Thanks a lot for the tips I'll have a look at them
Sent from Nokia 3210
On Mar 11, 2015 12:46 PM, "'Stephen Kimmel' via TiddlyWiki" <tiddl...@googlegroups.com> wrote:
Now that is seriously cute.
--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/QKBoH-71384/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
Jed Carty
Mar 11, 2015, 2:22:57 PM3/11/15
to tiddl...@googlegroups.com
Here is a better explanation of how to do it. I haven't come up with a way to make this work with the startup actions in the current tiddlywiki version. The changes to how invokeActions works in the next version makes a lot of things much easier.
And of course as soon as I say that I realize that what I could do to make it work. I will post it when I have it set up. It isn't a very good solution but it should work.
Edit:
Or maybe not, it looks like something in the startup actions plugin requires version 5.1.8, or something like that. I can't get it to work in the current version. In completely unhelpful new, it works in the prerelease.
And of course as soon as I say that I realize that what I could do to make it work. I will post it when I have it set up. It isn't a very good solution but it should work.
Edit:
Or maybe not, it looks like something in the startup actions plugin requires version 5.1.8, or something like that. I can't get it to work in the current version. In completely unhelpful new, it works in the prerelease.
Duarte Farrajota Ramos
Mar 11, 2015, 9:03:16 PM3/11/15
to tiddl...@googlegroups.com
Hahah those random moments of enlightenment are really satisfying, a deep thanks for your time and patience.
In the meantime I've been struggling to get this working properly on my (non-tiddlywiki) home page first, and managed to make it work in my fairly simple landing page albeit with a slightly different solution I found here.
Check it out at www.duarteramos.pt/ I find this code a bit cleaner to use because it is easier to maintain and add more images to, since all you have to do is change the "totalCount" number:
I changed it a bit from the original to account for numbers padding since I plan to have more than ten images.
I wonder if something similar could be achieved inside tiddlywiki
In the meantime I've been struggling to get this working properly on my (non-tiddlywiki) home page first, and managed to make it work in my fairly simple landing page albeit with a slightly different solution I found here.
Check it out at www.duarteramos.pt/ I find this code a bit cleaner to use because it is easier to maintain and add more images to, since all you have to do is change the "totalCount" number:
<html>
<head>
<script type="text/javascript">
var totalCount = 10;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
// Number padding
function pad(n) {
return (n < 10) ? ("0" + n) : n;
};
var pnum = pad(num)
document.body.background = 'path/to/image'+pnum+'.jpg';
}
</script>
</head>
<body>
Content
</body>
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>
I changed it a bit from the original to account for numbers padding since I plan to have more than ten images.
I wonder if something similar could be achieved inside tiddlywiki
Jed Carty
Mar 11, 2015, 9:50:39 PM3/11/15
to tiddl...@googlegroups.com
That looks like a good way to do it. It may be possible to include those scripts in a tiddlywiki using the $:/tags/RawMarkup tag. I am not sure if it would run the script when loading the page or not though.
The version I made counts the them, so it can work with an arbitrary set of urls. It picks a number between 1 and the total number of images and takes the image with that index out of the list of images. All you have to do is manually add the image urls. If you wanted to have all of the images in a single location with names 01.jpg, 02.jpg and so on you could give the total number and have it pick from them without having to add the new url. It may be a bit simpler to do that, but I like the flexibility of being able to use arbitrary image names and urls.
The version I made counts the them, so it can work with an arbitrary set of urls. It picks a number between 1 and the total number of images and takes the image with that index out of the list of images. All you have to do is manually add the image urls. If you wanted to have all of the images in a single location with names 01.jpg, 02.jpg and so on you could give the total number and have it pick from them without having to add the new url. It may be a bit simpler to do that, but I like the flexibility of being able to use arbitrary image names and urls.
Eric Shulman
Mar 11, 2015, 10:55:16 PM3/11/15
to tiddl...@googlegroups.com
On Wednesday, March 11, 2015 at 6:50:39 PM UTC-7, Jed Carty wrote:
That looks like a good way to do it. It may be possible to include those scripts in a tiddlywiki using the $:/tags/RawMarkup tag. I am not sure if it would run the script when loading the page or not though.
I'm not certain what happens when using nodejs with separate .tid files, but when TW5 writes a standalone (single file) copy of your TiddlyWiki, everything tagged with $:/tags/RawMarkup is automatically "injected" directly into the "head" of the file just before the closing </head> marker. If you put <script>...</script> in a tiddler with that tag is will be invoked at load time... and because it's in the head of the file, it runs before anything else, even the TWCore initialization.
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
"Inside TiddlyWiki: The Missing Manual"
Note: the IndieGogo funding campaign has ended,
but direct fundraising continues below...
YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
Duarte Farrajota Ramos
Mar 12, 2015, 12:22:20 PM3/12/15
to tiddl...@googlegroups.com
Hi Eric, that sounds really interesting, and on the right way to accomplish what I set out to, so if I were to place this in a tiddler tagged with $:/tags/RawMarkup
<script type="text/javascript">
var totalCount = 10;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
// Number padding
function pad(n) {
return (n < 10) ? ("0" + n) : n;
};
var pnum = pad(num)
document.body.background = 'path/to/image'+pnum+'.jpg';
}
</script>
where would I need to place this part to run in on every load?
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>
That's the part that is probably only possible in 5.1.8, right?
Also the document.body.background = 'path/to/image'+pnum+'.jpg'; would probably need some adjustments too, like
replacing with html body.tc-body and the rest of the background image style, right?
Jed Carty
Mar 12, 2015, 2:31:30 PM3/12/15
to tiddl...@googlegroups.com
If you are going to use javascript there shouldn't be any trouble with the current version. The only place you can put raw javascript is in the head using $:/tags/RawMarkup, so just try making a tiddler with both scripts and tag it with $:/tags/RawMarkup and see what happens.
The only reason that my version doesn't work in 5.1.7 is because I am just using wikitext.
The only reason that my version doesn't work in 5.1.7 is because I am just using wikitext.
Eric Shulman
Mar 12, 2015, 3:34:23 PM3/12/15
to tiddl...@googlegroups.com
On Thursday, March 12, 2015 at 11:31:30 AM UTC-7, Jed Carty wrote:
If you are going to use javascript there shouldn't be any trouble with the current version. The only place you can put raw javascript is in the head using $:/tags/RawMarkup, so just try making a tiddler with both scripts and tag it with $:/tags/RawMarkup and see what happens.
In this particular use-case (i.e, setting the background image at load time), tagging *both* scripts with RawMarkup has a subtle twist: "document.body" *does not yet exist* when the <head> of the document is processed. While you can *define* the ChangeIt(...) function in the head, but you can't invoke it until document.body has actually been created. To work around this, while still using RawMarkup for both script pieces, you can invoke the ChangeIt() function from within an "event listener" that waits for the "load" event to complete... .like this:
<script>
window.addEventListener("load", ChangeIt, false);
</script>
Duarte Farrajota Ramos
Mar 12, 2015, 6:54:50 PM3/12/15
to tiddl...@googlegroups.com
Ok, finally some level of success, I managed to make it work more or less as intended using Jed Carty's random value plugin but with a slightly modified workflow.
I imported the mentioned plugin but used it directly in the CSS tiddler like this:
Only problem I found is number padding, could your plugin be modified to account for number padding?
I mean generating numbers like 01 02 03 04 instead of 1 2 3 4?
It still only changes on button press, which is a shame, now if only there was a method to call
I imported the mentioned plugin but used it directly in the CSS tiddler like this:
body.tc-body {background: url("media/backgrounds/background<$view field="value"/>.jpg") no-repeat center center fixed;
background-size: cover; height: 100%;}
<$button>
<$action-randval $step=01 $field=value $lower=00 $upper=18/>
Change Background
</$button>
Only problem I found is number padding, could your plugin be modified to account for number padding?
I mean generating numbers like 01 02 03 04 instead of 1 2 3 4?
It still only changes on button press, which is a shame, now if only there was a method to call
<$action-randval> on load...
Is this possible with 5.1.8, or by using any special tag?
Jed Carty
Mar 12, 2015, 7:23:00 PM3/12/15
to tiddl...@googlegroups.com
Yes, that wouldn't be a big change. I have that working in the action-incement widget so it shouldn't be any trouble. I will see about doing that now. And the startup actions plugin will work in 5.1.8, and it may be part of the core, so actions on start up will be easy to do soon.
Jed Carty
Mar 12, 2015, 7:50:35 PM3/12/15
to tiddl...@googlegroups.com
Ok the plugin is updated so you can add a string prefix or give a length for zero padding. http://inmysocks.tiddlyspot.com/#RandVal%20Plugin
Duarte Farrajota Ramos
Mar 12, 2015, 8:40:45 PM3/12/15
to tiddl...@googlegroups.com
Wow, that was quick, works like a charm Jed, many many thanks for all your trouble, this is really great.
Check it out here www.duarteramos.pt/home.html
Now the website is still really empty, no content actual content yet and still needs some theme tweaks.
Do you know how to customize/add a background color to the sidebar?
Now I have to look into that startup plugin to see if I can make it randomize automatically
Again many thanks for this :)
Check it out here www.duarteramos.pt/home.html
Now the website is still really empty, no content actual content yet and still needs some theme tweaks.
Do you know how to customize/add a background color to the sidebar?
Now I have to look into that startup plugin to see if I can make it randomize automatically
Again many thanks for this :)
Duarte Farrajota Ramos
Mar 12, 2015, 10:14:11 PM3/12/15
to tiddl...@googlegroups.com
Very nice, working like a charm with the tartup actions plugin, now randomizing with every page load, check it out: www.duarteramos.pt/home.html
Added some preliminary content, now I only need to tweak theme colors and find a way to add a colored background to the sidebar to improve visibility.
Once again many thanks for all your work, your plugins are wonderful life savers! :)
Added some preliminary content, now I only need to tweak theme colors and find a way to add a colored background to the sidebar to improve visibility.
Once again many thanks for all your work, your plugins are wonderful life savers! :)
Duarte Farrajota Ramos
Mar 14, 2015, 6:39:34 PM3/14/15
to tiddl...@googlegroups.com
Hey Jed, sorry o bother again, is there any limitation in your random number generator plugin? There seems to be a some sort of problem when invoked from a different tiddler where the field is stored.
I decided to put an additional button to manually swap out the background image in the "Menu" tiddler that shows up in the sidebar tabs, but when invoked from a button there it only generates one non-random number (always the same) and then stops working.
The same button works quite well in the "$:/DPFR/Styles" tiddler where the field it writes to is stored, and from the "$:/DPFR/Randomize background" where it is invoked by the startup actions plugin.
Did I miss anything, did I do something wrong, or is there some sort of bug or limitation?
Check it out here, all relevant tiddlers are open www.duarteramos.pt/home.html
Also on a side note, since the random number plugin writes to a field it triggers whatever tracks changes in tiddlywiki, prompting the user for saving when trying to leave or refresh the page.
Is there a way to disable the exit or saving confirmation in tiddlywiki, or perhaps write the field to some sort of temporary tiddler that doesn't trigger changes or need for saving?
Thanks again
I decided to put an additional button to manually swap out the background image in the "Menu" tiddler that shows up in the sidebar tabs, but when invoked from a button there it only generates one non-random number (always the same) and then stops working.
The same button works quite well in the "$:/DPFR/Styles" tiddler where the field it writes to is stored, and from the "$:/DPFR/Randomize background" where it is invoked by the startup actions plugin.
Did I miss anything, did I do something wrong, or is there some sort of bug or limitation?
Check it out here, all relevant tiddlers are open www.duarteramos.pt/home.html
Also on a side note, since the random number plugin writes to a field it triggers whatever tracks changes in tiddlywiki, prompting the user for saving when trying to leave or refresh the page.
Is there a way to disable the exit or saving confirmation in tiddlywiki, or perhaps write the field to some sort of temporary tiddler that doesn't trigger changes or need for saving?
Thanks again
On Thursday, 12 March 2015 23:50:35 UTC, Jed Carty wrote:
Jed Carty
Mar 14, 2015, 10:22:00 PM3/14/15
to tiddl...@googlegroups.com
As far as the weird non-random behavior I hadn't run into it before. It seems to be writing to the field, but it always picks the same number. There shouldn't be any limitation like that, it works as expected in all the other tests I have tried. I will look into it. It is a straightforward use of the built in javascript random number generator. There may be some conditions where the rng isn't actually random. I will look into it later.
To prevent the wiki from wanting to save you should have the field being changed in a tiddler with a name starting with '$:/state/' or '$:/temp/', tiddlers with names that start with either of those don't trigger the saving reminder stuff.
For people who know javascript:
I really doubt it is the problem, but is there any problem in the prerelease that would affect the rng? or conditions where the rng would always return the same value?
To prevent the wiki from wanting to save you should have the field being changed in a tiddler with a name starting with '$:/state/' or '$:/temp/', tiddlers with names that start with either of those don't trigger the saving reminder stuff.
For people who know javascript:
I really doubt it is the problem, but is there any problem in the prerelease that would affect the rng? or conditions where the rng would always return the same value?
Duarte Farrajota Ramos
Mar 14, 2015, 10:45:42 PM3/14/15
to tiddl...@googlegroups.com
Thanks, take your time, no rush.
The '$:/state/' works as expected, the wiki no longer prompts the user for saving on every page refresh, which is great.
That further exposes the weird behavior though, now it only truly randomizes the field on page refresh via startup actions, or through the button on the $:/state/ tiddler.
All other buttons generate one single number. If you edit that tiddler the number generated changes once until page is refreshed or the tiddler edited.
Anyway, for now it works where it matters which is on page load. Many thanks for your help :)
The '$:/state/' works as expected, the wiki no longer prompts the user for saving on every page refresh, which is great.
That further exposes the weird behavior though, now it only truly randomizes the field on page refresh via startup actions, or through the button on the $:/state/ tiddler.
All other buttons generate one single number. If you edit that tiddler the number generated changes once until page is refreshed or the tiddler edited.
Anyway, for now it works where it matters which is on page load. Many thanks for your help :)
Jed Carty
Mar 17, 2015, 9:28:25 PM3/17/15
to tiddl...@googlegroups.com
I believe that the weirdness is at least related to what is discussed in this other thread. I am not sure how to prevent it from happening.
Duarte Farrajota Ramos
Mar 17, 2015, 9:48:22 PM3/17/15
to tiddl...@googlegroups.com
Hum I see, in my ingnoance that sounds like something related to the way tiddlywiki core itself handles macros and widgets, probably only something only Jeremy could change, not solvable through plugins alone, no?
Reply all
Reply to author
Forward
0 new messages