In Web2py I am creating some email templates and want to include the tag with my css file LOAD'ed into the view.
How do I use the LOAD function in the view so that it doesn't use jquery as it is an email and pulls from static, css, base.css.
This is what I have now:
<link href="{{=URL('static', 'css/style.css', scheme='http')}}" rel="stylesheet" type="text/css" />
But with this requires that remote content be loaded and most email applications disable this loading.
I was wanting to do this:
{{=LOAD(url=URL('static', 'css/style.css', scheme='http'),ajax=False)}}
But it is returning this:
<script type="text/javascript"><!--
web2py_component('http://127.0.0.1:8000/iid_app/static/css/web2py.css','c382784163112');
//--></script><div id="c382784163112">loading...</div>
<script type="text/javascript"><!--
web2py_component('http://127.0.0.1:8000/iid_app/static/css/style.css','c3845864949');
//--></script><div id="c3845864949">loading...</div>
Any ideas on how to make this just include the test from the file?
If you want to include the content of a CSS file in the email template, just add the following to the template where you want the CSS included:
{{include '../static/css/styles.css'}}
The {{include}} directive looks for the template to be included relative to the application's "views" folder, so the "../" goes up one level from there in the folder structure, and from that point, you can just specify the path to the file you want to include.
Related
Is there a ('newbie-simple') way to embed an image inside html, however not in the inline form as usual:
<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" />
but in a form where the base64 code is placed on the end of the html file?
A possible benefit of this method would be that an image can be inserted in the page on more than one place using the same image data from the bottom of the html file.
TL;DR: With pure HTML/CSS - unfortunately no.
I need that too for Sciter Notes project to save notes (plain HTML files) with embedded images.
Ideally you should be able to do something like this:
<img src="cid:1234" />
...
<data id=1234 type="image/png" base64>
iVBORw0KGgoAAAA...
</data>
but unfortunately no such mechanism yet.
But you can implement schema explained above with script though.
If you are using HTML5, then you do not have to worry about caches. The browser will load all images and store them into an image-list, therefore the image will be loaded only once and reused at every place the key (the URL to the source image) is found.
The only thing you will have to do, if you are only using HTML, is to copy the URL of the image into every place you need to use it. This is necessary, because you cannot declare variables in HTML and hence cannot change them from another place in the document. For this purpose you would need additionally javascript for example.
Then you can go ahead with CSS to adjust the pictures to your requirements. Yu can either define classes in the header and let the img tags have these classes, or you can type the style properties inline or you can import an external CSS-file.
EDIT:
An example with javascript would be to add this code in
<body>
<img id="img" src="myIMG.jpg">
<script type="text/javascript">
function changeImage(id, src) {
document.getElementById(id).src=a;
}
</script>
</body>
Here the function changeImage is declared now. You can call this function either via onclick or inside of the script tag. You can address the correct image through its ID as first parameter (you will have to give every image its ID, don't confuse it with the image-list of your browser, here you define the ID in the img-tag) and the new source url as second parameter.
I´m using this W3 script:
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
It works perfectly, but my issue would be that I only need one particular portion of the "content.html", and not all of it. So my question is: How do I use w3-include-html for PARTIALLY html include?
Thanks!!
You can't include part of a partial; the whole point of a 'partial' is that it in itself represents part of the code, not code that you should extract a part from.
You can include more than one partial on a page, but the partials themselves must be exactly what you're trying to include at that point; you can't 'extract' content from a partial.
Simply shrink your content.html so that it only contains the output that you would like to include on your main page.
Having said that, considering W3.js can only import HTML, there's literally no reason to store the partial HTML in an external file. Not only does this create a second, unecessary file, but it also adds a reliance on JavaScript. If your visitor opts to disable their JavaScript, your partial won't work. Thus, I strongly recommend simply writing the content of content.html in the main page itself.
Hope this helps!
I'm very new to html and CSS, been learning on the go to update a website.
I understand how you can use CSS to store styles so that you can apply styles to multiple elements/pages with ease, and changing the attributes in a CSS style will automatically change all the html styles it governs across multiple pages.
I was wondering if you are able to do this somehow with actual html content instead of just style attributes.
Example: We have heaps of project pages, at the end of every project page we have a table with a bio of the manager who ran the project. This html code is manually written into every page. Since it is manually written though, if you ever want to change or update the info in bio table, you will have to go through and manually update it on every page. Is there a way to have the info in the bio table stored in something similar to a CSS stylesheet, so it just links to every page, and updating the info in the stylesheet will automatically update the info on every page it is linked in.
Code something like:
CSS
.personAbio {
<table><tr><td>Name</td>
<td>Sales Last Week</td></tr>
<tr><td>John</td>
<td>$100</td></tr>
</table>
}
Html
<table class="personAbio">
</table>
There are several ways to accomplish what you need.
Statically include content
The first way is by using (as already suggested) some server-side language.
Using PHP it's simple as, say we're inside your project_8.php (notice the PHP extension!) you simply place this PHP code where you want the about content to appear:
<?php include "about.html"; ?>
Dynamically include content
There's also a dynamic way to accomplish the same using JavaScript and AJAX.
For sake of simplicity hers's how it's done using the jQuery library:
<div id="hereGoesTheAbout"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$("#hereGoesTheAbout").load("about.html");
</script>
The above two <script> tags are best placed right before the closing </body> tag.
Including content dynamically is crawlable by Googlebot, just, a small penalty is given (over the static implementation) - since the additional requests to retrieve the content.
The difference is that using a server-side technique the content is found and embedded into a page while still on the server.
Using JavaScript and AJAX (like in the example above) the page arrives to your browser and than JavaScript dynamically sends to the server a request for the desired content to include.
Not a good way to insert content is by using <iframe>. It's terribly complicated (and involves lot of JS and messaging techniques) to make it responsive.
Also search engines will not index such content so it's not good for your page SEO.
Winner
Static include. Using the same technique you can split your website architecture into manageable includes.
Say you have some product.php template page, and you have all your products inside a folder products/ as files like 000.html to 999.html.
By just linking to example.com/product.php?pr=233 you can get your 233.html product:
<?php include "header.html"; ?>
<article>
<h2>Product:</h2>
<?php include "products/{$_GET['pr']}.html"; ?>
</article>
<aside>
<?php include "about.html"; ?>
</aside>
<?php include "footer.html"; ?>
with the above what you have:
one product.php file template (for all your products)
only one header.html file
only one footer.html file
only one author file
one products/ folder with all your nnn.html products contents.
You are looking for a back end coding language like PHP.
No you can't.
But you can use JavaScript instead to store your data and then bind them into the table.
For exemple:
html:
<table class="personaBio">
<thead>
<tr>Name<\tr>
<tr>Sale of the last week</tr>
</thead>
<tbody></tbody>
</table>
JavaScript/JQuery
var persons = [{name:'John', saleLastWeek:'100'}];
persons.forEach(function(person) {
$('tbody').append(`<tr><td>${person.name}</td><td>${person.saleLastWeek}</td></tr>`);
}
This is an exemple, I am on my phone, I didn't try this code.
You need to learn JavaScript or Jquery.
As already mentioned, you can do it server-side, using a number of approaches:
Server-side includes
Any server-side language/frameworks: PHP, Ruby, Python, Java, etc.
You can, however, also do it on the client side:
With <iframe>: <iframe src="managers/john.html">
With Javascript:
Put all manager bios into, say, manager-bios.js:
var managerBios = {
"john" : { "fullName": "John Doe", "projects": ["a", "b", "c"] ...}
"jane" : ....
}
Reference it in the html: <script src="manager-bios.js"
Reference corresponding manager on the page: <div id="responsibleManager" data-manager="john">
On page load, populate manager's data (I'm using jQuery here):
$(document).load(function() {
var managerId = $("#responsibleManager").data("manager");
$("#responsibleManager").html("<div>" + managerBios[managerId].fullName + "</div> Projects: " + managerBios[managerId].projects.join(","));
}
Load data from external source with Javascript (again, using jQuery here, assuming same html as above):
$("#responsibleManager").load("managers/" + $("#responsibleManager").data("manager") + ".html");
Suppose I have a file called Index.html and another file called another.html , when I click another.html in Index.html I want header like this Index.html/Another.html , is it possible ?
If you think of a navbar you can copy paste it from index.html to another.html or use a frgmantation strategy which would avoid having the same code on multiple places.
If you are talking about the URL you can specify this in the header with the title tag:
<title>index/another.html</title>
But it would be bad style to say index.html/another.html instead use index/another.html
My directive uses an HTML file. The HTML file uses a CSS stylesheet. I need to distribute the directive js, HTML and CSS files, so the CSS location definition needs to be relative to the HTML.
Note: This is how I solved the location of the HTML, I have pending to solve the location of the CSS file.
I put the CSS file in the same folder as the HTML file, and then defined in the HTML:
<link rel="stylesheet" href='somefile.css'>
however this points to the domain root, not to the HTML file location.
Any ideas how to achieve this?
I think there are two ways to fix your issue as you don't know where the directives are located:
Solution 1 - Ancient HTML Way
If the length of the CSS is small, you can directly include it in your template HTML itself, through the style tag.
<style type="text/css">
Add style rules here
</style>
Solution 2 - The Angular Way(most recommended)
Use ngHref directive.
In your directive.js code, you can just put the path of the directive.html to a scope/rootScope variable and then you can access it from the directive.html
In directive.js
link: function (scope, iElement, iAttrs) {
scope.htmlPath = <path of templateURL>;
}
In directive.html
<link rel="stylesheet" ng-href="{{ htmlPath }}/filename.css">
Note:
I hope you are not using Gulp to build the angular JS code. But, If your are using gulp, you can add a gulp task and pipe all the CSS to a single CSS and can inject to your index.
You need to make separate directories for css and html(template files)
and use full path from root to the css folder
<link rel="stylesheet" href='/angualr/css/style.css'>