I have the following code in my stylesheet:
body
{
margin: 1cm 3cm 1cm;
background-image:url("bg.png");
background-position:center top;
background-repeat:no-repeat;
}
But the background isn't found on the server. I have tested this code with just a basic html page and it does work, there must be something that isn't allowing it within the Phalcon framework.
Possibly the file location of the image? I have it in the same folder as the html file.
Yes, I believe that the location of your file is "changing", I mean, when you access a page in your Phalcon application, all your server side includes will take as the current directory the path of your main bootstrap file (the main index.php file path), and for client side the browser will always think that the action executed (like www.myapp.com/users/login-form/) is actually a existent directory structure on your server (so the browser will try the load your background in www.myapp.com/users/login-form/bg.png).
That's why Phalcon offers many ways to deliver html assets to solve not only this problem but also make your application future proof (what if you need to move all your images, CSS and JS to a CDN server?), and here it is:
You could either use an assets manager(more advanced) or simply a view helper which can produce all assets URLs needed based on your url service configurations. Your application should have a valid URLs configuration by setting the desired base URI (for URLs that leads to Phalcon controllers) and your desired static URI (for URLs that leads to CSS files, images, etc), more info about this can be found here.
Related
Can you have a HTML file "index.html" sitting in a folder that looks at an images folder and will render whatever is in that folder with certain styling?
The catch is the images folder can be added to so can it watch all new files added and render them.
Any suggestions would be great.
HTML Documents when served to the client, are rendered in the browser, which, even with JavaScript, will not know the layout of the filesystem on the server for your images folder.
The only really logical way to do this is use a server side language to processess the request (eg: PHP) to list all the files and write the HTML needed dynamically.
The alternative would be to have some sort of endpoint that would list the image names, and use javascript to dynamically add them to the document on page load, at the end of the day it's personal preference, but without either enabling directory listings for your webserver or using a server sided language of somesort somewhere, what you're asking isn't really possible.
I have an image file in the same directory as my login.vue component (which is where the following code is located). But, when I try this code, the image will not load:
<div background="benjamin-child-17946.jpg" class="login" style="height:100%;">
I'm getting this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
This is strange, because I can see in my terminal that my image is in the same directory as login.vue. I am using webpack to compile. What might be causing this?
Your primary issue is that single file components are compiled and the compiled script is very unlikely to reside in the same directory as the current location as your image. Your second issue is that you are not assigning the background image to your div correctly. You should use CSS.
I would suggest that you make an images directory in the root of your electron application (or assets or static or whatever you want to call it). Then, you can reference files in that directory using the file:// protocol.
Second, I would recommend you define a CSS class and use that. So, in your single file component, define this style section:
<style>
.background {
background: url('file:///images/benjamin-child-17946.jpg') no-repeat center center fixed;
background-size: cover
}
</style>
And on your div just use the class.
<div class="login background">
Finally, you could also use webpack's url-loader to load the file as a dataUrl but I would recommend that as a more advanced exercise and just stick with the simple method for now.
Edit
I created a project from scratch using electron-vue which uses webpack and I did run into an error with the above using the file:// protocol, that I don't run into when not using webpack. With the above template, instead of using
file:///images/benjamin-child-17946.jpg, put the file in the static directory and use /static/benjamin-child-17946.jpg. That allows vue-loader to work properly.
If you are not using electron-vue, then your webpack configuration may be different.
Worth noting that background is not a valid HTML attribute anymore.
Compiled VUE code doesn't match the way the folders are built, assuming you're using the CLI.
You would need to reference the images full URL in its static resource location.
I'm not sure what that would be in this case as I haven't used static resources with the Vue CLI yet.
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
I apologize in advance for the generic examples of this since the issue is with a proprietary corporate system.
I support a web app that allows for edits to a secondary CSS file in order to style the page (within the limits of the application). I'm trying to apply a non-standard font that is used company wide but I do not have access to edit the HTML or header of the site, only the CSS. I tried declaring the font-family in the main CSS while referencing the actual font file URLs (since they are used on our corporate site) but they never actually loaded.
I then took the same font-family snippet and created a separate CSS file for just the font declaration and changed the URL to point to the actual files in the relative path (ex: url('fonts/DINWeb.woff') ). I moved this fonts.css file along with the reference font files (eot, ttf,and woff versions) to a public Dropbox folder for testing. I was able to get everything working by simply importing the fonts.css file using the line of code below (URL modified) at the top of my application's CSS.
#import url('https://dl.dropboxusercontent.com/.../fonts.css');
The problem is that the Dropbox solution was just for temporary testing purposes. Once I confirmed everything worked as expected, I moved the exact folder structure to an external hosting location that is approved for use. When I update my import code in the CSS to the new URL, the font does not load. I can access the CSS file and the font files from my browser without any issue so I don't understand why the web app fails to load it. I also have images hosted in this same hosting location that pull into the web app without an issue, it's only the font that has issues. The files work when hosted on Dropbox but not the other source. I've also double checked the references for the URL and they are still correct since the folder structure never changed.
Any suggestions would be GREATLY appreciated. Ideally I would like to just reference the corporate URLs directly in the web app's CSS like I initially tried. If that will not be possible, I need it to work with the externally hosted files since Dropbox cannot be used as the permanent solution.
Basically you cannot load from one domain resources hosted in other domain, unless the second host says that you can. See CORS
You can solve it by moving everything to the same domain (or forcing the user to be always in certain domain) or by adding the Access-Control-Allow-Origin header to the responses.
You can achieve this last thing if you can edit an .htaccess file in the server. Add:
Header set Access-Control-Allow-Origin "*"
Or replace the * with the domain from which you'll be making the requests.
Yes, a subdomain is a different domain (abc.com, www.abc.com and dl.abc.com are not the same).
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.