czcodecamp · JFox-sk · Oct 15, 2016 · Oct 15, 2016 · Oct 15, 2016 · Oct 15, 2016
diff --git a/app/AppKernel.php b/app/AppKernel.php
@@ -16,6 +16,7 @@ public function registerBundles()
             new Doctrine\Bundle\DoctrineBundle\DoctrineBundle(),
             new Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle(),
             new AppBundle\AppBundle(),
+            new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(),
         ];
 
         if (in_array($this->getEnvironment(), ['dev', 'test'], true)) {

diff --git a/app/Resources/views/components/list.html.twig b/app/Resources/views/components/list.html.twig
@@ -1,14 +1,27 @@
-{% for product in products %}
-    <div class="col-sm-4 col-lg-4 col-md-4">
-        <a href="{{ path("product_detail", {"slug": product.slug }) }}">
-            <div class="thumbnail">
-                <img src="{{ product.image }}" alt="{{ product.title }}">
-                <div class="caption">
-                    <h4 class="pull-right">{{ product.price }} Kč</h4>
-                    </h4>
-                    <p>{{ product.title }}</p>
+<p>
+    Sort by:
+    {{ knp_pagination_sortable(pagination, 'Title', 'p.title') }}
+    {{ knp_pagination_sortable(pagination, 'Rank', 'p.rank') }}
+</p>
+
+<div class="clearfix">
+    {% for product in pagination %}
+        <div class="col-sm-4 col-lg-4 col-md-4">
+            <a href="{{ path("product_detail", {"slug": product.slug }) }}">
+                <div class="thumbnail">
+                    <img src="{{ product.image }}" alt="{{ product.title }}">
+                    <div class="caption">
+                        <h4 class="pull-right">{{ product.price }} Kč</h4>
+                        </h4>
+                        <p>{{ product.title }}</p>
+                    </div>
                 </div>
-            </div>
-            </a>
-    </div>
-{% endfor %}
+                </a>
+        </div>
+    {% endfor %}
+</div>
+
+{# display navigation #}
+<p>
+    {{ knp_pagination_render(pagination) }}
+</p>
diff --git a/app/config/config.yml b/app/config/config.yml
@@ -66,3 +66,15 @@ swiftmailer:
     username:  "%mailer_user%"
     password:  "%mailer_password%"
     spool:     { type: memory }
+
+# Knp paginator Configuration
+knp_paginator:
+    page_range: 3                      # default page range used in pagination control
+    default_options:
+        page_name: page                # page query parameter name
+        sort_field_name: sort          # sort field query parameter name
+        sort_direction_name: direction # sort direction query parameter name
+        distinct: true                 # ensure distinct results, useful when ORM queries are using GROUP BY statements
+    template:
+        pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig # sliding pagination controls template
+        sortable: KnpPaginatorBundle:Pagination:sortable_link.html.twig # sort link template
diff --git a/composer.json b/composer.json
@@ -21,7 +21,8 @@
         "symfony/polyfill-apcu": "^1.0",
         "sensio/distribution-bundle": "^5.0",
         "sensio/framework-extra-bundle": "^3.0.2",
-        "incenteev/composer-parameter-handler": "^2.0"
+        "incenteev/composer-parameter-handler": "^2.0",
+        "knplabs/knp-paginator-bundle": "^2.5"
     },
     "require-dev": {
         "sensio/generator-bundle": "^3.0",

diff --git a/readme.md b/readme.md
@@ -0,0 +1,8 @@
+# CodeCamp project
+
+## Used bundle
+
+### KnpPaginatorBundle
+Pagination  
+https://packagist.org/packages/knplabs/knp-paginator-bundle  
+https://github.com/KnpLabs/KnpPaginatorBundle
diff --git a/src/AppBundle/Controller/CategoryController.php b/src/AppBundle/Controller/CategoryController.php
@@ -31,8 +31,26 @@ public function categoryDetail(Request $request)
 			throw new NotFoundHttpException("Kategorie neexistuje");
 		}
 
+		// paginator
+        $em = $this->get('doctrine.orm.entity_manager');
+        $dql = 'SELECT p
+			FROM AppBundle\Entity\Product p
+			JOIN AppBundle\Entity\ProductCategory pc WITH p = pc.product
+			JOIN AppBundle\Entity\Category c WITH pc.category = c
+			WHERE c.left >= :lft and c.right <= :rgt
+			GROUP BY p';
+        $query = $em->createQuery($dql)
+            ->setParameter("lft", $category->getLeft())
+            ->setParameter("rgt", $category->getRight());
+        $paginator = $this->get('knp_paginator');
+        $pagination = $paginator->paginate(
+            $query, /* query NOT result */
+            $request->query->getInt('page', 1) /*page number*/,
+            6 /*limit per page*/
+        );
+
 		return [
-			"products" => $this->getDoctrine()->getRepository(Product::class)->findByCategory($category),
+		    "pagination" => $pagination,
 			"categories" => $this->getDoctrine()->getRepository(Category::class)->findBy(
 				[
 					"parentCategory" => $category,

diff --git a/src/AppBundle/Controller/HomepageController.php b/src/AppBundle/Controller/HomepageController.php
@@ -4,6 +4,7 @@
 use AppBundle\Entity\Product;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\Routing\Annotation\Route;
 
 /**
@@ -15,16 +16,21 @@ class HomepageController extends Controller
 	 * @Route("/", name="homepage")
 	 * @Template("homepage/homepage.html.twig")
 	 */
-	public function homepageAction()
+	public function homepageAction(Request $request)
 	{
+	    // paginator
+        $em = $this->get('doctrine.orm.entity_manager');
+        $dql = 'SELECT p FROM AppBundle:Product p';
+        $query = $em->createQuery($dql);
+        $paginator = $this->get('knp_paginator');
+        $pagination = $paginator->paginate(
+            $query, /* query NOT result */
+            $request->query->getInt('page', 1) /*page number*/,
+            6 /*limit per page*/
+        );
+
 		return [
-			"products" => $this->getDoctrine()->getRepository(Product::class)->findBy(
-				[],
-				[
-					"rank" => "desc"
-				],
-				21
-			),
+		    "pagination" => $pagination,
 			"categories" => $this->getDoctrine()->getRepository(Category::class)->findBy(
 				[
 					"level" => 0,

diff --git a/web/config.php b/web/config.php
@@ -38,9 +38,216 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
         <meta name="robots" content="noindex,nofollow" />
         <title>Symfony Configuration Checker</title>
-        <link rel="stylesheet" href="bundles/framework/css/structure.css" media="all" />
-        <link rel="stylesheet" href="bundles/framework/css/body.css" media="all" />
-        <style type="text/css">
+        <style>
+            /* styles copied from symfony framework bundle */
+            html {
+                background: #eee;
+            }
+            body {
+                font: 11px Verdana, Arial, sans-serif;
+                color: #333;
+            }
+            .sf-reset, .sf-reset .block, .sf-reset #message {
+                margin: auto;
+            }
+            img {
+                border: 0;
+            }
+            .clear {
+                clear: both;
+                height: 0;
+                font-size: 0;
+                line-height: 0;
+            }
+            .clear-fix:after {
+                content: "\0020";
+                display: block;
+                height: 0;
+                clear: both;
+                visibility: hidden;
+            }
+            .clear-fix {
+                display: inline-block;
+            }
+            * html .clear-fix {
+                height: 1%;
+            }
+            .clear-fix {
+                display: block;
+            }
+            .header {
+                padding: 30px 30px 20px 30px;
+            }
+            .header-logo {
+                float: left;
+            }
+            .search {
+                float: right;
+                padding-top: 20px;
+            }
+            .search label {
+                line-height: 28px;
+                vertical-align: middle;
+            }
+            .search input {
+                width: 195px;
+                font-size: 12px;
+                border: 1px solid #dadada;
+                background: #fff url(data:image/gif;base64,R0lGODlhAQAFAKIAAPX19e/v7/39/fr6+urq6gAAAAAAAAAAACH5BAAAAAAALAAAAAABAAUAAAMESAEjCQA7) repeat-x left top;
+                padding: 5px 6px;
+                color: #565656;
+            }
+            .search input[type="search"] {
+                -webkit-appearance: textfield;
+            }
+            #content {
+                width: 970px;
+                margin: 0 auto;
+            }
+            #content pre {
+                white-space: normal;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            /*
+            Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+            Code licensed under the BSD License:
+            http://developer.yahoo.com/yui/license.html
+            version: 3.1.2
+            build: 56
+            */
+            .sf-reset div,.sf-reset dl,.sf-reset dt,.sf-reset dd,.sf-reset ul,.sf-reset ol,.sf-reset li,.sf-reset h1,.sf-reset h2,.sf-reset h3,.sf-reset h4,.sf-reset h5,.sf-reset h6,.sf-reset pre,.sf-reset code,.sf-reset form,.sf-reset fieldset,.sf-reset legend,.sf-reset input,.sf-reset textarea,.sf-reset p,.sf-reset blockquote,.sf-reset th,.sf-reset td{margin:0;padding:0;}.sf-reset table{border-collapse:collapse;border-spacing:0;}.sf-reset fieldset,.sf-reset img{border:0;}.sf-reset address,.sf-reset caption,.sf-reset cite,.sf-reset code,.sf-reset dfn,.sf-reset em,.sf-reset strong,.sf-reset th,.sf-reset var{font-style:normal;font-weight:normal;}.sf-reset li{list-style:none;}.sf-reset caption,.sf-reset th{text-align:left;}.sf-reset h1,.sf-reset h2,.sf-reset h3,.sf-reset h4,.sf-reset h5,.sf-reset h6{font-size:100%;font-weight:normal;}.sf-reset q:before,.sf-reset q:after{content:'';}.sf-reset abbr,.sf-reset acronym{border:0;font-variant:normal;}.sf-reset sup{vertical-align:text-top;}.sf-reset sub{vertical-align:text-bottom;}.sf-reset input,.sf-reset textarea,.sf-reset select{font-family:inherit;font-size:inherit;font-weight:inherit;}.sf-reset input,.sf-reset textarea,.sf-reset select{font-size:100%;}.sf-reset legend{color:#000;}
+            .sf-reset abbr {
+                border-bottom: 1px dotted #000;
+                cursor: help;
+            }
+            .sf-reset p {
+                font-size: 14px;
+                line-height: 20px;
+                padding-bottom: 20px;
+            }
+            .sf-reset strong {
+                color: #313131;
+                font-weight: bold;
+            }
+            .sf-reset a {
+                color: #6c6159;
+            }
+            .sf-reset a img {
+                border: none;
+            }
+            .sf-reset a:hover {
+                text-decoration: underline;
+            }
+            .sf-reset em {
+                font-style: italic;
+            }
+            .sf-reset h2,
+            .sf-reset h3 {
+                font-weight: bold;
+            }
+            .sf-reset h1 {
+                font-family: Georgia, "Times New Roman", Times, serif;
+                font-size: 20px;
+                color: #313131;
+                word-wrap: break-word;
+            }
+            .sf-reset li {
+                padding-bottom: 10px;
+            }
+            .sf-reset .block {
+                -moz-border-radius: 16px;
+                -webkit-border-radius: 16px;
+                border-radius: 16px;
+                margin-bottom: 20px;
+                background-color: #FFFFFF;
+                border: 1px solid #dfdfdf;
+                padding: 40px 50px;
+                word-break: break-all;
+            }
+            .sf-reset h2 {
+                font-size: 16px;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+            .sf-reset li a {
+                background: none;
+                color: #868686;
+                text-decoration: none;
+            }
+            .sf-reset li a:hover {
+                background: none;
+                color: #313131;
+                text-decoration: underline;
+            }
+            .sf-reset ol {
+                padding: 10px 0;
+            }
+            .sf-reset ol li {
+                list-style: decimal;
+                margin-left: 20px;
+                padding: 2px;
+                padding-bottom: 20px;
+            }
+            .sf-reset ol ol li {
+                list-style-position: inside;
+                margin-left: 0;
+                white-space: nowrap;
+                font-size: 12px;
+                padding-bottom: 0;
+            }
+            .sf-reset li .selected {
+                background-color: #ffd;
+            }
+            .sf-button {
+                display: -moz-inline-box;
+                display: inline-block;
+                text-align: center;
+                vertical-align: middle;
+                border: 0;
+                background: transparent none;
+                text-transform: uppercase;
+                cursor: pointer;
+                font: bold 11px Arial, Helvetica, sans-serif;
+            }
+            .sf-button span {
+                text-decoration: none;
+                display: block;
+                height: 28px;
+                float: left;
+            }
+            .sf-button .border-l {
+                text-decoration: none;
+                display: block;
+                height: 28px;
+                float: left;
+                padding: 0 0 0 7px;
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAcCAYAAACtQ6WLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQtJREFUeNpiPHnyJAMakARiByDWYEGT8ADiYGVlZStubm5xlv///4MEQYoKZGRkQkRERLRYWVl5wYJQyXBZWdkwCQkJUxAHKgaWlAHSLqKiosb//v1DsYMFKGCvoqJiDmQzwXTAJYECulxcXNLoumCSoszMzDzoumDGghQwYZUECWIzkrAkSIIGOmlkLI10AiX//P379x8jIyMTNmPf/v79+ysLCwsvuiQoNi5//fr1Kch4dAyS3P/gwYMTQBP+wxwHw0xA4gkQ73v9+vUZdJ2w1Lf82bNn4iCHCQoKasHsZw4ODgbRIL8c+/Lly5M3b978Y2dn5wC6npkFLXnsAOKLjx49AmUHLYAAAwBoQubG016R5wAAAABJRU5ErkJggg==) no-repeat top left;
+            }
+            .sf-button .border-r {
+                padding: 0 7px 0 0;
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAcCAYAAACtQ6WLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR1JREFUeNpiPHnyZCMDA8MNID5gZmb2nAEJMH7//v3N169fX969e/cYkL8WqGAHXPLv37//QYzfv39/fvPmzbUnT56sAXInmJub/2H5/x8sx8DCwsIrISFhDmQyPX78+CmQXs70798/BmQsKipqBNTgdvz4cWkmkE5kDATMioqKZkCFdiwg1eiAi4tLGqhQF24nMmBmZuYEigth1QkEbEBxTlySYPvJkwSJ00AnjYylgU6gxB8g/oFVEphkvgLF32KNMmCCewYUv4qhEyj47+HDhyeBzIMYOoEp8CxQw56wsLAncJ1//vz5/P79+2svX74EJc2V4BT58+fPd8CE/QKYHMGJOiIiAp6oWW7evDkNSF8DZYfIyEiU7AAQYACJ2vxVdJW4eQAAAABJRU5ErkJggg==) right top no-repeat;
+            }
+            .sf-button .btn-bg {
+                padding: 0 14px;
+                color: #636363;
+                line-height: 28px;
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAYAAACgXdXMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpiPnny5EKGf//+/Wf6//8/A4QAcrGzKCZwGc9sa2urBBBgAIbDUoYVp9lmAAAAAElFTkSuQmCC) repeat-x top left;
+            }
+            .sf-button:hover .border-l,
+            .sf-button-selected .border-l {
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAcCAYAAACtQ6WLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR9JREFUeNpi/P//PwMyOHfunDqQSgNiexZkibNnzxYBqZa3HOs5v7PcYQBLnjlzhg1IbfzIdsTjA/t+ht9Mr8GKwZL//v3r+sB+0OMN+zqIEf8gFMvJkyd1gXTOa9YNDP//otrPAtSV/Jp9HfPff78Z0AEL0LUeXxivMfxD0wXTqfjj/2ugkf+wSrL9/YtpJEyS4S8WI5Ek/+GR/POPFjr//cenE6/kP9q4Fo/kr39/mdj+M/zFkGQCSj5i+ccPjLJ/GBgkuYOHQR1sNDpmAkb2LBmWwL///zKCIxwZM0VHR18G6p4uxeLLAA4tJMwEshiou1iMxXaHLGswA+t/YbhORuQUv2DBAnCifvxzI+enP3dQJUFg/vz5sOzgBBBgAPxX9j0YnH4JAAAAAElFTkSuQmCC) no-repeat top left;
+            }
+            .sf-button:hover .border-r,
+            .sf-button-selected .border-r {
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAcCAYAAACtQ6WLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAT5JREFUeNpiPHv27BkGBoaDQDzLyMjoJgMSYHrM3WX8hn1d0f///88DFRYhSzIuv2X5H8Rg/SfKIPDTkYH/l80OINffxMTkF9O/f/8ZQPgnwyuGl+wrGd6x7vf49+9fO9jYf3+Bkkj4NesmBqAV+SdPntQC6vzHgIz//gOawbqOGchOxtAJwp8Zr4F0e7D8/fuPAR38/P8eZIo0yz8skv8YvoIk+YE6/zNgAyD7sRqLkPzzjxY6/+HS+R+fTkZ8djLh08lCUCcuSWawJGbwMTGwg7zyBatX2Bj5QZKPsBrLzaICktzN8g/NWEYGZgYZjoC/wMiei5FMpFh8QPSU6Ojoy3Cd7EwiDBJsDgxiLNY7gLrKQGIsHAxSDHxAO2TZ/b8D+TVxcXF9MCtYtLiKLgDpfUDVsxITE1GyA0CAAQA2E/N8VuHyAAAAAABJRU5ErkJggg==) right top no-repeat;
+            }
+            .sf-button:hover .btn-bg,
+            .sf-button-selected .btn-bg {
+                color: #FFFFFF;
+                text-shadow:0 1px 1px #6b9311;
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEFJREFUeNpiPnv2LNMdvlymf///M/37B8R/QfQ/MP33L4j+B6Qh7L9//sHpf2h8MA1V+w/KRjYLaDaLCU8vQIABAFO3TxZriO4yAAAAAElFTkSuQmCC) repeat-x top left;
+            }
+
             /* styles copied from bundles/sensiodistribution/webconfigurator/css/install.css */
             body {
                 font-size: 14px;
@@ -126,15 +333,15 @@
         <div id="content">
             <div class="header clear-fix">
                 <div class="header-logo">
-                    <img src="bundles/framework/images/logo_symfony.png" alt="Symfony" />
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAAA+CAMAAACxzRGDAAAAUVBMVEX////Ly8yko6WLioxkYmVXVVkwLjLl5eWxsLJKSEzy8vJxcHLY2Ni+vb89Oz9XVVh+fH+Yl5n///+xsbLY2Nlxb3KkpKWXlph+fX+LiYy+vr/IZP61AAAAAXRSTlMAQObYZgAABRBJREFUeNrVmtuWoyAQRS1FEEQSzQU7//+hYxUiXsKQZLJWM+chsUloN+WhCuguYoKyYqzmvGasKqH4HyRKxndipcgcumH8qViTM7TkUclcwaHmf5XM0eWq4km1KjdqXfMXJHVe1J3hL8lk5fCGv6wmT+o0d87U+XNrk0Y9nfv+7LM6ZJH5ZBL6LAbSxQ3Q5FDr22Skr8PQSy4n7isnsQxSX4r6pobhjCHHeDNOKrO3yGmCvZOjV9jmt8ulTdXFKdbKLNh+kOMvBzuVRa4Y7MUsdEUSWQe7xxCfZmcwjHU83LqzFvSbJQOXQvptbPnEFoyZtUUGwTeKuLuTHyT1kaP0P6cR01OKvv448gtl61dqZfmJezQmU/t+1R2fJLtBwXV6uWGwB9SZPrn0fKO2WAvQN1PUhHjTom3xgXYTkvlSKHs19OhslETq6X3HrXbjt8XbGj9b4Gi+lUAnL6XxQj8Pyk9N4Bt1xUrsLVN/3isYMug8rODMdbgOvoHs8uAb2fcANIAzkKCLYy+AXRpSU8sr1r4P67xhLgPp7vM32zlqt7Bhq2fI1Hwp+VgANxok59SsGV3oqdUL0YVDMRY7Yg8QLbVUU4NZNoOq5hJHuxEM28Sh/IyUZ8D3reR+yc58EGvOy2U0HQL6G9V+kWyEWHmzaMx6t4o9RhOm/riUiYrzqij4Ptqkn7AaCXqc+F47m04ahfde7YIz8RHEBN6BdVwdIGRVdNbKqYu1Hc0x0wBY4wqC8+XUgBGnj81SZsQB+0yAS1x/BlI/6ebHHk0lauQLuPDpu6EwAVJ7T0rl2uXa23jcqNyOZekhqYHRz3JOANrF4wCCmEs1f9D1lUe0n4NAATed80Y5e0Q7CO2TezM/BR6wKdgQzKbCF4uOQC3Bk0fKAzbFlyRWg3gksA/gmm7eOjrpaKX7fHlEW2xLbE6GZsPiCiShVzN7RG2xTz2G+OJtEqzdJ7APxy3MrSsV0VukXbKMp9lhs5BN6dr3CN+sySUaoxGwfRUM3I/gdPYONgVU+PLX4vUWm32AvUySarbONvcpV2RQEPKKjEBHFk01kQDGRblnn8ZuE9g+JUl8OWAPbkFK2K6JxhJVvF47FzYYnAN22ttwxKYCoH36rheEB7KG/HF/YUaa2G5JF+55tpyrl7B1WHM39HuP2N2EXPl1UBu8vbj4OjvD+NoTE4ssF+ScARgaJY1N7+u8bY/Y9BSM5PKwJbvMVab32YP5FB5TtcYVrGoASolVLTzI7kVsYVxRtAb5n2JXq1vCdtd47XtYItynrN0835PasLg0y13aOPbmPI+on2Lr9e5tjSHvgkAvclUjL3Fsdaw03IzgTR62yYClk7QMah4IQ0qSsoYYbOix6zJR1ZGDNMOY3Bb6W5S6jiyovep3t7bUPyoq7OkjYumrfESp8zSBc/OLosVf+nTnnKjsqR16++WDwpI8FxJWRFTlI6NKnqYJaL96TqjAbo9Toi5QiWBDcmfdFV+T8dkvFe5bItgstbM2X6QG2mVun+cazfRwOS0eiaeRRJKgLfc3BQAqfnhJyz8lfR6580SF/FXVu83Nz1xrrnFqqXL6Qxl47DNSm4RFflvN5sABDD8peouqLLKQXVdGbnqf+qIpOxON4ZyYdJEJ6sy4zS2c5eRPTT4Jyp46qDE5/ptAWqJOQ9e6yE82FXBbZCk1/tXVoshVoopE3CB0zmraI3nbqCJ/gW3ZMgtbC5nh/QHlOoOZBxQCRgAAAABJRU5ErkJggg==" alt="Symfony" />
                 </div>
 
                 <div class="search">
                   <form method="get" action="http://symfony.com/search">
                     <div class="form-row">
 
                       <label for="search-id">
-                          <img src="bundles/framework/images/grey_magnifier.png" alt="Search on Symfony website" />
+                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABUElEQVQoz2NgAIJ29iBdD0d7X2cPb+tY2f9MDMjgP2O2hKu7vS8CBlisZUNSMJ3fxRMkXO61wm2ue6I3iB1q8Z8ZriDZFCS03fm/wX+1/xp/TBo8QPxeqf+MUAW+QIFKj/+q/wX/c/3n/i/6Qd/bx943z/Q/K1SBI1D9fKv/AhCn/Wf5L5EHdFGKw39OqAIXoPpOMziX4T9/DFBBnuN/HqhAEtCKCNf/XDA/rZRyAmrpsvrPDVUw3wrkqCiLaewg6TohX1d7X0ffs5r/OaAKfinmgt3t4ulr4+Xg4ANip3j+l/zPArNT4LNOD0pAgWCSOUIBy3+h/+pXbBa5tni0eMx23+/mB1YSYnENroT5Pw/QSOX/mkCo+l/jgo0v2KJA643s8PgAmsMBDCbu/5xALHPB2husxN9uCzsDOgAq5kAoaZVnYMCh5Ky1r88Eh/+iABM8jUk7ClYIAAAAAElFTkSuQmCC" alt="Search on Symfony website" />
                       </label>
 
                       <input name="q" id="search-id" type="search" placeholder="Search on Symfony website" />