I can't understand why express can't get my static file for display my css.
express.js :
app.use(express.static(__dirname + '/public'));
style.css
<style type="text/css">
body {
background-image: url("background.jpg");
} </style>
test.ejs :
<!DOCTYPE html>
<html> <body>
<h1> TEST </h1> </body> </html>
folder path :
/express.js
/public/style.css
/public/background.jpg
/views/test.ejs
test.ejs route :
.get('/myTest', function(req, res){
res.render('test.ejs', { data: req.session.info });
})
(info is an array of data for the current session)
test.ejs should be
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<h1> TEST </h1 </body> </html>
hope this solves your problem
The problem is that you're using a relative path in your CSS from an absolute path other than /. So when you request /myTest, the browser is looking for /myTest/background.jpg which of course 404s because it really should be /background.jpg according to your filesystem layout.
One easy way to fix this is to make your CSS urls absolute:
body {
background-image: url("/background.jpg");
}
I was tired...unfortunatly It was the 1rst line of my css...
delete <style> </style balise
Related
Following the getting started with FAST element guide here, I don't understand why the value of the attribute is not changing whenever I use the element in.
Even when following the guide completely by basically copying and pasting the sample code, I can't make it work.
Based on the code and markup below, I would expect that the h3 element has the value of test and not default.
Anybody who has same issue, or know what I might be doing wrong?
Btw, I'm using esbuild to bundle, transpile and serve the files.
import { FASTElement, customElement, attr, html } from "#microsoft/fast-element";
const template = html`
<div class="header">
<h3>My name is: ${x => x.greeting}</h3>
</div>
<div class="name-tag-body">
<slot>Default slot</slot>
</div>
`;
#customElement({
name: 'name-tag',
template: template
})
export class NameTag extends FASTElement {
#attr greeting: string = "default";
greetingChanged() {
console.log("greeting changed:", this.greeting);
}
connectedCallback() {
super.connectedCallback();
console.log("connectedCallback");
}
} }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<name-tag greeting="something"></name-tag>
</body>
</html>
The solution is to have the target property of the tsconfig.json file set to something other than ESNext. ES2016 works fine.
In a flask project, using BeautifulSoup I am using the following front-end design from codepen.io
https://codepen.io/drehimself/pen/QNXpyp
in my html template. I have a web scraped list of images and want to display them instead of the existing image using jinja2.
Notice that the images are contained in the CSS.
.clash-card__image {
position: relative;
height: 230px;
margin-bottom: 35px;
border-top-left-radius: $border-radius-size;
border-top-right-radius: $border-radius-size;
}
.clash-card__image--barbarian {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/barbarian-bg.jpg");
img {
width: 400px;
position: absolute;
top: -65px;
left: -70px;
}
}
Up until now, I have managed to use jinja2 to display images in the html or body part of the template.
As the images are in the CSS, I have tried this, but it doesn't work.
{% for image, title in images_titles %}
.clash-card__image--barbarian {
background: url("{{images");
{% endfor %}
I have tried various iterations of the above, but can't get the image to display. I can however, get the TITLE to display because it is in the html.
The other problem is that the list is not fixed in size. I want the cards to replicate without my having to put in the {{image}} jinja reference in each css reference.
My question is: How do I correctly put the jinja2 reference to the image in the list of images in the css?
Any best practices and suggestions also appreciated.
I hope my example meets your requirements. I think if you define the background images directly in the element you will save yourself a lot of trouble.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<!-- All resources from Clash of Clans Cards -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" />
<link rel="stylesheet" href="{{ url_for('static', filename='main.css')}}" />
<!-- End of resources from Clash of Clans Cards -->
<style type="text/css">
.clash-card__image {
background-color: #1e1e1f;
background-size: contain; /*cover or contains; decide for yourself*/
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div class="slide-container">
{% for image,title in images_titles %}
<div class="wrapper">
<div class="clash-card" style="padding-bottom: 3.5rem;">
<div class="clash-card__image" style="background-image: url({{image}});">
</div>
<div class="clash-card__unit-description">
{{ title }}
</div>
</div>
</div>
{% endfor %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script type="text/javascript">
(function() {
var slideContainer = $('.slide-container');
slideContainer.slick();
$('.clash-card__image img').hide();
$('.slick-active').find('.clash-card img').fadeIn(200);
// On before slide change
slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-active').find('.clash-card img').fadeOut(1000);
});
// On after slide change
slideContainer.on('afterChange', function(event, slick, currentSlide) {
$('.slick-active').find('.clash-card img').fadeIn(200);
});
})();
</script>
</body>
</html>
I'm guessing you may be trying to use Jinja expressions in a CSS file which is included as a static asset (via a tag like <link href='/some/file.css />).
This won't work as these external assets are never processed by Jinja.
A quick workaround for this may be to keep this in the HTML template by including it in the <head> as follows:
<head>
<link rel='stylesheet' type='text/css'>
{% for image, title in images_titles %}
.clash-card__image--barbarian {
background: url("{{image}}");
}
{% endfor %}
</link>
</head>
EDIT:
what is the best practice for this as surely it is something that is often required
CSS files are, by their nature, static. Modern methods of static asset deployment may put those assets on a CDN (or if using a reverse proxy like nginx have the static folder served by nginx, so the WSGI/app server doesn't even know about them).
With that in mind, this template probably isn't built with dynamic image URLs in mind. On a closer inspection it appears that it's only loading a background image within the CSS, and the actual character image is loaded within an <img> tag. So you're probably looking at two ways in which images are loaded within this template.
Since you're asking about the background image, you could change it with Javascript. Something like:
var elem = document.getElementsByClassName('clash-card__image--barbarian')[0];
elem.style.backgroundImage = "url('http://localhost:5000/some_image.jpg')"
You could then, for example use the fetch API to load the URL string dynamically from an endpoint whtin your app. This probably involves some more Javascript work, which is difficult to expand on within the context of this question.
Without Javascript, if you're placing that character image with Jinja2 syntax, perhaps doing something like:
<div class="clash-card__image clash-card__image--archer">
<img src="{{image}}" />
</div>
You could avoid putting the CSS block in the <head> by modifying that parent div to load the CSS via a style tag:
<div style="background: url('{{bg_image}}');"
class="clash-card__image clash-card__image--archer">
then remove that declaration from the external CSS file.
This has the same effect as placing the CSS within the <head> in the template file: it's all rendered by Jinja2 on page load.
I have an external CSS file that isn't referenced inside of the html file. Is it possible to add this CSS file and apply the styling to the html via AngleSharp on the fly?
Another work around I've thought of is actually inserting the reference to the CSS in the html before parsing it into the DOM but I wanted to know if AngleSharp provided the initial question before I implemented the "workaround". Thanks so much!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Doc</title>
</head>
<body>
<div id="styleme">
Hello
</div>
</body>
</html>
Notice no css is linked.
And the external css file:
#styleme {
color:blue;
background-color: gray;
}
Yes. There are actually multiple ways.
I guess what you are looking for is:
var config = Configuration.Default.WithCss();
// note: ideally load your document from a URL directly if applicable
var document = await BrowsingContext.New(config)
.OpenAsync(res => res.Content(#"<!doctype html>
<html lang=en>
<head>
<meta charset='utf-8'>
<title>Test Doc</title>
</head>
<body>
<div id=styleme>
Hello
</div>
</body>
</html>"));
var style = document.CreateElement<IHtmlStyleElement>();
// note: if you have the CSS from a URL; choose IHtmlLinkElement instead
style.TextContent = #"#styleme { color:blue; background-color: gray; }";
document.Head.AppendChild(style);
// note: using LINQPad here; you may want to store the style somewhere
document.DefaultView.GetComputedStyle(document.QuerySelector("#styleme")).Dump();
Hope that helps!
I'm creating extension using crossrider. In this extension I want to open a new tab with html from resources. Its opening page in new tab without issues. Now I want to add js & css to that, that to available in resources. Kindly help in adding css & js.
code in background.js
appAPI.openURL({
resourcePath: "troubleShooter.html",
where: "tab",
focus: true
});
in troubleShooter.html
<html>
<head>
<link media="all" rel="stylesheet" type="text/css" href="css/ie.css" />
<script type="text/javascript" src="js/ie.js"></script>
</head>
<body>
</body>
</html>
Crossrider recently introduced the ability to open a new tab with HTML from resources. However, such pages cannot directly access other resource file using link and script tags embedded in the HTML.
Though in it's early release, one of the features of the HTML page is the crossriderMain function that runs once the page is ready. In this early release, the function supports the following Crossrider APIs: appAPI.db.async, appAPI.message, and appAPI.request.
Hence, even though in this early release there isn't a direct method to add resource CSS & script files to the resource HTML page, you can workaround the issue by loading the resources into the asynchronous local database and applying it to the HTML page using standard jQuery. For example:
background.js:
appAPI.ready(function() {
// load resource file 'style.css' in to local database
appAPI.db.async.set('style-css', appAPI.resources.get('style.css'));
// load resource file 'script.js' in to local database
appAPI.db.async.set('script-js', appAPI.resources.get('script.js'));
// open resource html
appAPI.openURL({
resourcePath: "troubleShooter.html",
where: "tab",
focus: true
});
});
troubleShooter.html:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
appAPI.db.async.get('style-css', function(rules) {
$('<style type="text/css">').text(rules).appendTo('head');
});
appAPI.db.async.get('script-js', function(code) {
// runs in the context of the extension
$.globalEval(code.replace('CONTEXT','EXTN'));
// Alternatively, run in context of page DOM
$('<script type="text/javascript">')
.html(code.replace('CONTEXT','PAGE DOM')).appendTo('head');
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
style.css:
h1 {color:red;}
script.js
console.log('CONTEXT:: script.js running');
Disclaimer: I am a Crossrider employee
base_url() doesn't work at CSS file...
here's my php :
<link rel="stylesheet" type="text/css" href="<?=base_url()?>css/style.css"/>
<body>
</body>
here's my css/style.css :
body {
background:#356aa0 url(<?=base_url()?>img/background.png) repeat-x;
color:#fff;
}
the text color change to white, but the image doesn't show up...
if i use url(../img/background.png), it show up...
but when i open url localhost/project/index.php/control/function/var1/var2, it doesn't show up...
It's Solved, Thanks every one... :]
i make php file at view folder like this :
<?php header("content-type: text/css"); ?>
body {
background:url(<?=base_url()?>img/background.png);
}
and i load the php file i just make with function at controller, and then i link it :
<link type="text/css" rel="stylesheet" href="<?=base_url()?>control/style.php"/>
It's work, Thanks guys...
You should do it like this
Structure of your files
myapp/
application/
system/
css/
img/
And in css write this
body {
background:#356aa0 url(../img/background.png) repeat-x;
color:#fff;
}
And now call it
<link rel="stylesheet" type="text/css" href="<?=base_url()?>css/style.css"/>
That is the standard way of doing it. Also your css is not dynamic so you dont have to worry about php code using in it. The structure i presented in the answer will surely use the styles correctly and load the images.
CSS file does not get parse as PHP file. If you really want to do something like that, rename your file as styles.php
OPEN the page and add
header("content-type: text/css");
This tells the page to be treated as a text based CSS file. Then you can simple echo your remaining CSS like
echo "
body {
....
....
";
To fix the base_url() not being accessible from styles.php set a session variable to keep that. You can keep this on your index.php of codeignitor.
$_SESSION['base_url'] = base_url();
Now, use this inside styles.php.
background: url("<?php echo $_SESSION['base_url']; ?>"/../../some.jpg");
Get your base_url() out of the CSS file. That would fix the problem. You can't put PHP code in a CSS file.
You don't need to make php file as css. Simply put your images file out of "application" folder, e.g on assets/img. Then edit your css file
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('../img/error.png');
background-size: 20px 20px;
}
call the css file using
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/style.css" media="all">
It will absolutely works dude!.
if your folder structure is:
YourAppFolder/
application/
public/
css/
img/
system/
Then use this in your view:
<link rel="stylesheet" type="text/css" href="<?=base_url()?>public/css/style.css"/>
and in css use this for image:
background:#356aa0 url(../img/background.png) repeat-x;
Try this..
Replace this:
<link rel="stylesheet" type="text/css" href="<?=base_url()?>css/style.css"/>
<body>
</body>
With this:
<link rel="stylesheet" type="text/css" href="<?php base_url(CSS/style.css)?>"/>
<body>
</body>
Also replace the following in css/style.css :
body {
background:#356aa0 url(<?=base_url()?>img/background.png) repeat-x;
color:#fff;
}
With this:
body {
background:#356aa0 url(../img/background.png) repeat-x;
color:#fff;
}
NB: if it doesn't work, try use one dot(.) -> ./img/background.png
Assuming your file structure is like this:
-ci
--application
--CSS
---file.css
--img
---background.png
--system
.
.
.
and your base_url() : " http://localhost/sitename/ "
or you can write ...
<link rel="stylesheet" type="text/css" href="<? echo base_url('your css file from base url') ?>/>
this is your external css file
body {
background:url(<? echo base_url('your image path from base url')?>) repeat-x;
color:#fff;
}