Image Preview on the Form

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $10.00

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Let's render a thumbnail on the show page too. The size here is restricted to a width of 250. Copy the first filter, paste, and call this one, how about, squared_thumbnail_medium. Set the size to 500 by 500.

liip_imagine:
... lines 2 - 5
filter_sets:
... lines 7 - 16
squared_thumbnail_medium:
filters:
thumbnail:
size: [500, 500]
mode: outbound
allow_upscale: true
... lines 23 - 49

Copy the name and this time go into show.html.twig. Add the |imagine_filter() and paste!

... lines 1 - 4
{% block content_body %}
<div class="row">
<div class="col-sm-12">
<img class="show-article-img" src="{{ uploaded_asset(article.imagePath)|imagine_filter('squared_thumbnail_medium') }}">
... lines 9 - 25
</div>
</div>
... lines 28 - 78
{% endblock %}
... lines 80 - 86

Reload! It works! The first time it has the resolve in the URL and is handled by a Symfony route & controller. The second time, it points directly to the file that was just saved. Awesome!

Adding an Image Preview to the Form

While we're kicking butt, go back to the article admin section and click to edit the article we've been working on. Hmm, it's not obvious that this article has an image attached... or what it looks like. We need a little image thumbnail next to this field.

We got this. Open the form template templates/article_admin/_form.html.twig. Let's think: to render an image, we could create a form theme that automatically makes the form_row() function render an image preview for file fields. That's cool. Or, we can keep it simple and do it right here.

Create a <div class="row"></div> and another <div class="col-sm-9"><div> inside to set up a mini grid. Move the file field here. Now add a div with class="col-sm-3": this is where we'll render the image... if there is one.

{{ form_start(articleForm) }}
... lines 2 - 5
<div class="row">
<div class="col-sm-9">
{{ form_row(articleForm.imageFile, {
attr: {
'placeholder': 'Select an article image'
}
}) }}
</div>
<div class="col-sm-3">
... lines 15 - 17
</div>
</div>
... lines 20 - 38
{{ form_end(articleForm) }}

To do that, we need the Article object. Copy the image path logic from the homepage and then go find the controller for the admin section: ArticleAdminController. When we render the template - this is in the new() action - we're only passing the form variable. In edit(), we're doing the same thing. We could add an article variable here - that's a fine option. But, we don't need to.

Back in the template, we can say {% if articleForm.vars.data %} - that will be the Article object - then .imageFilename. If we have an image filename, print <img src="{{ }}"> and paste. Replace article with articleForm.vars.data. And yes, I should add an alt attribute - please do that! Set the height to 100, because the actual thumbnail is 200 for quality reasons.

{{ form_start(articleForm) }}
... lines 2 - 5
<div class="row">
... lines 7 - 13
<div class="col-sm-3">
{% if articleForm.vars.data.imageFilename %}
<img src="{{ uploaded_asset(articleForm.vars.data.imagePath)|imagine_filter('squared_thumbnail_small') }}" height="100">
{% endif %}
</div>
</div>
... lines 20 - 38
{{ form_end(articleForm) }}

Try it! Refresh and... yes! To make sure we didn't break anything, try creating a new article. Whoops... we broke something!

Impossible to access attribute imageFilename on a null variable

Ah, we need to be careful: articleForm.vars.data may be null on a "new" form - it depends how you set it up. The easiest fix is to add |default. It's kinda weird... when you add |default, it suppresses the error and just returns null if there were any problems, which, for the if statement, is the same as false. It looks weird, but works great. Try it. All better.

{{ form_start(articleForm) }}
... lines 2 - 5
<div class="row">
... lines 7 - 13
<div class="col-sm-3">
{% if articleForm.vars.data.imageFilename|default %}
<img src="{{ uploaded_asset(articleForm.vars.data.imagePath)|imagine_filter('squared_thumbnail_small') }}" height="100">
{% endif %}
</div>
</div>
... lines 20 - 38
{{ form_end(articleForm) }}

Next, we have a real upload system (yay!) but our article data fixtures are broken: they're just setting imageFilename to a random filename that won't actually exist in the uploads/ directory. How can we fix that? By using our file upload system inside the fixtures! Well, at least, sort of.

