I started to work with mautic (open source email marketing automation).
Im trying to build a template for a landing page and therefore I'm editing "*.html.twig" files. At least I could find out that twig is a PHP engine by Symfony. What I could not find out yet though is something actually totally simple, at least in css/html.
All I want to do is specify the correct file path to an image file as a background-image:url(''); within the style attribute of the body tag. (See example below)
How on earth is this twig working with file paths? It seems to automatically change the file path I specify, but in a way that is not comprehensible to me.
I tried several options, but the only thing that works at least partially is specifying the absolute path. As soon as I start using the template in mautic though and build a page from it and save it, even the absolute file-path gets 'crashed' on the output source code. What the heck?
I did not find much info on file path syntax in twig. What I found sounded so horribly complicated that I can't believe it should really be that complicated to simply put in a file path? Am I wrong?
Here is the example, specifying the absolute path in the actual source code.
<body style="background-image:url('http://sawiya.de/mautic/themes/mautictheme1/img/background.jpg'); background-color:#213E4C;">
When viewing the result in the browser, without adding content to the landing page template, the source code output is the following (path changed, but the result is at least that the image is being shown):
background-image:url(http://1.1.1.2/bmi/1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg);
After adding content on top of the template in mautic, the file path is being changed even more and reads the following from the source code output (now the background image does not get displayed anymore, so its clearly broken):
background-image: url(http://1.1.1.3/bmi/sawiya.de/mautic/"http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
What is this all about? Where can I get the info on how to easily and correctly specify the file path? Is it really that hard?
Ok, now I found out something strange. It might be a bug in mautic here.
When I open the page where I specified the image via the background-image:url() through the https:// -Protocol, instead of http://, it works!
And the resulting source code looks as expected:
background-image: url("http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
So, wrong adress here, I think. At least to solve the bug. Hope someone finds this as a solution, until the bug is fixed.
Cheers!
Edit: Of course its better to specify the file path in a relative way, so that when the theme is used on another server, the path is still correct. In twig the best way to do that seems to be this. At least it works perfectly well.
background-image: url('{{ getAssetUrl('themes/'~template~'/img/logo.png', null, null, true) }}';)
Related
I absolutely sure that i pointed correct way to file. And i have no idea why it doesn't work. Probably somebody already met this problem.
css file:
how it looks in cite:
Mistake in DEV tools:
Any support appreciated
I tried to point different way to image and make background color white but it doesn't work
The error says the file can not be found. The file path is incorrect. File paths are hard to figure out, so you can copy the path with VS code. Just check file paths and everything will work. In the future, "try uploading text code instead of an image of the code". (Stack Overflow Guidelines) Also, this may work in production, it might be because its on a local host not a web server.
I can't find solution to load image linked in css. Chrome inspector shows me message:
404 (not found)
and shows me this link: http://127.0.0.1:5500/components/css/img.png
even if I have in my css
background-image: url(../src/splash_1/img.png)
Could anyone please help me with appropriate linking... I can't find answer how to correctly link that image in that folder structure.
UPDATE:
Below in the second picture attached, I added print screen with real data from Chrome Inspector and code and the element. Maybe that will be more helpful. I want to link correctly
ccbackground.jpg
Thank you!
You just need to pass the path as a string in single quotes with the same path you tried first. The .. is needed to step one folder up from the css folder.
background-image: url('../src/splash_1/img.png');
Note: it can be that the path is cached locally on the client side, you may need to clear browser cache to make it work.
Eventually it turned out I had 2 pairs of the same css files in different location. One pair in correct location and the other in main folder. I was changing css files in editor located in main folder, but in index.html css files were linked to specified folder. So even I changed css it didn't reflect changes in index.html, because the changes were done in the same name css files but in other location. I wonder how it happened I had 2 pairs of css files in different location, this is something really unclear for me. Thank you All for your help and your time.
Try this
background-image: url('/src/splash_1/img.png');
Please try below code...
background-image: url('components/src/splash_1/img.png');
I have been using a central CSS file to build my site and have added to and modified it over time. I use cloudflare which caches CSS files every few hours, so to avoid this I change the number on the end of the file name each time and update it in my header template. This worked fine for months on two different servers.
But just recently it has decided not to allow this. If I change the CSS's file name and reference link, the CSS will not load. If I set it back to what it was before (site_main61.css) then it works just fine. I've even tried using different characters than increment numbers at the end and still end up with the same result.
This started happening out of the blue; no changes had been made to the server. Could this be a problem with Cloudflare? Something else?
I can provide more details if needed, but I can't think of anything that would be relevant right now.
The problem is not related to forgetting to update the link in html. I've tested this countless times to be sure.
You can add a query string the to end of the file name. It will be cached as a separate file, but it will be the same filename. It's basically a forced recache for the file. Just go to the link in the HTML and add something like this:
<link href="path/to/file/site_main61.css?version=1" ... />
This will work with most caching systems and you no longer have to change the file name.
My asp.net project has several .png (and a few .gif) files in the \Content\Images folder.
Two are not found; Chrome Dev Tool's Console tells me: "Failed to load resource: the server responded with a status of 404 (Not Found)"
...and sure enough, if I click the links that it shows (e.g., http://localhost/#System.Configuration.ConfigurationManager.AppSettings[%22ThisApp%22]/Content/Images/PlatypusorangeSprite.png) it takes me to GDT's Resources tab, and although the Images folder shows that file as being there, but there is a "broken image" representation of it.
The same thing happens with just one other image file (they are all in the same location, and the references to them, in CSS file declarations, is indeed pointing to where they exist, such as:
background:#E5EDFE url('/#System.Configuration.ConfigurationManager.AppSettings["ThisApp"]/Content/Images/PlatypusorangeSprite.png') repeat-x 0 -369px;
I can 2-click those files in the VS2010 IDE, and they open up and seem to look fine.
So why are they not being found at browsetime/seen as broken images?
UPDATE
Well, apparently it's got someting to do with my moving all the style declarations out of the cshtml file into a separate stylesheet/CSS file that is referenced in the page (I went back to the bad old way and it works fine - the pngs are found again (I even imagined that I heard them singing "Amazing Grace")). Since it is not a relative path to those pngs, why would it matter that the style info is in a .css file in the Content folder as opposed to being "inline"?
I hate it when you do the "right" thing and it makes things worse.
Some clients accidentally transform suffixes to big letters like .JPG or .PNG. If you call them by .jpg or .png, it will not match.
Render your template by compiling in Visual Studio, open your browser, look into your HTML and check the rendered path of your image:<image src="..." />. Alternatively, try to call the image direcly via ftp by url in browser like ftp://www.mysite/pics/ for example and click on link, that shows the image. Then you get the correct path in the url.
Also check if the suffix ist accidentally doubled like mypic.jpg.jpg.
Any case sensitivity discrepancies,perhaps?
I am new to web design and I think I need to convert a jpeg into a url. I have an image saved locally on my computer. An example website that I am using as a reference has a one page for their html/source code and a different page for their css. All of the images are listed under the css page, however, they are typed in as a url. For example url(..green sea.jpeg) When I try to replace their css code with my image, it can't be found. I know I'm new, so I figure I must be making a simple simple mistake, but everytime I try and look it up online, I find directions on how to convert a jpeg into a url and it looks like you need another kind of software to do this, but I'm not exactly sure. Any help/direction would be very much appreciated!
Thanks!
When you replace your image name for the one you see in the CSS:
url(..green sea.jpeg)
...make sure that the image you are wanting to use is in the same location (folder / place) as the green sea image.
So if I want to replace it:
url(..myNewimage.jpeg)
I would make sure it was in the same place as the image I'm replacing it with.
ALSO, I just noticed that your path is wrong. You have ".." when it should probably be "../".
So try this:
url(../green sea.jpeg)
The url you need for your code is just wherever you have posted the image on your server in relationship to the css file. For example, if your directory is structured like this:
/CSS
-style.css
/JS
/images
-green-sea.jpg
index.html
Then your url would be (../images/green-sea.jpg)