Thumbnail is not working,

Tried to create thumbnails for my gallery, pages/01.gallery, but i coudn't make it work, is there anything wrong with my code ?
{% for portfolio in page.header.images %}
<li>
<a class="thumb" name="leaf" href="{{page.media[portfolio.image].url}}" title="First Photo">
{{ page.media[portfolio.image].thumbnail('default').display('thumbnail').html('Sample Image') }}
</a>
<div class="caption">
<div class="download">
<a href="{{ page.media[portfolio.image].url }}">Download Original</a>
</div>
<div class="image-title">Title #0</div>
<div class="image-desc">Description</div>
</div>
</li>
{% endfor %}

Did you provide a thumbnail file in the format: my_original.jpg.thumb.jpg assuming the regular image is called my_original.jpg ?

Then you would access this via:

{{ page.media['my_original.jpg'].thumbnail.html }}

Also you don't actually need to provide a thumbnail, you can create one dynamically with the media functions:

{{ page.media['my_original.jpg'].cropResize(100,100).html }}

i thought page.media[portfolio.image].thumbnail('default').display('thumbnail').html('Sample Image') }}
is sufficient to make a thumbnail, (didn't find any documentation) and thanks, i followed your second method and it worked.

How to make all the cropped images same size, what if some images has different aspect ratio ?

Documentation for all the media methods is here. You might want to look at cropZoom