How To Call A Image Manipulation With Grid

Question

I am trying to simply create a slider using Grid. The 'small' images would be the thumbs etc.

Have to say, I have worked on this for more then 2 hours trying to see what is up...but I am obviously hitting a block and missing something...maybe fresh eyes from someone else could help - thanks

Upload Directory: video_images
Image Manipulation: small
Grid Field Name: project_slideshow

Here is what I have but I cannot get this to load the 'small' image

                <div class="nomargin masonry-thumbs col-4" data-lightbox="gallery">
            {project_slideshow}
                <a href="{project_slideshow:slide_image}" data-lightbox="gallery-item">
                <img class="image_fade" src="{slide_image:small}">
                </a>
            {/project_slideshow}
            </div>

Here is the test page:

http://yourfishingbiz.com/index.php/main/video/this-is-a-test-video

Answer 1

For those in the future, if you're using Assets as your fieldtype, it has a different syntax to access image manipulations. Example code that works :

{home_slider}
<div class="hero__slide" style="background-image:url('{home_slider:background_image:url:large}')">
    <div class="hero__info">
        {home_slider:copy}
    </div>
</div>
{/home_slider}

The syntax for accessing is {thegridfield:theimagefield:url:manipulationName}. That will output the absolute URL to the manipulated file.

See docs here