Leave a comment!

  • 2020-03-11 Victor Bocharsky

    Hey Charlotte,

    Yes, it should be compatible, Symfony has "no BC breaks" promise in minor releases, so up to 4.4 it should work fine. Though, new versions of other libraries (not Symfony official packages) may have their own release strategy, so those package upgrades may lead to some BC breaks, you would need to check their changelogs to make sure it will work. And yes, if you want a newer version of Symfony instead of that we locked in composer.json/composer.lock files - you need to do some manual steps to upgrade it. Btw, in case you're interesting in upgrading - we have a separate screencast about it here:
    https://symfonycasts.com/sc...

    I hope this helps!

    Cheers!

  • 2020-03-10 Charlotte Moller

    Thanks. When I download the tutorial from scratch it is setup via composer.json to be limited to 4.2. Is this tutorial compatible with 4.3?

  • 2020-03-06 Victor Bocharsky

    Hey Charlotte,

    Yes, from the error you can see that to be able to install liip/imagine-bundle v2.3.0 you will need to be on Symfony 4.3 or higher at least. As I see from the output, your Symfony version is 4.2. So, the only solution to install the version you want is: update your current Symfony version at least to version 4.3. Otherwise, you need to stay on v2.2.x

    Cheers!

  • 2020-03-04 Charlotte Moller

    I am getting the following error when I install the liip/imagine-bundle. I can get around this error by installing liip/imagine-bundle 2.2.0 instead of 2.3.0 but then I run into the error reported by others of "Unexpected "apply" tag (expecting closing tag for the "block" tag defined near line 2)." in the edit article page

    composer require liip/imagine-bundle
    Using version ^2.3 for liip/imagine-bundle
    ./composer.json has been updated
    Loading composer repositories with package information
    Updating dependencies (including require-dev)
    Restricting packages listed in "symfony/symfony" to "4.2.*"
    Your requirements could not be resolved to an installable set of packages.

    Problem 1
    - Installation request for liip/imagine-bundle ^2.3 -> satisfiable by liip/imagine-bundle[2.3.0].
    - liip/imagine-bundle 2.3.0 requires symfony/asset ^3.4|^4.3|^5.0 -> no matching package found.

    Potential causes:
    - A typo in the package name
    - The package is not available in a stable-enough version according to your minimum-stability setting
    see <https: getcomposer.org="" doc="" 04-schema.md#minimum-stability=""> for more details.
    - It's a private package and you forgot to add a custom repository to find it

    Read <https: getcomposer.org="" doc="" articles="" troubleshooting.md=""> for further common problems.

    Installation failed, reverting ./composer.json to its original content.

  • 2019-12-10 Vladimir Sadicov

    Hey Paul Steven

    Sorry for so long answer, but Thanks to Ryan and another thread here, they figured out what's wrong here and it looks like fixed now. You should remove liip bundle and install it again, and it should work!

    Cheers!

  • 2019-12-10 donchev

    Great!!
    michellesanver merged 1 commit into liip:master from weaverryan:patch-1 2 hours ago

  • 2019-12-09 weaverryan

    Hey donchev!

    AWESOME debugging and video. SUPER helpful. Something strange is definitely happening. I can't explain why swapping the bundle lines fixes the problem. However, I *do* recognize the issue and I believe this PR should fix it: https://github.com/liip/Lii...

    When you downgraded the bundle, you were downgrading to a version before they started using the apply filter. And the twig/twig version we ship with this bundle does not come with apply

    So, the short answer is that: downgrading to the old version of the bundle is the correct solution. When/if the PR is accepted, when you required LiipImagineBundle, you would then get that older version anyways (I believe) because composer would recognize that it is the only one compatible with the version of Twig. Of course, you can also upgrade twig/twig. But tutorial code *should* work out-of-the-box ;).

    Cheers!

  • 2019-12-08 donchev

    Hi weaverryan
    Here are the details:
    Win10 Pro x64 1809
    PHP 7.3.11

    But as far I see it's the bundle and imagine library that are causing the issue.
    Check this video that i made few minutes ago:
    https://youtu.be/LakFtYcRtEs

  • 2019-12-08 weaverryan

    Hey donchev!

    Wow, that is VERY odd - the bundle order should almost never matter :/. What version of PHP are you on? The downloaded start code works fine for me - so the PHP version is one of the only things I can think of.

    Cheers!

  • 2019-12-07 donchev

    Ok.
    For some reason if I move the LiipImagineBundle bundle before the TwigBundle in bundles.php - the error is gone.


    ...
    Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle::class => ['all' => true],
    Liip\ImagineBundle\LiipImagineBundle::class => ['all' => true],
    Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
    Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
    ...

  • 2019-12-07 donchev

    I am also getting this error on the edit page after installing liip\imagine bundle:
    Unexpected "apply" tag (expecting closing tag for the "block" tag defined near line 2).

    Started with the start project and followed the tutorial exactly as described.
    even without any configurations on the imagine bundle the error is still there.

    Any ideas?

  • 2019-10-28 Paul Steven

    Vladimir Sadicov

    The error was generated from the following Twig template in the Liip bundle: vendor/liip/imagine-bundle/Resources/views/Form/form_div_layout.html.twig

    On lines 2 & 18

  • 2019-10-28 Paul Steven

    Hi Vladimir Sadicov
    I downloaded the source code to follow along with the tutorial.
    My setup is as follows:

    PHP 7.2 although the composer.json file that came with the download has PHP 7.1.3 in its confog settings
    Symfony 4.2.3
    I installed the LiipImagineBundle 2.2 looking at my composer.json file.

    The liip_imagine.yaml file is also different from the tutorial as it only has the following pre-coded:

    *****************************************************************************

    # See dos how to configure the bundle: https://symfony.com/doc/cur...
    liip_imagine:
    # valid drivers options include "gd" or "gmagick" or "imagick"
    driver: "gd"

    *******************************************************************************

    Only by replacing 'apply' with 'block' was I able to proceed with the tutorial

  • 2019-10-28 Vladimir Sadicov

    Hey Paul Steven

    Interesting situation. However it's not a fix! Can you provide some information for investigation of this error?
    - does this error happens on course code?
    - exact version of LiipImagineBundle installed on your project?
    - installed php and symfony version?

    Cheers!

  • 2019-10-26 Paul Steven

    Okay I fixed the error by replacing the {% apply spaceless %} tag in the template with

    {% block spaceless %}

  • 2019-10-26 Paul Steven

    Unexpected "apply" tag (expecting closing tag for the "block" tag defined near line 2).

  • 2019-10-26 Paul Steven

    I keep getting this error:

    Twig_Error_Syntax








    in
    \vendor/liip/imagine-bundle/Resources/views/Form/form_div_layout.html.twig (line 2)





    {% block liip_imagine_image_widget %}
    {% apply spaceless %}
    {% if image_path %}
    <div>
    {% if link_url %}

    {% endif %}