This site has been archived. To learn more about our current products Ibexa Content, Ibexa Experience, Ibexa Commerce head over to the Ibexa Developer Portal

eZ Community » Forums » Setup & design » Struggling to add a background image...
expandshrink

Struggling to add a background image to EzDemo Bundle

Struggling to add a background image to EzDemo Bundle

Tuesday 12 May 2015 4:59:52 pm - 5 replies

Hi

I have followed all the advice from Heath in this post share.ez.no/forums/ez-publish-5-platform/best-way-to-use-override-system-in-ez-publish-5 to get a custom bundle to override the eZDemoBundle and so to create my own template that overrides the Demo one.

I have made a lot of changes to the CSS and everything works. However, I am now trying to add an .jpg file as a background image and cannot see it when I refresh the page. I have not decided which div to put it as the background to yet, that will depend on how it looks, but have tried it on several and it cannot be seen.

So in my custom bundle bootstrap.css file I currently have :

body

{
 

margin: 0;
   

font-family: "Source Sans Pro",sans-serif;  line-height: 1.5em;
 

color: #5B5B5B;
   

background: url("../images/Midnight-magpie-Negative-finished.jpg"blunk.gif Emoticon no-repeat;
   

font-weight: 300;

}

 

 

When I look at the generated CSS from my FireFox tool I get the same block of code, but still nothing showing when I refresh the page.

In the bootstrap.css file there seem to be a lot of lines of

background-color:#f5f5f5

and a lot of lines that say "transparent" so it could be that either my image is transparent or the #f5f5f5 color is overriding the image, or maybe just that the command is not working. Can I use an asset command in CSS?

But any help would be gratefully received.

 

Thanks

 

Barry

Modified on Tuesday 12 May 2015 5:01:03 pm by Barry Holland

Tuesday 12 May 2015 7:59:26 pm

Hello Barry,

A little short on time today but I did take a break to do the work required to update our BCPageLayoutOverrideTestBundle to provide for the examples you require to override the css within a bundle, add a image override (to use in the bundle css) and thus override a page layout background image.

https://github.com/brookinsconsulting/BCPageLayoutOverrideTestBundle/commit/cc5c126aeba85715625dd1cfc2fefd230a37d5b3

When you make the changes within your code following our working example you will need to remember to run the following command after creating your custom bundle Resources/public/css and Resources/public/images directories and adding your custom css file and image file.

sudo -u _www php54 -d memory_limit=-1 ezpublish/console assets:install --relative --symlink web

This command (or some variation of it) is required to create the symlinks within web/bundles for public bundle assets (which is required by the css background image usage).

You may or may not also need to reinstall your assets after creating your custom bundle Resources/public/css and Resources/public/images directories, customizing your css and including your bundle custom css.

sudo -u _www php54 -d memory_limit=-1 ezpublish/console assetic:dump --env=dev web

Also worth mentioning that ... no, you can not use the 'asset' command in css.

I hope this helps!

Cheers,
Heath

Wednesday 20 May 2015 7:58:11 pm

Hi Heath,

Thanks very much for your solution. Sorry it has taken a while to attempt it, I have been consumed with a paid project which seems to be taking much longer than originally planned!

As far as I can tell I have implemented all the things that you have advised, but something is still not working.

when i open up PHPStorm IDE and go to override.css I can hover over the line
background: transparent url('../bundles/baanmagpie/images/Midnight-magpie-Negative-finished.jpg') no-repeat left bottom;

If I hover over a section of the image path it says  "cannot resolve directory " followed by the name of the directory I am hovering over, which seems like this could be the problem, but I have tried many different configurations of the path and cannot get it to work!
I resorted to changing the transparent colour to red just to make sure that everything was working, and my background colour changed. Next I tried referencing the image directly from the bundle with this line in override.css:
background: red url('../images/Midnight-magpie-Negative-finished.jpg') no-repeat left bottom;

and the hover over in PHPStorm no longer gave and error.
However, when I loaded up the page, I still only had the red background.
Next, I tried using "inspect element" and I can see that the site references the image fine (using the path in my bundle rather than through the public folder and assets) but when I hover over the image it says "could not load the image".
If I click in this link/reference in "inspect element" it brings up a Symfony page
…index.php/images/Midnight-magpie-Negative-finished.jpg
with an exception detected stack trace, and the error message is:
The security context contains no authentication token. One possible reason may be that there is no firewall configured for this URL.
500 Internal Server Error - AuthenticationCredentialsNotFoundException
I hope there is enough information here for you to help me. I can't think what else I can try, but something isn't allowing this image through onto the page!
As usual, thanks in advance.
Barry

Wednesday 20 May 2015 8:34:05 pm

Hello Barry,

Thank you for your reply. No worries on your delay, I completely understand. We all get busy happy.gif Emoticon

What you were not so clear on is what of the steps you specifically followed.

Which leaves me grasping at straws to know what exactly is left not completed or not completed properly.

Before we continue, lets drop the talk about your editor (PHPStorm, which I love) but is distracting and irrelevant to the topic at hand.

My first thought is that you have not successfully run the instal assets command.

My second thought is that your not using the correct relative path to your bundle assets image folder.

The image path should (in general, lets not squabble about best practices vs anything is possible) be: '../bundles/lower-case-name-of-your-bundle-without-trailing-string-bundle/images/Midnight-magpie-Negative-finished.jpg'.

Again this expects that the symbolic link in the web/bundles folder to your custom bundle's 'Resources/public' directory has been created already (by the asset install command (above)). This is very simple to verify manually, and you should verify this and report back to us here in the forum thread. Without this information verified it makes it very hard to help you further. 

With the symlink correctly created and working, the rest of the required changes is simple to debug using only your file browser, web browser (console) and code editor.

  • Does the bundle asset symlink exist and point to your bundle's 'Resources/public' directory?
  • Does the image exist within the bundle's asset directory (as accessed locally via symlink path), 'web/bundles/(the-name-of-your-bundle-directory)/images/'?
  • Can you access the image manually via web browser path, '/bundles/(the-name-of-your-bundle-directory)/images/Midnight-magpie-Negative-finished.jpg'?
  • Have you changed your css background style to correctly point to the image using the relative uri, '../bundles/(the-name-of-your-bundle-directory)/images/Midnight-magpie-Negative-finished.jpg'?
  • Have you re-run the 'assetic:dump' command (above) after making the above described css change?
  • Have you re-freshed the page in the browser to see the background image being used?
  • If the background image is not being used, use browser inspection to verify that your custom css is being used and your custom css style (selector) is being used (but the image is still not being used as the background).
  • If the background image is still not being loaded, do yourself a favor and open up the browser's console and watch for the call to the background image to trigger a console 404 error. If the background image request (from the css) does show up in the web browser console as a 404 error then you can see the url / uri to the image being used which is generating the 404 error and try to load that url (to the image, as shown in the console) in another web browser tab and troubleshoot specifically what is wrong with the path (is the path inaccurate), what is wrong with the bundle asset symlink (is it missing or inaccurate), what is wrong with your mod_rewrite rules (which could be missing or inaccurate and not allowing / redirecting requests for '/bundles/(the-name-of-your-bundle-directory)/images/Midnight-magpie-Negative-finished.jpg' and thus generating a 404 error.

That's the short version (minus file permissions problems) of what I think could be the steps to solving this problem. Again my changes (in the commit) worked perfectly for me.

I hope this helps!

Cheers,
Heath

PS. It's also semi-important to realize that the background image path in this example is relative from the point of view from the uri of the css file(s) which are rendered to the browser from uri, '/css/(name-of-bla-bla-bla-css-file).css' making the background image call.

Since the css in eZ is 'generated' via assetic solution automatically and served via the '/css/' uri then that will be the base directory for all relative file resource request.

Since the background image call is '../bundles/(the-name-of-your-bundle-directory)/images/Midnight-magpie-Negative-finished.jpg' this means the browser goes back one directory from the '/css/' directory to the '/' directory (uri) and then descends into the 'bundles/(the-name-of-your-bundle-directory)/images/' directory and tries to load the image file 'Midnight-magpie-Negative-finished.jpg'.

Modified on Wednesday 20 May 2015 9:06:54 pm by // Heath

Saturday 23 May 2015 7:28:33 pm

Heath,

Thanks for taking the time with that reply. I have it working now, but reading back on what you wrote made me realise that I didn't really know what I was doing with assetic, so I went back and re-read some information on that. If anybody esle is reading this and gets to a similar point, this is a great resource to explain how assetic works: http://knpuniversity.com/screencast/symfony2-ep4/assetic I learned more from this screencast than from the actual Symfony docs. If you do not want to pay for the screencast, you can read the transcript underneath and you will get the same information, however I have used the KNPUniversity screencasts before and have found them to be really good, and Ryan Weaver (KNP is his company) is also a major contributor to the original Symfony docs, so he knows his stuff.

Obviously trying to answer the questions that Heath raised helped me work out where I was going with the method as well.

Anyway, here is what I did to rectify it:

 

I wasn't sure about the Capital letter in the filename  so I changed the filename to "finished.jpg" but I still couldn't get it to work, so I do not know if the capital letter would cause a problem
I have also taken the --relative flag off the assets:install command.I couldn't find much documentation but is was suggested that it can only be used from Symfony 2.7+ from some documentation I found, and it wasn't very clear what the command does anyway! Perhaps you know more?
Next, I added the css rewrite  filter to my page-layout.html.twig file in my bundle, and amended the @notations to the notation that you see here:

 

{% stylesheets
    '@eZDemoBundle/Resources/public/css/bootstrap.css'
    '@eZDemoBundle/Resources/public/css/responsive.css'
    '@eZDemoBundle/Resources/public/css/video.css'
    'bundles/baanmagpie/css/*'
    filter='cssrewrite'
%}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
{% endstylesheets %}
 

 

I changed the notation from the existing eZDemoBundle css paths that were already in the file, as I read somewhere that the @notation is not supported by css rewrite. Interestingly, I had to add the

filter='cssrewrite'

line here as it didn't exist.

so at this point my css file looked like this:

 

#page {
    background: transparent
    url('../bundles/baanmagpie/images/finished.jpg')no-repeat left bottom;
}

