liip imagine filter on images stored in private file - symfony

In my Symfony 6.2 i upload images to non public directory in my symfony /var/card-upload. In twig i display this image with
<img class="img-fluid img-thumbnail" src="{{ path('serve_private_image', {'id': card.id}) }}" alt="">
and for server image I have controller
<?php
namespace App\Controller;
use App\Entity\Card;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
use Symfony\Component\Routing\Annotation\Route;
class ServePrivateImageController extends AbstractController
{
/**
* Returns a private image for card file for display.
*
* #Route("/serve-private-image/{id}", name="serve_private_image", methods="GET")
* #param Card $card
* #return BinaryFileResponse
*/
#[Route(path: '/serve-private-image/{id}', name: 'serve_private_image')]
public function privateImageServe(Card $card): BinaryFileResponse
{
return $this->fileServe($card->getImage());
}
/**
* Returns a private file for display.
*
* #param string $path
* #return BinaryFileResponse
*/
private function fileServe(string $path): BinaryFileResponse
{
$absolutePath = $this->getParameter('card_directory') . '/' . $path;
return new BinaryFileResponse($absolutePath);
}
}
now I install liip image bundle for resize images for display
<img class="img-fluid img-thumbnail" src="{{ path('serve_private_image', {'id': card.id}) | imagine_filter('my_thumb') }}" alt="">
but this dont dispaly image
liip imagine config is
# Documentation on how to configure the bundle can be found at: https://symfony.com/doc/current/bundles/LiipImagineBundle/basic-usage.html
liip_imagine:
# valid drivers options include "gd" or "gmagick" or "imagick"
driver: "gd"
filter_sets:
cache: ~
# the name of the "filter set"
my_thumb:
# adjust the image quality to 75%
quality: 75
# list of transformations to apply (the "filters")
filters:
# create a thumbnail: set size to 120x90 and use the "outbound" mode
# to crop the image when the size ratio of the input differs
thumbnail: { size: [ 120, 90 ], mode: outbound }
# create a 2px black border: center the thumbnail on a black background
# 4px larger to create a 2px border around the final image
background: { size: [ 124, 94 ], position: center, color: '#000000' }

Related

How to solve image loading problem in nextjs

I'm making a mock of data and rendering it using map. But my images take a long time to load and the component is a little slow.
I've already tried using Image component from Nextjs, but it gives an error because it only accepts a string in the src and I'm passing an array of images.
Code:
const data = [
{
id: 1,
name: 'Thanos',
image: '/images/thanos.png'
},
{
id: 2,
name: 'Jhon Wick',
image: '/images/jhon.png'
},
{
id: 3,
name: 'Spider-Man',
image: '/images/spider.png'
},
{
id: 4,
name: 'Doctor Strange',
image: '/images/strange.png'
},
{
id: 5,
name: 'Batman',
image: '/images/batman.png'
}
]
export function Home() {
return (
<div>
{data.map((d) => (
<div key={d.id}>
<img src={d.image} alt="Image" />
<p>{d.name}</p>
</div>
))}
</div>
)
}
What's the size of those images?
Try to tiny those images and check out if this will help you out
This is one service that can help you
https://tinypng.com/
About the next image component, how have you tried to use it? You shouldn't pass the whole array of images, you must use it as same you did as the HTML img tag, but pay attention to width and height props.
https://nextjs.org/docs/api-reference/next/image
Another thing, check out if your images are in the public folder

Why an uploaded image with volley could not be shown using the liip imagine bundle in symfony?

