Thumbnailing with LiipImagineBundle

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

Go back to the homepage. We're rendering these images with a width and height of 100. But the image behind this is way bigger! That's wasteful: we don't want the user to wait to download these gigantic images, just to see the tiny thumbnail.

Hello LiipImagineBundle

Google for LiipImagineBundle and find its GitHub page. They have a bunch of docs right here... but most of the information actually lives over on Symfony.com. Click "Download the Bundle" to get there... and then I'll go back to the homepage - lots of good stuff here.

Start back on the Installation page. Copy the composer require line, find your terminal, paste and... go go go!

composer require liip/imagine-bundle

While we're waiting, head back over to the docs. Thanks to Flex, we don't need to enable the bundle or register the routes - that's automatic. Go back to the homepage of the docs... and click the "Filter Sets" link.

This bundle is pretty sweet. You start by creating something called a "filter set" and giving it a name - like my_thumb or whatever you want. Next, you tell the bundle which filters, or transformations, to apply when you use the my_thumb filter set. And there are a ton of them: you can change the size with the thumbnail filter, add a background, add border color, replace the image entirely with a cat gif - pretty much anything you can dream of. We'll just use the thumbnail transformation, but seriously - check out the full list.

Configuring the Filter Set

Let's go check on the install. Excellent! It's done. And the message is right on: it says we need to get to work in the new config file: liip_imagine.yaml. Go open that: config/packages/liip_imagine.yaml. Uncomment the root key to activate the bundle, leave the driver alone - it defaults to gd - and uncomment filter_sets.

liip_imagine:
# # valid drivers options include "gd" or "gmagick" or "imagick"
# driver: "gd"
#
# # define your filter sets under this option
filter_sets:
... lines 7 - 42

Let's create our first filter set called squared_thumbnail_small. We'll use this on the homepage to reduce the images down to 100 by 100. To do that, uncomment the filters key and I'll copy the thumbnail example from below, move it up here, and uncomment it.

liip_imagine:
... lines 2 - 5
filter_sets:
... lines 7 - 9
squared_thumbnail_small:
filters:
... lines 12 - 42

Set the size to 200 by 200 so it looks good on Retina displays. The mode: outbound is how the thumbnail is applied - you can also use inbound.

liip_imagine:
... lines 2 - 5
filter_sets:
... lines 7 - 9
squared_thumbnail_small:
filters:
thumbnail:
size: [200, 200]
mode: outbound
allow_upscale: true
... lines 17 - 42

And... I think we're ready to go! Copy the squared_thumbnail_small name and go into homepage.html.twig. To use this, it's so nice: |imagine_filter() and then the name.

... lines 1 - 2
{% block body %}
... lines 4 - 20
{% for article in articles %}
<div class="article-container my-1">
<a href="{{ path('article_show', {slug: article.slug}) }}">
<img class="article-img" src="{{ uploaded_asset(article.imagePath)|imagine_filter('squared_thumbnail_small') }}">
... lines 25 - 37
</a>
</div>
{% endfor %}
... lines 41 - 63
{% endblock %}

The Thumbnailing Process

Let's go try it! Watch the image src closely. Refresh! It includes the https://127.0.0.1 part, but that's not important. The path - /media/cache/resolve/squared_thumbnail_small/... blah, blah blah - looks like a path to a physical file, but it's not! This is actually a Symfony route and it's handled by a Symfony controller!

Check it out: at your terminal, run:

php bin/console debug:router

There it is! The first time we refresh, LiipImagineBundle generates this URL. When our browser tries to download the image, it's handled by a controller from the bundle. That controller opens the original image, applies all the filters - just a thumbnail in our case - and returns the transformed image. That's a slow operation: our browser has to wait for all of that to finish.

But, watch what happens when we refresh. Did you see it? The path changed! It was /media/cache/resolve - but the resolve part is now gone! This time, the image is not handled by a Symfony route. Look at your public/ directory: there is now a media/ directory with cache/squared_thumbnail_small/uploads/article_image/astronaut-...jpeg.