but it still didn't work. 

after I  cleared the cache and ran :
php ezpublish/console assets:install --symlink web
followed by:
php ezpublish/console assetic:dump --env=dev web
then I got

 

 

#page {
    background: transparent
    url('../../bundles/baanmagpie/bundles/baanmagpie/images/finished.jpg')no-repeat left bottom;
}

in the newly generated css file in the web folder.
So I changed my override.css line to:

 

url('../images/finished.jpg') no-repeat left bottom;

<span style="color: #000080; font-weight: bold;"> </span><span style="color: #008000; font-weight: bold;"> </span><span style="color: #008000; background-color: #e4e4ff; font-weight: bold;"> </span><span style="color: #008000; font-weight: bold;"> </span><span style="color: #008000; font-weight: bold;"> </span>

 

and I had also noticed at this point that there was no whitespace after the ) so I added that as you can see above.

 

This gave me a css line in my generated web/css/ override file of:

 

url('/bundles/baanmagpie/images/finished.jpg') no-repeat left bottom;

 

 

so I ran the cacheclear/install/dump commands again and it worked!

 

 If you are able to explain from this, the science behind what I changed, that would probably help anybody looking at this in the future.

 

Thanks again for your help Heath and enjoy your weekend

 

Barry

 

Saturday 23 May 2015 10:42:41 pm

There is one extra thing tha I forgot to add, which probably made a difference.

In the config.yml file, I added my bundle to the assetic configuration:

 

bundles:        [ eZDemoBundle, BaanMagpieBundle ]
      

 

Sorry for missing that out - very important i would think!

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from