My project is to publish images using a phone. I'm using volley library for uploading images and for the back-end side, I'm using Symfony (with file_put_contents and it works) with the liip imagine bundle in order to filter the images. I can see the images uploaded to the folder "web/uploads/img but the filtered images can't be seen in the folder "web/media/cache/{filter}. How can I do in order to get the filtered images with liip imagine?
For the Controller in Symfony:
$file = "uploads/img";
file_put_contents($file, base64_decode($image));
For the bundle liip imagine:
liip_imagine:
filter_sets:
thumb:
quality: 100
filter:
thumbnail: { size: [350, 350], mode: inset}
my_thumb:
quality: 100
filter:
thumbnail: { size: [200, 200], mode: outbound}
In your services.yaml
parameters:
image_directory: '%kernel.project_dir%/public/uploads/images'
App\Service\FileUploader:
arguments:
$targetDirectory: '%image_directory%'
config/packages/liip_imagine.yaml
liip_imagine:
filter_sets:
cache: ~
my_thumb :
quality : 75
filters :
thumbnail : { size : [260, 190], mode : outbound }
post_show:
quality: 75
filters:
thumbnail: { size: [500, 320], mode: outbound }

Gutenberg: Simple block render in back-end

I built a simple div block with guten-block.
All does what it should, but if I give the div a custom class, then its not rendered in the back-end.
How can I change this?
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
/**
* BLOCK: bootstrap-blocks
*
* Registering a bootstrap container
*/
import { registerBlockType } from '#wordpress/blocks';
import { InnerBlocks } from '#wordpress/editor';
const { __ } = wp.i18n;
registerBlockType( 'div-block/main', {
title: 'div',
icon: 'index-card',
category: 'bootstrap-blocks',
edit( { attributes, className, setAttributes } ) {
return (
<div className={ 'container' }>
<InnerBlocks />
</div>
);
},
save( { attributes } ) {
return (
<div className={ 'container' }>
<InnerBlocks.Content />
</div>
);
},
} );
The WP Admin editor area is styled using your theme's editor-style.css file - details.
The admin editor using Gutenburg uses the same file, with some small caveats. Namely, it auto converts body in the CSS to .editor-styles-wrapper because the editor area is no longer loaded in an iframe (Classic Editor is/was loaded in an iframe) - details.
So directly to the point, add add_theme_support('editor-styles'); to your functions.php file and then add your block's styles in your theme's editor-style.css file.

Ripple effect does not work after using bootstrap material design for in Yii2