The full process looks like this. The first time we refreshed, LiipImagineBundle noticed that no thumbnail file existed yet. So, it created the URL that pointed to the Symfony route & controller. The page finished rendering, and our browser make a second request to that URL to load the image. That request was handled by the controller from the bundle which thumbnailed the image, saved it to the filesystem, and returned it to the user. That's slow.

But when we reloaded the page the second time, LiipImagineBundle noticed that the filename already existed and generated a URL directly to that real file. The request for that image was super fast.

Oh, also check out the .gitignore file. Thanks to the Flex recipe, we're already ignoring the public/media directory: we do not want to commit this stuff: it'll just regenerate if it's missing.

So, yea - it all kinda works perfectly!

Next, let's add another filter set for the show page and add an image preview to the article form.

Leave a comment!

  • 2020-05-18 Alex Beis

    Hi weaverryan !
    You are right! I took a look to the official nginx config docs from symfony.com and I changed the location like it says!
    I also tested it with .gif and it is working as expected!

    Thanks :)

  • 2020-05-18 weaverryan

    Hey Alex Beis!

    Ok, so you're correct that the URL /media/cache/resolve/squared_thumbnail_small/uploads/article_image/beaatles-5ebf1642097fb.gif is meant to be a URL that is handled by Symfony - not one that Nginx serves. Well, Nginx should proxy it through index.php, like any other URL. My guess is that it's the .gif ending that is confusing Nginx. Try putting the URL directly in your browser and removing the .gif extension. If you get a 404 - but it's from *Symfony* (not Nginx), then we'll know the extension is the problem :). I would compare your Nginx config with the official one from the docs - https://symfony.com/doc/cur... - it's written specifically to make Nginx look first for a physical file and then fallback to index.php if none is found (which is exactly what we want). The /media directory should not need any special handling.

    Let me know what you find out!

    Cheers!

  • 2020-05-18 Alex Beis

    Hi! I'm getting a 404 from nginx, when calling the controller.
    The problem is that, when calling the url :

    /media/cache/resolve/squared_thumbnail_small/uploads/article_image/beaatles-5ebf1642097fb.gif

    That is something that can understand, because Nginx is trying to find a static file, that obviously it isn't.

    So I'm trying to allow to that prefix (/media/) on Nginx configuration, that it serves as php file and not as static file with no luck.

    That is my Nginx .conf:

    server {
    root /var/www/html/upload-files/public/;
    index index.php index.html index.htm app_dev.php;

    server_name uploadfiles.test;

    location / {
    try_files $uri /index.php$is_args$args;

    }

    ## Images
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires max;
    log_not_found off;
    access_log off;
    add_header ETag "";
    }

    location @rewrite {
    rewrite / /index.php;
    }

    ## Execute PHP scripts
    location ~ \.php$ {
    add_header X-Frame-Options SAMEORIGIN;
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";
    add_header X-UA-Compatible 'IE=Edge,chrome=1';
    add_header X-Processing-Time $request_time;
    try_files $uri =404;
    fastcgi_pass fpm:9000;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
    }
    }


    Things that I have tried with no luck.(Obviously once at time)

    location /media/ { } # Allow access to static files in /media/

    location /media/.*\.(js|css|png|jpg|jpeg|gif|ico)$ {


    add_header X-Frame-Options SAMEORIGIN;
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";
    add_header X-UA-Compatible 'IE=Edge,chrome=1';
    add_header X-Processing-Time $request_time;
    try_files $uri =404;
    fastcgi_pass fpm:9000;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
    } # media liip bundle files

    location /media {
    add_header X-Frame-Options SAMEORIGIN;
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";
    add_header X-UA-Compatible 'IE=Edge,chrome=1';
    add_header X-Processing-Time $request_time;
    try_files $uri =404;
    fastcgi_pass fpm:9000;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
    } # media liip bundle files

    location /media {

    } # media liip bundle files

    Any idea how to allow that routes without getting a 404 from Nginx?

  • 2020-04-13 Vladimir Sadicov

    Yeah, it's because liip/imagine-bundle dropped support of Symfony 4.2 in latest release, so that's why I advised to use version 2.2

    Anyways, we are working on fixing it on our tutorial code, so thank you very much for report, stay tuned!

    Cheers!

  • 2020-04-13 Beniamin Tolan

    did not work for me. in my symfony 5 the probem its solved. Thanks. In this project force the instalation in the json file and composer update and it worked.

  • 2020-04-13 Vladimir Sadicov

    Hey Beniamin Tolan

    Try to install bundle with composer require liip/imagine-bundle:^2.2, i think it might help

    Cheers!

  • 2020-04-10 Beniamin Tolan

    I have this problem when installing liip

    composer require liip/imagine-bundle
    You are running Composer with SSL/TLS protection disabled.
    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-09-13 weaverryan

    Hey Krzysztof Krakowiak!

    Yea - that's more-or-less what I would have done. I typically prefer Intervention (http://image.intervention.io/) when I need to do direct image manipulations, but that's a minor detail. It's unfortunate the bundle doesn't have a nice interface for these direct manipulations... I think it just hasn't been its main use-case.

    Happy you got it working either way!

    Cheers!

  • 2019-09-12 Krzysztof Krakowiak

    Hi Ryan, it is pretty bad that I cannot use that bundle, I have tested al different paths, and nothing works, Flysystem do not have method to return full path and ImagineBundle has no option to accept file instead of path.

    My current solution:




    /**
    * @Route("/{asset}/photo/view/{id}/thumb", name="private_photo_view_thumb")
    */
    public function photoViewThumb(UploadedFile $file, FileUploader $uploader)
    {



    if (!$uploader->has('thumbs/'.$file->getPath())) {
    $imagine = new \Imagine\Gd\Imagine();
    $image = $imagine->open(dirname(dirname(dirname(__DIR__))).'/var/uploads/'.$file->getPath());
    $size = new \Imagine\Image\Box(300, 300);
    $mode = \Imagine\Image\ImageInterface::THUMBNAIL_OUTBOUND;
    $thumbnail = $image->thumbnail($size, $mode);
    $resourcePath = dirname(dirname(dirname(__DIR__))).'/var/uploads/thumbs/'.$file->getPath();
    $thumbnail->save($resourcePath);
    }


    $response = new StreamedResponse(function() use ($file, $uploader) {
    $outputStream = fopen('php://output', 'wb');
    $fileStream = $uploader->readStream('thumbs/'.$file->getPath(), false);
    stream_copy_to_stream($fileStream, $outputStream);
    });


    $response->headers->set('Content-Type', $file->getMimeType());


    return $response;
    }


  • 2019-09-11 weaverryan

    Hey Krzysztof Krakowiak!

    Hmm. Can you post a screenshot of the full stack trace? I'm not sure exactly which spot is causing the error. But... my guess is that the getUrlOfFilteredImageWithRuntimeFilters() method doesn't like what you're passing via $file->getPath()? Is that correct? A few things to get started:

    1) In theory, if you've configured ImagineBundle to *read* from Flysystem, then if you pass it a path like files/cygnus/cat1-jpg-5d778185db17f.jpeg it would know how/where to fetch that (e.g. it would get that from S3).

    2) If you need to write an endpoint that does all the thumbnailing manually (including saving the thumbnailed file back your storage and streaming the image to the user), ImagineBundle becomes a much less appealing option... because you're doing much of the work that *it's* supposed to do. But I'm not saying that you're do something wrong - not at all - you just have a more complex use-case. What I'm saying is that it may be even simpler to graph a more "utility-based" image manipulation library (i.e. a pure PHP lib that is good at manipulating images... and that's all - like Intervention) then, in your controller, read the source image from Flysystem, send it through Intervention, save it back through Flysystem, then serve it to your user. Your controller will look very *similar*, but instead of trying to ask ImagineBundle to thumbnail the file (which is just awkward... as its main use-case is not for you to do this directly in code, but to use the Twig filters) you would do it yourself.

    Let me know if this helps!

    Cheers!

  • 2019-09-10 Krzysztof Krakowiak

    How to do thumb generation in controller?

    All my uploaded images are private (I am using filesystem) and I cannot user filters in twig.

    I have tried few things like below:



    /**
    * @Route("/{asset}/photo/view/{id}/thumb", name="private_photo_view_thumb")
    */
    public function photoViewThumb(UploadedFile $file, FileUploader $uploader, FilterService $imagine)
    {

    // 2) Runtime configuration
    $runtimeConfig = [
    'thumbnail' => [
    'size' => [200, 200]
    ],
    ];

    $handler = $uploader->getHandler($file->getPath());

    $resourcePath = $imagine->getUrlOfFilteredImageWithRuntimeFilters(
    $file->getPath(),
    'squared_thumbnail_small',
    $runtimeConfig
    );

    $response = new StreamedResponse(function() use ($file, $uploader, $resourcePath) {
    $outputStream = fopen('php://output', 'wb');
    $fileStream = $uploader->readStream($resourcePath, false);
    stream_copy_to_stream($fileStream, $outputStream);
    });

    $response->headers->set('Content-Type', $file->getMimeType());

    return $response;
    }

    But this bundle cannot see my private files (stored in var folder)

    I am getting exception:


    Source image "files/cygnus/cat1-jpg-5d778185db17f.jpeg" not found.

    I do not understand why it needs path instead of file handler, and how I can set where these thumbs will be generated, mainly I need private thumbs too.

  • 2019-09-06 Victor Bocharsky

    Hey Eric,

    Looks like there're only 3 options that configure paths in the bundle: web_root, cache_prefix, and data_root. That's something you need to configure for your project.

    I hope this helps!

    Cheers!

  • 2019-09-05 Eric

    Hey Victor, thanks a lot for your fast reaction.
    Using the symfony server did solve the issue. But could you point me somewhere, where I can find a way to configure liip bundle with project in subdirectories? I already tried the section at the Symfony Liip Bundle Configuration Page but without any luck.

  • 2019-09-05 Victor Bocharsky

    Hey Eric,

    That's because you have the project in a subdirectory that's called "symfonyproject" in your case. I'd recommend you to use the "symfony serve" command or "bin/console server:run" command at least to start the built in server for this project. This way your project will be in the root directory, not in a subdirectory, and then it should work.

    Otherwise, you need to add more configuration for your liip config file to get it working in a subdirectory, i.e. override some options with proper paths manually. But when your project is in the the root directory - those paths are determined correctly automatically by the liip bundle.

    I hope this helps!

    Cheers!

  • 2019-09-05 Eric

    uploaded_asset(article.imagePath)|imagine_filter('squared_thumbnail_small') is not working as advertised. At least in my case (Sf 4.3 and Liip 2.1.0).
    The code example as shown in the video produces an image path as follows: http://localhost:8888/symfonyproject/public/media/cache/resolve/squared_thumbnail_small/symfonyproject/public/uploads/image.jpeg resulting in a broken image. The correct image path is http://localhost:8888/symfonyproject/public/media/cache/squared_thumbnail_small/image.jpeg

    The correct path is produced by article.imagePath|imagine_filter('squared_thumbnail_small'). As I'm a Symfony novice I haven't yet figured out how uploaded_asset() and imagine_filter() interfere, so any hint or help or solution is highly appreciated.

    EDIT

    I also noticed that in my /media/cache directory there is no /uploads subdirectory as seen in the video.

  • 2019-09-03 Diego Aguiar

    Thanks for sharing it Nicky Speight!

  • 2019-09-03 Nicky Speight

    Just in case anyone runs into the issue I had when thumbnail images are not showing and the folders are not generating automatically. My issue was the "gd" driver was mentioned in the video I actually didn't have this installed. I only found out as a red error appeared in the server output but not on the page. Installing it to PHP resolved my issue and files started appearing.

    (LINUX)

    sudo apt-get update

    sudo apt-get install php7.2-gd

  • 2019-06-26 Diego Aguiar

    Great! Thanks for sharing it to others

    Cheers!

  • 2019-06-26 adamsafr

    Hi Diego Aguiar ! I fixed this :)
    saw that guys have errors with thumbnails
    I attached my liip_imagine config file and dockerfile config in comment above if someone needs it

  • 2019-06-25 Diego Aguiar

    Hey adamsafr

    Check the permissions of the folder where you are trying to upload your images. Also, can you show me the error stack trace? I'm not sure about what's going on

    Cheers!

  • 2019-06-24 adamsafr

    Hello guys!
    I also had error in this episode, i've fixed it now.
    Try to open link in the new tab in browser and check if error exists.

    Main reasons of bug:
    - access rights - try to create "media" directory in "public" dir with 777 rights
    - incorrectly configured GD library - Imagine\Gd\Imagine::open method throws an exception

    Here is my working config

    liip_imagine:
    driver: 'gd'
    resolvers:
    default:
    web_path: ~
    filter_sets:
    cache: ~
    squared_thumbnail_small:
    filters:
    thumbnail: { size: [200, 200], mode: outbound, allow_upscale: true }
    loaders:
    default:
    filesystem:
    data_root:
    - '%kernel.project_dir%/public'

    Dockerfile:

    FROM php:7.3.6-fpm

    RUN apt-get update && apt-get install -y \
    git \
    wget \
    unzip \
    libzip-dev \
    libmcrypt-dev \
    libpng-dev \
    libpq-dev \
    zlib1g-dev \
    libfreetype6-dev \
    libjpeg62-turbo-dev \
    && curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer \
    && docker-php-ext-install \
    pdo \
    pdo_mysql \
    bcmath \
    zip

    RUN apt-get update \
    && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
    && docker-php-ext-install -j$(nproc) gd

    RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

  • 2019-05-22 Victor Bocharsky

    Hey Giacomo,

    I just tried to apply your filter and it works for me file. How did you apply that filter in templates? Do you use "assets()" Twig function as well? This way works for me fine:


    <img src="{{ asset('images/space-ice.png')|imagine_filter('thumbnail_homepagebiggerone') }}">

    But for me path to this image is the next:
    https://localhost:8000/media/cache/resolve/thumbnail_homepagebiggerone/images/space-ice.png

    At first, when the image has not been cached yet, and then, when it was cached, the path is:
    https://localhost:8000/media/cache/thumbnail_homepagebiggerone/images/space-ice.png

    Most probably the source path to the image is 404, so it causes 404 error after applying this filter as well. Please, show how you apply this filter in your HTML code.

    Cheers!

  • 2019-05-20 Giacomo Balloccu

    Yes, but becuase I needed a different type of thumbnail and I'm not following the course I'm just taking the things that I need and apply them to my project becuase I have developed with simfony for 2 months. Btw here it is:


    liip_imagine:
    filter_sets:
    thumbnail_homepagebiggerone:
    filters:
    thumbnail:
    size: [455,227]
    mode: outbound
    allow_upscale: true
    squared_thumbnail_small:
    filters:
    thumbnail:
    size: [200,200]
    mode: outbound
    allow_upscale: true

    It should be right following what you said in the tutorial

  • 2019-05-20 Victor Bocharsky

    Hey Giacomo,

    Hm, probably you have a different config? I mean the path is different in your config? Are you sure it should be "https://localhost:8000/media/cache/resolve/thumbnail_homepagebiggerone/uploads/article_image/prova.JPG"? Are you applying changes to your project? Or did you download the course code and start from start/ directory? Could you show your LiipImagineBundle config?

    Cheers!

  • 2019-05-19 Giacomo Balloccu

    Hi! I get 404, but the source is right:
    src="https://localhost:8000/media/cache/resolve/thumbnail_homepagebiggerone/uploads/article_image/prova.JPG"

    But I can see the bundle didn't created the directory in my public dir

  • 2019-04-04 ali nizar

    Hi,
    We are still waiting for the continuation of the course

  • 2019-03-25 weaverryan

    Hey Cryptoblob!

    Sorry for the slow reply. Hmm. So the key thing is this: when you open the broken image URL in a new browser and get the "404" error... what *exactly* does that error look like? Is it a Symfony 404 error with a big stacktrace (it should be) or is it just a generic 404 error from your web server. Also, does that broken URL have the word "resolve" in it or not (it should)?

    As you can see, there are a number of different possible ways things could be going wrong. Your web server could be intercepting these requests (thinking they are actual files), which should be processed by a Symfony controller so that the image can be created. Or, Symfony could be handling it, and something is going wrong. The fact it seems to work... then not work.. is a mystery. But we can start with these questions to dig in.

    Cheers!

  • 2019-03-21 Diego Aguiar

    Hey Peter Kosak Have you checked out this chapter? https://symfonycasts.com/sc...
    It's about handling absolute paths, I think you will be able to fix your problem after watching it, if that's not the case I may have to see your code (specially the part where you generate those paths) :)

  • 2019-03-21 Victor Bocharsky

    Hey Krzysztof,

    Are you talking about .htaccess in public/ directory? I suppose you use Apache web server, did you set up the public/ directory as your document root in Apache config? Do you have any symlinks in the actual path of your document root?

    It would be good if you could debug things a bit, what is the generated link to your thumb in the HTML? What is your actual path to the image in the file system? Can you find the thumbs in the file system?

    Cheers!

  • 2019-03-21 Peter Kosak

    did some digging and it looks like the URL is wrong:

    localhost
    http://127.0.0.1:8000/media/cache/resolve/thumbnail_gallery/images/gallery/f3fedf5f09646804f374858106d19bcc.jpeg

    live
    http://example.com/cb/public/media/cache/resolve/thumbnail_gallery/cb/public/images/gallery/f3fedf5f09646804f374858106d19bcc.jpeg

    but see that cb/public should not be there on live but because my root folder is cb/public thats why symfony somehow use it... I need to set somewhere in liip a root to be cb/public?

    When I remove second "cb/public" from url thumbnail will be generated

  • 2019-03-20 Peter Kosak

    sorry when I said on production I meant on godaddy live server,, it is working on localhost when environment is set to prod or dev but when deploying on live server (prod or dev environment) and refresh the page it wont create thumbnails

    this is an error on live server when setting env to dev

    Source image for path "cb/public/images/gallery/7d5701d922354c0d5267137297bf63cc.jpeg" could not be found

    when I set it to prod I obviously get 404 page so the issue is somewhere with the php settings but not sure where on godaddy as my gd is enabled memory is fine chmod is fine as well so I am not sure why is that file not created on live server

  • 2019-03-20 Diego Aguiar

    Hey Peter Kosak

    So it's working on dev but not on prod? This may sound silly but did you clear prod's cache? Are you overriding any configuration for prod environment?

  • 2019-03-19 Peter Kosak

    issue was memory limit - when increased it is working on development however when tested on production it is failing and not a single thumbnail image is created... folder not created, gd extension enabled, manually created folders and set permission to 777 and still nothing.... didnt dig deep but it is annoying to have these issues

  • 2019-03-19 Krzysztof Krakowiak

    I am running server through PHP Storm (PHP Build-in Server)

  • 2019-03-19 Krzysztof Krakowiak

    Hmm I am getting 404 for these thumbs. There was no folder created anywhere (suppose to?)

    Partially RESOLVED FOR DEV: I had to run server through bin/console server start

    Anyway On production I wont be able to do that, and seems that problem refers to Apache configuration, these requests do not go through index.php and return 404, not sure what I should change to avoid that

    it might refer to these lines in my .htaccess:
    # If the requested filename exists, simply serve it.
    # We only want to let Apache serve files and not directories.
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule ^ - [L]

    But it is stated that only if file exists, in this case file do not exists and this request should be processed by index.php, I am not sure why this do not work.

  • 2019-03-18 Cryptoblob

    Hi weaverryan sorry I probably should have been clearer.

    I'm getting a 404 error for all of my images, if I open the images in a new tab I still cant see it. When i change the config it just completely breaks and all the images break, its as if the media/cache isnt clearing or something. My images are stored in the public/images folder.

    If i was to change the 'thumbnail' to size [300,300] or anything else, it'll break. Just says 404 the file doesnt exist.

    Thanks

  • 2019-03-18 weaverryan

    Hey Cryptoblob!

    We can definitely help :). Can you describe what you mean by things "not working"? Are the thumbnails simply showing up as broken images? If you go directly to the thumbnail image src that's broken in a new browser tab, do you see the image? Or an error? What does your Twig code look like and where are the original images stored?

    Cheers!

  • 2019-03-16 Cryptoblob

    Im working on a different project and my filters just weren't working at all. So i deleted the media folder now everything is broken... how do i get the media folder back?

    EDIT: Nevermind i fixed it, i was using imagick instead of gd, i dont have imagick installed. Funnily enough my filters are also working now.

    Edit again.. : Not working again... can someone help please? here is my config


    liip_imagine:
    # valid drivers options include "gd" or "gmagick" or "imagick"
    driver: "gd"

    # define your filter sets under this option
    filter_sets:

    # an example thumbnail transformation definition
    # https://symfony.com/doc/current/bundles/LiipImagineBundle/basic-usage.html#create-thumbnails
    square:

    # set your image quality defaults
    jpeg_quality: 90

    # setup the filter steps to apply for this transformation
    filters:

    # auto rotate the image using EXIF metadata
    #auto_rotate: ~

    # strip the image of all metadata
    strip: ~

    # scale and square the image to the given dimensions
    thumbnail:
    size: [341, 341]
    mode: outbound
    allow_upscale: false

    # # create border by placing image on larger black background
    # background:
    # size: [341, 341]
    # position: center
    # color: '#000'

  • 2019-03-11 weaverryan

    Hey Peter Kosak!

    Ok, woh, something weird is happening. Here's what we should test:

    Reset things and refresh the page so that you can see the missing thumbnail. Right click and get that image src= value. Open that directly in a new tab in your browser? Do you see the image? An error? Is the thumbnail created?

    When your browser makes the request for the image, that is handled by a Symfony controller that is responsible for creating the thumbnail, saving it, and returning it to you (actually, if it's successful, it will redirect you to the final location - you'll see the URL change - it will no longer contain the word "resolve" after it's redirected). So, if something is not working - I'd go directly to that URL in your browser so you can (maybe) see what's going on.

    Let us know what you find out!

    Cheers!

  • 2019-03-09 Peter Kosak

    I have tried to refresh, go back, etc and it would not recreate thumbnails for new upload and first image then I went to symfony profiler and hit back and it was working... I have tried to delete whole media folder and refresh... again first picture not working, again tried refresh clear cache refresh go to other page and back to gallery still nothing....went to profiler and back and suddenly it has recreated a thumbnail

  • 2019-03-09 Peter Kosak

    another issue I have is when I add another image to gallery it wont create thumbnail... I thought that as soon as there is not a picture in media it will try to create a thumbnail. Am i being stupid or thats not what should happen?

  • 2019-03-09 Peter Kosak

    Well I have an issue, I have a gallery and first picture in the loop is never done. Only the first picture. I have tried to delete that picture from the loop (database) and again first picture is not done. I have tested this with thumbnail filter but also watermark. Same issue on both filters.

  • 2019-03-06 Diego Aguiar

    Yeeeah, LiipImagineBundle FTW!

  • 2019-03-06 Peter Kosak

    wau I would have never though it is working this way.... I was always thinking that during upload you need to upload big picture and also make a thumbnail so the logic would be sitting somewhere in upload service class...this is actually superb *thumbs up*