Help with assets

[ics.li...@gmail.com]

I am new to web page development. I have been able to use Nanoc to
build my first web site, but am having trouble with assets. I have a
jpg that I want to place on a web page. I put the jpg file in the
assets folder, and used <a img src="/assets/my.jpg">, but I am getting
compile errors. Could someone give me a hand in how assets are used?

Thanks

[Denis Defreyne]

On 30 Sep 2008, at 05:10, ics.li...@gmail.com wrote:

> I am new to web page development. I have been able to use Nanoc to

> build my first web site, but am having trouble with assets. [..]

> Could someone give me a hand in how assets are used?

Hi,

Assets are very similar to pages. A page consists of a directory with
a content and a meta file, and so does an asset. So, if you have a
file named "mycoolpicture.png" and you want to make it an asset, you
put it into a directory named "mycoolpicture" inside the "assets"
directory, along with a file named "mycoolpicture.yaml".

The YAML meta file can contain two attributes: "binary", which is true
or false depending on whether it's a textual asset or not (which
determines the kind of filters you can use on it), and "filters",
which is a list of filters to run on the asset.

A really quick example:

~% nanoc cs assets_test
~% cd assets_test
~/assets_test% mkdir assets/mycoolpicture
~/assets_test% touch assets/mycoolpicture/mycoolpicture.yaml
~/assets_test% cp ~/somepic.png assets/mycoolpicture/mycoolpicture.png

If you only want to copy the file from the assets directory into the
output directory, set binary to true and make sure the list of filters
is empty, like this:

# Just copy it to the output directory
filters: []
# This is a binary file, not a textual file
binary: true

And of course you can then compile the site:

~/assets_test% nanoc co
Compiling site...
create [0.00s] output/index.html
create [0.01s] output/assets/mycoolpicture.png
Site compiled in 0.02s.

If you don't filter an asset, though, it may be faster to simply
directly store the assets in the output directory. Copying an asset
from assets/ to output/ takes time, especially when it's large (and
filtering an asset takes even longer) so this will result in a speed-
up. Just make sure you don't accidentally delete everything in the
output directory then. :)

Hope this helps!

Denis

--
Denis Defreyne
denis.d...@stoneship.org

[Jayson Williams]

Tremendous help. Thanks.
Does nanoc come with any asset filters, like the text filters?

Jayson

[Denis Defreyne]

On 30 Sep 2008, at 14:06, Jayson Williams wrote:

> Does nanoc come with any asset filters, like the text filters?

You can use the textual filters for any non-binary assets (such as CSS
files).

nanoc comes with a single binary filter (I know, it's not a lot) named
image_science_thumbnail, which creates a thumbnail version of the
asset (which obviously only works when it's an image). This filter
requires a "thumbnail_size" attribute to be set, which contains the
max width or height in pixels of the thumbnail.

It is possible to write your own binary filters. I've explained how to
do so at <http://nanoc.stoneship.org/help/manual/chapter-3/#writing-binary-filters
>. It's probably also a good idea to take a look at the source of
Nanoc::BinaryFilters::ImageScienceThumbnail so you can use this binary
filters as a template for your own filters.

I just realised that the image_science_thumbnail filter is not
documented at all... will fix that.

Regards,

[Ale Muñoz]

I also keep some sample filters for nanoc in my GitHub repo:

http://github.com/bomberstudios/nanoc_extensions/tree/master/filters

They are (slightly) documented at
http://github.com/bomberstudios/nanoc_extensions/tree/master/README.markdown

As Denis said, check the nanoc docs. Also, the nanoc source is a nice
place to learn about filters : )

--
Ale Muñoz
http://sofanaranja.com
http://bomberstudios.com