I'm trying to use this tutorial for using Material Ripple in my yii2 advanced app.
And in the Test.html buttons and effects and ripples is working, but in my Yii2 app the library is without any ripple effect.
this is my css's and other files:
Material Asset:
<?php
/**
* #link http://www.yiiframework.com/
* #copyright Copyright (c) 2008 Yii Software LLC
* #license http://www.yiiframework.com/license/
*/
namespace frontend\assets;
use yii\web\AssetBundle;
/**
* #author Qiang Xue <qiang.xue#gmail.com>
* #since 2.0
*/
class MaterialAsset extends AssetBundle
{
public $sourcePath = '#themes/material';
public $baseUrl = '#web';
public $css = [
'css/material.min.css',
'css/material-fullpalette.min.css',
'css/ripples.min.css',
'css/roboto.min.css',
'css/site.css'
];
public $js = [
'js/material.min.js',
'js/ripples.min.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
How to solve this issue?
fixed with using this line in view:
$this->registerJs("$.material.init()");
thanks to Yii Irc guys.
If you added all the necessary css and js but it still doesn't work. You might wanna load arrive.js before the material-design.js
Install using bower bower install arrive --save

bin/behat #FootballTeamBundle is fine but bin/phing is not for running FeatureContext

If I use bin/behat #FootballTeamBundle in terminal as stand-alone, the error screen-shots are taken and saved under build/behat/ folder which is fine however, if I run bin/phing then the FeatureContext file seems to be ignored as a whole so neither screen-shots taken nor its internal methods are being triggered (such as I wait for ** seconds) which is strange. Anyone know the solution to it?
I also updated the line to bin/behat -f progress --format html --out ${dir-report}/behat.html to bin/behat #FootballTeamBundle in my build.xml but nothing changed.
Thanks in advance.
/var/www/html/local/sport/behat.yml
default:
context:
class: FeatureContext
parameters:
screen_shots_path: 'build/behat/'
extensions:
Behat\Symfony2Extension\Extension:
mink_driver: true
kernel:
env: test
debug: true
Behat\MinkExtension\Extension:
base_url: 'http://localhost/local/sport/web/app_test.php/'
files_path: 'dummy/'
browser_name: chrome
goutte: ~
selenium2: ~
paths:
features: src/Football/TeamBundle/Features
bootstrap: %behat.paths.features%/Context
/var/www/html/local/sport/src/Football/TeamBundle/Features/Context/FeatureContext.php
<?php
namespace Football\TeamBundle\Features\Context;
use Behat\MinkExtension\Context\MinkContext;
use Behat\Mink\Exception\UnsupportedDriverActionException;
use Behat\Mink\Driver\Selenium2Driver;
class FeatureContext extends MinkContext
{
/**
* Where the failure images will be saved.
*
* #var string
*/
protected $screenShotsPath;
/**
* Comes from behat.yml file.
*
* #param $parameters
*/
public function __construct($parameters)
{
$this->screenShotsPath = $parameters['screen_shots_path'];
}
/**
* Take screen-shot when step fails.
* Works only with Selenium2Driver.
*
* #AfterStep
* #param $event
* #throws \Behat\Mink\Exception\UnsupportedDriverActionException
*/
public function takeScreenshotAfterFailedStep($event)
{
if (4 === $event->getResult()) {
$driver = $this->getSession()->getDriver();
if (! ($driver instanceof Selenium2Driver)) {
throw new UnsupportedDriverActionException(
'Taking screen-shots is not supported by %s, use Selenium2Driver instead.',
$driver
);
return;
}
if (! is_dir($this->screenShotsPath)) {
mkdir($this->screenShotsPath, 0777, true);
}
$filename = sprintf(
'%s_%s_%s.%s',
$this->getMinkParameter('browser_name'),
date('Y-m-d') . '_' . date('H:i:s'),
uniqid('', true),
'png'
);
file_put_contents($this->screenShotsPath . '/' . $filename, $driver->getScreenshot());
}
}
/**
* #Then /^I wait for "([^"]*)" seconds$/
*
* #param $seconds
*/
public function iWaitForGivenSeconds($seconds)
{
$this->getSession()->wait($seconds*1000);
}
}
/var/www/html/local/sport/build.xml
<!-- GLOBAL VARIABLES -->
<property name="dir-source" value="${project.basedir}/src" />
<property name="dir-report" value="${project.basedir}/build/phing" />
<!-- END -->
<!-- AVAILABLE CLI COMMANDS -->
<target name="build"
description="Runs everything in order ..."
depends="cache-clear, cache-warm, load-fixtures, codesniffer-psr2, behat-bdd" />
<!-- END -->
<!-- FILESET -->
<fileset id="sourcecode" dir="${dir-source}">
<include name="**/*.php" />
</fileset>
<!-- END -->
............. OTHER TESTS ARE HERE, JUST REMOVED TO KEEP IT CLEAN
<!-- BEHAT - BDD -->
<target name="behat-bdd">
<echo msg="Running Behat tests ..." />
<exec logoutput="true" checkreturn="true"
command="bin/behat -f progress --format html --out ${dir-report}/behat.html"
dir="./" />
</target>
<!-- END -->
I never dealt with phing nor a Symfony fan. Hopefully this is purely a config issue. Try being more specific with your paths by using %behat.paths.base%. Also make use of namespaces ;)
default:
context:
class: Football\TeamBundle\Features\Context\FeatureContext
parameters:
screen_shots_path: %behat.paths.base%/build/behat/
extensions:
Behat\Symfony2Extension\Extension:
mink_driver: true
kernel:
env: test
debug: true
Behat\MinkExtension\Extension:
base_url: 'http://localhost/local/sport/web/app_test.php/'
files_path: %behat.paths.base%/dummy/
browser_name: chrome
goutte: ~
selenium2: ~
paths:
features: %behat.paths.base%/src
bootstrap: %behat.paths.features%/Context
%behat.paths.base% is where you behat.yml sits. So update the config with it setting the correct paths relevant to it.

Resources