Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
documented support for html thumbs
  • Loading branch information
Alan Luo committed Jul 26, 2017
1 parent 14545b4 commit 44af003
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 2 deletions.
52 changes: 51 additions & 1 deletion README.md
Expand Up @@ -104,4 +104,54 @@ Let's break down what each attribute does.
- `Image`: this is the thumbnail that's shown on the front page. These images are stored in `assets/img/thumb`.
- `Tags`: these are used for organization on the front page. Any tags which are not primary tags will automatically get added to the search box on the front page.
- `Robots`: for `<meta>`
- `Template`: specifies that the page should use `project.twig`. Only change if you want to make a certain page special.
- `Template`: specifies that the page should use `project.twig`. Only change if you want to make a certain page special.

**Dynamic HTML Thumbnails***

You can also make dynamic HTML thumbnails, as shown in `p14.md` of the demo. Enabling this for a project will cause the thumbnail on the project page to be rendered as a block of HTML rather than an image.

![thumb gif](./previews/gif5.gif)

To do this, simply:

- Select a project you'd like to enable this for. Let's call it `myproject.md`.
- In `myproject.md`, set `Image` to `none`.
- Create a file called `myproject-content.md` and place all the HTML you want to be inserted in that file.

For instance, this is the example shown on the dummy website:

```
~~~~~ p14.md ~~~~~~~~~~
---
Title: Big Project
Description: Another long description. Blah.
Date: 2017/04/10
Image: none
...
---
~~~~p14-content.md~~~~~
<style type="text/css">
#mycontent {
padding:1em;
}
#contentcanvas {
border:1px solid black;
width:100%;
}
</style>
<p id="mycontent">You can also make dynamic HTML thumbnails.</p>
<canvas id="contentcanvas" width="100" height="100"></canvas>
<script>
var contentcanvas = document.getElementById("contentcanvas");
var cctx = contentcanvas.getContext('2d');
function drawContent() {
cctx.fillStyle="hsl("+((Date.now()*0.1)%360)+",50%, 50%)";
cctx.fillRect(0, 0, contentcanvas.width, contentcanvas.height);
window.requestAnimationFrame(drawContent);
}
window.requestAnimationFrame(drawContent);
</script>
```
22 changes: 22 additions & 0 deletions content/projects/p14-content.md
@@ -0,0 +1,22 @@
<style type="text/css">
#mycontent {
padding:1em;
}
#contentcanvas {
border:1px solid black;
width:100%;
}
</style>
<p id="mycontent">You can also make dynamic HTML thumbnails.</p>
<canvas id="contentcanvas" width="100" height="100"></canvas>

<script>
var contentcanvas = document.getElementById("contentcanvas");
var cctx = contentcanvas.getContext('2d');
function drawContent() {
cctx.fillStyle="hsl("+((Date.now()*0.1)%360)+",50%, 50%)";
cctx.fillRect(0, 0, contentcanvas.width, contentcanvas.height);
window.requestAnimationFrame(drawContent);
}
window.requestAnimationFrame(drawContent);
</script>
2 changes: 1 addition & 1 deletion content/projects/p14.md
Expand Up @@ -2,7 +2,7 @@
Title: Big Project
Description: Another long description. Blah.
Date: 2017/04/10
Image: img14.jpg
Image: none
Robots: noindex,nofollow
Tags: art pineapples
Template: project
Expand Down
Binary file added previews/gif5.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/attache/js/index.js
Expand Up @@ -35,6 +35,7 @@ $("#iconDownn").click(function() {
$('div.toInsert').each(function() {
var contentid = $(this).attr("data-whichparent");
var str = contentid.substring(0, contentid.length-8);
console.log(str);
$(this).insertAfter($('span.insertAnchor[data-isparent="'+str+'"]'));
});
//preprocessing steps
Expand Down

0 comments on commit 44af003

Please sign in to comment.