How to use fit(x,y) with stream entries

Created 6 years ago by emergingdzns

I'm trying to put together a slideshow tool to display a bunch of slideshows on one page of a site. But I'm having trouble thumbnailing the images. I have used the streams plugin to create a stream called galleries in the namespace called "crg". I have a field called "photo" in the stream. I uploaded a pile of photos to the stream. In my page content I have put this in:

<div class="gallery-holder" data-gallery="upper_dining_level">
    {{ gallery('upper_dining_level',entries('crg', 'galleries').where('group','upper_dining_level').get(),agent_is_mobile())|raw }}
</div>

I've also created a plugin in my theme that looks like this:

<?php namespace Crg\PheventsTheme;

use Anomaly\Streams\Platform\Addon\Plugin\Plugin;
use Anomaly\Streams\Platform\Support\Decorator;
use Anomaly\Streams\Platform\Model\Crg\CrgGalleriesEntryModel;

class PheventsThemePlugin extends Plugin
{
    public function getFunctions()
    {
            new \Twig_SimpleFunction(
                'gallery',
                function ($gallery,$entries,$isMobile=false) {
                    $template = '';
                    if ($isMobile === true) {
                        foreach($entries as $entry) {
                            $template .= $entry->gallery_photo->url."<br>";
                        }
                    } else {
                        $template .= '<ul class="thumbs" id="'.$gallery.'_gallery">';
                        foreach($entries as $entry) {
                            $template .= '<li data-thumb="'.$entry->photo->url().'"><img src="'.$entry->photo->url().'"></li>';
                        }
                        $template .= '</ul>';
                    }
                    return $template;
                }
            ),
        ];
    }
}

This all works great. However, the issue I'm having is that the photos are all different sizes and ratios. What I WANT to do is use fit(800,480) for the images, but I get errors that fit isn't a valid function for the twig plugin file. I had the understanding that by using the image field type I could then do $entry->photo->fit(800,480)->url() in order to make sure that really tall images will resize down to be no more than 480px tall so that the gallery js I'm using can center the image.

What am I missing?

emergingdzns — 6 years ago

I also tried just doing this in the page code instead of using the plugin:

    <ul class="thumbs" id="upper_dining_level_gallery">
    {% for entry in entries('crg', 'galleries').where('group','upper_dining_level').get() %}
        <li data-thumb="{{ entry.photo.make().fit(168,100).url() }}"><img src="{{ entry.photo.make().fit(808,480).url() }}"></li>
    {% endfor %}
    </ul>

After trying this and clearing views, assets and cache, the slideshow now has cropped images, not resized. I need it to resize the tall images down to fit inside the ratio for the landscape space. I don't want it to trim off the top or bottom. It just needs to shrink to fit.

Link

emergingdzns — 6 years ago

Argh. Ok so I found that resize(null,100) and resize(null,480) works pretty well but only if I do this in the twig code. The plugin won't do the resize function either.

Link

william — 6 years ago

@emergingdzns try widen() and heighten()

http://image.intervention.io/api/widen
http://image.intervention.io/api/heighten

Link

ryanthompson — 6 years ago

Looks like you're making headway but keep in mind that you still need to make an image instance from a file in API too - so it might be like $entry->file_field_example->make()->resize(null, 400)->path();

Link