I am using django and jssor.
When i use jssor slideshow transition, image will disappear then show up if i use images in 'media' folder. If i use images in 'static' folder there won be.
Could someone tell me why ?
Django Model:
class Banner(models.Model):
image = models.FileField(upload_to='Banner/%Y_%m_%d')
link = models.TextField()
Django template:
...
<div ...>
{% for banner in banners %}
<div>
<a href={% url banner.link %}>
<img src="{{ banner.image.url }}">
</a>
</div>
{% endfor %}
</div>
...
JS:
var _SlideshowTransitions = [{...some setting ...}]
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
},
This is most likely a problem of chrome. Every time when a new image element created in the document dynamically, it will load the image again event the image is already loaded in the same page. If your resource is not cache enabled for client side, it is high performance consuming.
To enable cache for client side, it is an option of your server, or controlled by program.
So, browser caches resources come from 'static' folder and not for resources come from 'media' folder.
Related
I would like to speed up my Shopify website load time by lazyloading my images. The problem is that I cannot locate the specific image files in the code in order to add the class= "lazyload" to it.
Here is what I have tried:
I have pasted this code at the top of the product-template.liquid page:
<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>
And then adding the code: class= "lazyload" to the end of any chunk of code that I think looks like an image, but it doesn't work.
Product-template.liquid page 1 page 2 page3
Would anyone be able to help me understand where this code goes and how to identify where I need to put the code to lazyload an image?
I see that you're using <img src="..." /> . For lazyload to work, change it to <img data-src="..." />
And the better alternative is to implement native lazy loading. Just add loading="lazy" to your images and voila.
Ex: <img src="https://dummyimage.com/600x400/000/fff" loading="lazy" />
More details & a combined use with lazyload library - https://web.dev/native-lazy-loading/ & https://caniuse.com/loading-lazy-attr
In the online code editor, add the below code before close tag.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
Add the class lazyload to images that should be lazy loaded. In addition, change the src attribute to data-src.
<img class="lazyload" data-src="image.jpg" />
Instead of
<img src="image.jpg" />
I’m using Grav modular pages to build a site but can’t find how to target a specific module to add a css class.
I have found this https://learn.getgrav.org/16/content/media but can’t see if there’s a way to do this.
What I’m trying to achieve is have a different background for each modular div in the page.
In the template : shared class for all modules
As a module implies, for its displaying, to browse the paren'ts page collection in the Twig template of that parent, you can add any HTML and CSS there.
For instance, here is one way of looping through the collection :
{% for module in page.collection %}
<section class="module">
{{ module.content }}
</section>
{% endfor %}
In the template : specific class
You can customize the CSS class by playing with a Twig variable. The most secure way is to use the slug of the page, wich has already escaped characters :
{% for module in page.collection %}
<section class="module_{{module.slug}}">
{{ module.content }}
</section>
{% endfor %}
In the markdown
You can use the already existent options to define CSS :
classes: module1
and then use it in the Twig, by using the header() function :
{% for module in page.collection %}
<section class="module_{{module.header.classes}}">
{{ module.content }}
</section>
{% endfor %}
Target a specific module
Now, for targetting a specific module in Twig, you have to import a page.
Here's the generic way of accessing an other page or sub-page content :
{% set imported_page = page.find("/route/to/the/page") %}
You can then use the header() and content() functions to access that imported page's frontmatter and content :
<section class="module_{{imported_page.header.classes}}">
{{ imported_page.content }}
</section>
I am having trouble displaying images in my Vue CLI project.
Here is what I have going on. This vue file accesses a json file with a few references to the individual Eyewear objects, all that works. I have references to the image I am trying to access in the json file. And with the current code, I can see the correct image reference in the browser, but it does not load the image. Is it something to do with webpack or another loader needing to load the image file?
<template>
<div>
<h1 id='callout'>Select Your Eyewear</h1>
<div id='item' v-for='item in items' :key=item.id>
<img :src='`..${item.images.frontal}`' alt='eyeware' />
<ul id='itemLIist'>
<li >
{{ item.brand }}
</li>
<li>
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import items from "../assets/eyewear.json";
export default {
name: "ItemList",
data: function() {
return {
items: items.eyewear
};
}
};
</script>
<style scoped>
</style>
I don't know this works for you or not. But in my case providing the full path of the image works for me. in your screenshot reference starting from "../assets" instead of that try something "src/assets" (Full path with out dots)
and for make this simple, first just try to hard code full path src to a image tag and see whether it's working or not.
and let me know if this works for you. =)
In my front end I have a simple index.html that I have placed a ng-view tag in it as follows:
<body>
<div data-ng-controller="MainController">
<ng-view> <ng-view/>
</div>
My routes.js file is something like this:
(function() {
angular.module('mainApp')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when("/", {
templateUrl: "/startbootstrap-landing-page/home.html"
});
$routeProvider.when("/products", {
templateUrl: "/views/products.html"
});
$routeProvider.otherwise({ redirectTo: '/' });
}]);
})();
When I enter "mywebsite.com/index.html#/" based on the routing in routes.js it will load "/startbootstrap-landing-page/home.html" in the div tag where ng-view is placed. So everything works perfectly till here. But the problem is I have used local addressing/linking tags inside the home.html that they stop working once I load the home.html partial view inside the ng-view div tag. For example I have used something like this in my home.html partial view:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
So when I click on for example "Contact" it has to jump to the bottom of my designed page where I have used a tag such as this:
<a name="contact"></a>
.
.
.
But it does not.
The home.html page works perfectly with its local # addressing/linking when used as a standalone html file with html and body tags but its local linking functionality wont work anymore when used as a partial view loaded inside the ng-view tag. Any ideas as to why this happens? Thanks.
I think angular is taking control of the # based urls... have you tried $anchorScroll?
How to handle anchor hash linking in AngularJS
Regards
I'm trying to create a page with a few galleries using the Magnific-Popup jQuery plug-in. I different sections contained in divs with separate ids and a .gallery class containing the images.
<div id="content_1">
<p>Some content</p>
<div class="gallery">
<img src="img/pic_1.jpg">
<img src="img/pic_2.jpg">
</div>
</div>
<div id="content_2">
<p>More content</p>
<div class="gallery">
<img src="img/pic_3.jpg">
<img src="img/pic_4.jpg">
</div>
</div>
To get the galleries to be separate in the popup I initialized the script multiple times for each content section. When I do this, however, after the first content section, there are more images in the gallery popup (twice as much to be exact) than I linked to. I'm new to javascript, so I'm not sure if I'm just missing something obvious.
From the documentation:
To have multiple galleries on a page, you need to create a new
instance of Magnific Popup for each seperate gallery. For example
<div class="gallery">
Open image 1 (gallery #1)
Open image 2 (gallery #1)
</div>
<div class="gallery">
Open image 1 (gallery #2)
Open image 2 (gallery #2)
Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.
</div>
Javascript
$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
Hope that helps!