mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-24 22:33:16 +00:00
Code Issues Releases Wiki Activity

Replace big red introduction video with thumbnail

Browse Source 
Hopefully fixes #1547
This commit is contained in:
Jermolene 2015-03-22 17:35:37 +00:00
parent e00d417a31
commit 542372c722
5 changed files with 49 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
core/wiki/macros/youtube.tid Normal file
View File

@ -0,0 +1,15 @@
title: $:/core/macros/youtube
tags: $:/tags/Macro
\define youtube-thumbnail(link,width:"280",height:"157",image)
<$link to="""$link$""">
<div class="tc-youtube-wrapper">
<div class="tc-youtube-thumbnail">
[img width="$width$" height="$height$" [$image$]]
</div>
<div class="tc-youtube-play-symbol">
{{$:/core/images/video}}
</div>
</div>
</$link>
\end

6
editions/tw5.com/tiddlers/hellothere/HelloThere.tid
View File

@ -7,9 +7,9 @@ type: text/vnd.tiddlywiki
Welcome to ~TiddlyWiki, a versatile note-taking web application you can download for free, store wherever you like and customise however you wish. Use it to capture, organise and share your notes in ways that word processors and other note-taking tools cannot.
<$button class="tc-btn-big-green" to="Introduction Video" style="background:red;">
{{$:/core/images/video}} Watch a video introduction
</$button>
<div style="float:right;">
<<youtube-thumbnail link:"Introduction Video" image:"Introduction Video Thumbnail.jpg">>
</div>
~TiddlyWiki is designed to be non-linear, structuring content with stories, tags, hyperlinks, and other features. You can organise and retrieve your notes in ways that conform to your personal thought patterns, rather than feel chained to one preset organisational structure.

BIN
editions/tw5.com/tiddlers/images/Introduction Video Thumbnail.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

3
editions/tw5.com/tiddlers/images/Introduction Video Thumbnail.jpg.meta Normal file
View File

@ -0,0 +1,3 @@
title: Introduction Video Thumbnail.jpg
type: image/jpeg
tags: picture

28
themes/tiddlywiki/vanilla/base.tid
View File

@ -1647,6 +1647,34 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
display: inline-block;
}
/*
** YouTube macros
*/
.tc-youtube-wrapper {
position: relative;
display: inline-block;
}
.tc-youtube-thumbnail {
}
.tc-youtube-play-symbol svg,
.tc-youtube-play-symbol img {
width: 3em;
height: 3em;
fill: red;
}
.tc-youtube-play-symbol {
position: absolute;
top: 50%;
left: 50%;
margin-left: -1.5em;
margin-top: -1.5em;
}
/*
** Errors
*/