In Head component of Next.js I add this CDN code:
<script
src="https://kit.fontawesome.com/fbadad80a0.js"
crossOrigin="anonymous"
></script>
and I use the icon in my project as follow:
<Nav.Link href="/cart">
{" "}
<i aria-hidden className="fas fa-shopping-cart"></i> Cart
</Nav.Link>
I get this error on the console:
Warning: Extra attributes from the server: aria-hidden
at i
at span
at div
at Rating (webpack-internal:///./src/components/product/Rating.tsx:14:20)
at div
at div
at CardText (webpack-internal:///./node_modules/react-bootstrap/esm/createWithBsPrefix.js:31:27)
at div
at CardBody (webpack-internal:///./node_modules/react-bootstrap/esm/createWithBsPrefix.js:31:27)
at div
at Card (webpack-internal:///./node_modules/react-bootstrap/esm/Card.js:44:23)
at Product (webpack-internal:///./src/components/product/Product.tsx:22:22)
at div
at Col (webpack-internal:///./node_modules/react-bootstrap/esm/Col.js:17:23)
at div
at Row (webpack-internal:///./node_modules/react-bootstrap/esm/Row.js:19:23)
at div
at Container (webpack-internal:///./node_modules/react-bootstrap/esm/Container.js:18:23)
at div
at BasePage (webpack-internal:///./src/components/layout/Basepage.tsx:19:25)
at main
at div
at BaseLayout (webpack-internal:///./src/components/layout/BaseLayout.tsx:20:23)
at Index (webpack-internal:///./src/pages/index.tsx:26:30)
at App (webpack-internal:///./src/pages/_app.tsx:34:24)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:14:20)
at withRedux(App) (webpack-internal:///./node_modules/next-redux-wrapper/es6/index.js:182:35)
at ErrorBoundary (webpack-internal:///./node_modules/#next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
at ReactDevOverlay (webpack-internal:///./node_modules/#next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:637:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:768:24)
In the head component of your next file try this
<Head>
<link
async
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
</Head>
This should work, or any other links for that regard
Related
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 am using material Icons inside Hyperhtml Components. But even though css is loaded the Icon in not loading in the browser. Instead of the Icon the "3d_rotation" is showing.
This is My Implementation.
const appIframeRender = hyperHTML.bind(document.querySelector('#iframe_element').attachShadow({mode: 'open'}));
const main2 = hyperHTML.wire();
appIframeRender`${[
cbplugin.CharmListComponent.render(main2)
]}`;
cbplugin.WrapperComponent.render = function (render, data){
return render`
<style>
#import "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
#import "https://fonts.googleapis.com/icon?family=Material+Icons";
#import "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700";
</style>
<div>
<a class='dropdown-trigger card-more-actions' href='#' data-target='dropdown2'>
<i class="material-icons">
3d_rotation
</i>
</a>
</div>
}
So My Doubt is Is it possible that material Icon is not supported in Hyper Html. The material Icon css are showing in the inspect element styles.
Thank you
Whenever you use Shadow DOM, you must import fonts in the main document:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700">
</head>
...
I have a carousel built with materialize css. I want to start carousel from middle item. But carousel to be start from second item.
link of carousel: link
What can I do?
Thanks in Advance!
Please next time add a snippet of code to understand better...
Btw... You can use the instance.set(x) to move the carousel to nth slide (as stated in the docs here)
Here is an example (just comment the instance.set(middle_slide); statement to see the difference):
document.addEventListener('DOMContentLoaded', function() {
//find wich slide is the middle one
var carousel_items = document.querySelectorAll('.carousel-item').length;
var middle_slide = Math.round(carousel_items / 2)
console.log('The slide in the middle is the ' + middle_slide + ' out of ' + carousel_items)
//Carousel initialization
var options = {};
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, options);
//Set the carousel to show the middle slide first
var elem = document.querySelector('.carousel');
var instance = M.Carousel.getInstance(elem);
instance.set(middle_slide);
})
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>
Here is the codepen if you prefere: https://codepen.io/LukeSavefrogs/pen/WPYOGE?editors=1010
I have a shared-styles element that keeps most of my applications colors. I can easily change the colors manually in shared-styles.html, and all of my other components can inherit from there if I use the CSS variables.
My problem is I need to update the CSS variables in shared-styles.html and have all the other components that inherit the CSS variables to update their colors accordingly. Below is my shared-styles.html. For brevity, I removed all the variables except --app-primary-color.
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style is="custom-style">
:host {
--app-primary-color:#2196F3;
}
</style>
</template>
<script>
class SharedStyles extends Polymer.Element {
static get is() { return 'shared-styles'; }
ready(){
super.ready();
console.log('update css');
this.updateStyles({'--app-primary-color': 'red'});
}
}
window.customElements.define(SharedStyles.is, SharedStyles);
</script>
</dom-module>
This is how I am including them in the other components. For example:
<dom-module id="test-element">
<template>
<style include="shared-styles">
The shared style is not a Polymer element, so it should not extend Polymer.Element and should not have a <script> tag. It should be defined like this:
shared-styles.html
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style>
:host {
--app-primary-color: #2196F3;
}
</style>
</template>
</dom-module>
Then, call this.updateStyles in the root element (e.g., <my-app>) to apply a global style in Polymer 2.0. Note that all elements under <my-app> would inherit the newly specified styles.
Example
Here are instructions using Polymer CLI's polymer-2-starter-kit template:
Install the bleeding edge Polymer CLI (npm install polymer-cli#next), required for the polymer-2-starter-kit template.
Run:
mkdir polymer-2-shared-styles-demo
cd polymer-2-shared-styles-demo
polymer init polymer-2-starter-kit
In src/my-app.html, add a <button> to the menu, which will change the value of --app-primary-color:
<template>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer">
<app-toolbar>Menu</app-toolbar>
<!-- **** LINE 77: Add button below **** -->
<button on-click="_changeAppColor">Change app color</button>
<script>
class MyApp extends Polymer.Element {
/* *** LINE 130: Define button-click handler below **** */
_changeAppColor() {
this.updateStyles({'--app-primary-color': 'red'});
}
In src/shared-styles.html, change .circle's background to use --app-primary-color:
.circle {
/* *** LINE 33: Use --app-primary-color below **** */
background: var(--app-primary-color, #ddd);
Run polymer serve -o to open the starter kit in the default browser.
Click the button in the menu to change the color of the toolbar and the circles in each page. It should look like this:
GitHub project
I am displaying an icon this way:
<?php echo anchor('stuff/edit', '<i class="icon-edit icon-white"></i>', array('class'=>'btn btn-info')); ?>
And what I want is that when I hover over the icon with the mouse a message that says "Edit" pops up. Just like with the icons on this board, if you hover over the {} icon a message that says "Code Sample..." shows up. I want that using bootstrap.
Thanks in advance.
By jQuery solution use jQuery UI
HTML in head tag
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
HTML in BODY tag
<i class="icon-edit icon-white">icon</i>
JavaScript
$(function() {
$( "#show-option" ).tooltip({
show: {
effect: "slideDown",
delay: 300
}
});
});
for additional information see http://jqueryui.com/tooltip/
Its simple, If you want it to show the native way, ie with no customizations and styles, use 'title' attribute;
<i class="icon-edit icon-white"></i>
For more beautiful and larger messages, you could use bootstrap's TOOLTIP
See Bootstrap Tooltip . Its too easy as:
<i class="icon-edit icon-white"></i>
If you have bootstrap.js included, it will show 'first tooltip'
I do not know if there is a css method for this, however you can add tooltip="string" to asp tags, on html tags use title="string".