Comments (26)
It does not, but my PR fixes it.
from kirby3-srcset.
since the style tag is there with a proper ratio is very hard for me to understand why the rest should not work. you could at around these lines add a var_dump($this-text); die;
for each apply step. This way we can find out what hapend after each step.
https://github.com/bnomei/kirby3-srcset/blob/master/classes/Bnomei/Srcset.php#L57
$this->text = $this->imageKirbytagFromData($this->options);
var_dump($this->text);
$this->text = $this->applySrcset($this->text, $this->options);
var_dump($this->text);
$this->text = $this->applyRatio($this->text, $this->options);
var_dump($this->text); die;
from kirby3-srcset.
I'm using [email protected] library, with no modifications.
Using this in my Kirby config:
'thumbs' => [
'srcsets' => [
'default' => [400, 800, 1200, 1600],
'cover' => [800, 1024, 2048],
],
]
... but I'm not calling these configs in the Kirbytext, i.e. (lazysrcset: colin-connect-2018.jpg)
Those classnames are coming from the library, i.e. https://github.com/aFarkas/lazysizes/blob/a2f37ec2371bff523ea8b94800682e4ec3596b9b/lazysizes.js#L19 and https://github.com/aFarkas/lazysizes/blob/a2f37ec2371bff523ea8b94800682e4ec3596b9b/lazysizes.js#L24
In my current site using lazysizes, the initially set lazyload
class is toggled to lazyloaded
once the element is loaded. I believe it's working the same way here, and that's why there's no lazyload
classname visible in the output—the elements are visible and have rendered by the time I grabbed this output.
Hope this helps :)
from kirby3-srcset.
from kirby3-srcset.
I was considering your suggestion to share the source of my project, and it inspired me to just set a clear baseline. I did a clean install of the latest kirby3-starterkit, installed the plugin, set up my test image and everything worked—which is expected, of course. Both share MAMP PRO PHP 7.2.1 so I rule that out. So I then went into my project and commented out all javascript src in the head, and only directly included lazysizes (5.2.0). Still the same issues as above. So poking around and looking for differences between starterkit and my project, and the only thing I can see is my custom setup for serving out of custom folders (see below). Since lots of the JS I have in here is old and fragile (seriously), I thought I'd remove it and hope it was the culprit—but I cleared my cache and saw the same behavior as before. Anyway, I thought I'd share the custom config and see if it looks like something that might cause an issue. I can't see any other differences so pretty stuck. I'll share a link in a Slack DM to a repo with copy of my project for you to look at. I hope it's an obvious issue coming from something I just didn't see.
<?php
include __DIR__ . '/../vendor/autoload.php';
$kirby = new Kirby([
'roots' => [
'index' => __DIR__,
'base' => $base = dirname(__DIR__),
'content' => $base . '/content',
'site' => $base . '/site',
'storage' => $storage = $base . '/storage',
'accounts' => $storage . '/accounts',
'cache' => $storage . '/cache',
'sessions' => $storage . '/sessions',
]
]);
echo $kirby->render();
(...this is served from /public
which is the Apache root for site.)
from kirby3-srcset.
from kirby3-srcset.
@bnomei If you have time, could you point me in the direction of how to update the added component code to work with MarkdownExtra? I can't from the code here understand the specifics, but willing to learn if I can help.
Line 60 in dd6c6f3
from kirby3-srcset.
I have the same issue.
Alternately, if I do have the Editor installed, using the lazysrcset
Kirby Tag in a standard textarea does not render an image.
from kirby3-srcset.
https://github.com/bnomei/kirby3-srcset/releases/tag/v3.3.2 should fix that
from kirby3-srcset.
I have the same issue.
✅ fixed in 3.3.2
Alternately, if I do have the Editor installed, using the
lazysrcset
Kirby Tag in a standard textarea does not render an image.
👁 please verify that the image does also not appear in html src – it should be there. this plugin strongly optimized or the js lazysizes lib. it provides no default src for example. so unless you have lazysizes and proper css you might simply not see anything (but html code is there).
from kirby3-srcset.
The image does not appear in html src, only an inline style tag.
When I add the image as shown in screenshot here, the source renders as shown below.
// ...
<h1>About Me</h1>
<p>Test</p>
<style>.lazysrcset-ratio[data-ratio="61.8"]{padding-bottom:61.8%;}</style>
I had added this to my <head>
just before script srcs:
<style>
/* lazysrcset */
figure { width: 100%; }
img[data-sizes="auto"] { display: block; width: 100%; }
</style>
and I have this added to my existing _lazyload.scss
partial (aleady had lazysizes involved):
.lazysrcset-ratio {
position: relative;
}
.lazysrcset-ratio > img {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.lazysrcset-ratio > img:after {
display: block;
width: 100%;
height: 0;
content: '';
}
Please let me know if it looks like I'm doing some thing wrong. Hope this info helps.
from kirby3-srcset.
Yes, I agree with your thought—since the style tag was printing, there was at least some 'awareness' of an image, but odd that there's no img tag printing though.
When I add those lines to the Srcset class, the kirbytext prints as a string.
from kirby3-srcset.
I have a very basic customization for generating srcset in kirbytext that I'm going to work with right now, but I'm happy to do more testing/troubleshooting on this if it helps you. Just let me know!
When I have a project where I'll use the Editor I'll definitely install this though.
from kirby3-srcset.
please use $this->text
with ->
.
from kirby3-srcset.
from kirby3-srcset.
Sorry was my fault. i typed that to hastily. 😅
from kirby3-srcset.
from kirby3-srcset.
OK, so I fixed dump and no I'm seeing:
<h1>About Me</h1>
string(112) "
<figure class="lazysrcset-ratio">
<img alt="" class=" lazyloaded"
src="https://srcset.net/placeholder.jpg">
</figure>
" string(533) "
<figure class="lazysrcset-ratio">
<img alt=""
class="lazyautosizes lazyloaded"
data-src="//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-q80.jpg"
data-srcset="//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-300x.jpg 300w,
//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-800x.jpg 800w,
//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-1024x.jpg 1024w"
data-thumb-srcset=""
data-sizes="auto" sizes="777px"
srcset="//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-300x.jpg 300w,
//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-800x.jpg 800w,
//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-1024x.jpg 1024w"
src="//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-q80.jpg">
</figure>
" string(625) "
<style>.lazysrcset-ratio[data-ratio="61.8"]{padding-bottom:61.8%;}</style>
<figure data-ratio="61.8" class="lazysrcset-ratio">
<img alt="" class="lazyautosizes lazyloaded"
data-src="//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-q80.jpg"
data-srcset="//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-300x.jpg 300w,
//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-800x.jpg 800w,
//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-1024x.jpg 1024w"
data-thumb-srcset=""
data-sizes="auto" sizes="777px"
srcset="//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-300x.jpg 300w,
//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-800x.jpg 800w,
//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-1024x.jpg 1024w"
src="//localhost:3000/media/pages/about/4290059797-1583359893/colin-connect-2018-q80.jpg">
</figure>
"
The last of the three <figure>
s renders an image to the page.
from kirby3-srcset.
i am not sure where classes lazyautosizes lazyloaded
come from. the default class of plugin is named lazyload
and that matches the lazysizes default.
did you overwrite that in a config? are you using a different lazy loader lib?
from kirby3-srcset.
A couple of quick notes.
Missing elements after lazysrcset
kirbytext
If I use (image: ...
, like this
I get this
<main id="content" class="o-content o-layout__grid-item c-page">
<h1 class="c-page__title">About Me</h1>
<p>Test</p>
<p>Maybe1</p>
<figure><img alt="Colin and Conor" src="http://colinjohnston.local/media/pages/about/4290059797-1583363454/colin-connect-2018.jpg"><figcaption>Test Caption</figcaption></figure>
<p>Maybe2</p>
</main>
When I use (lazysrcset: ...
like this
I get this
<main id="content" class="o-content o-layout__grid-item c-page">
<h1 class="c-page__title">About Me</h1>
<p>Test</p>
<p>Maybe1</p>
<style>.lazysrcset-ratio[data-ratio="61.8"]{padding-bottom:61.8%;}</style>
</main>
This shows that in the case of lazysrcset
nothing after the kirbytext entry renders in html i.e. nothing after the missing <figure>...</figure>
renders until the end of the parent <main>
so there's no <p>Maybe2</p>
in second example.
Commenting out applyRatio
line at end of constructor
If I comment out L58 in Srcset class, the image renders with complete srcset code, but of course is missing the <style>
tag with ratio.
I hope some of this helps in troubleshooting!
from kirby3-srcset.
this is strange. i expected either the kirbytext() to fail with an error but not to render partial output. can you PM me the relevant parts of your project in slack? i see no other efficient way to debug this otherwise.
from kirby3-srcset.
@bnomei 3.3.3
initially didn't work for me. I tracked it down to Markdown Extra.
Scenario 1
Disable Markdown Extra -> everything works including ratio inline class etc., but losing my additional markdown classes.
Scenario 2
Enable Markdown Extra and add ratio: false
for each image - > everything but ratio works, and I have my added markdown classes.
But so much further along than I was—thanks for the update.
from kirby3-srcset.
ah. i had to create a custom driver. i need to take care of the extra option it seems.
from kirby3-srcset.
Hello, I get an Reference Error in the panel, when this plugin is installed but the editor plugin is not.
ReferenceError: editor is not defined
This is caused by this: https://github.com/bnomei/kirby3-srcset/blob/master/src/index.js#L3
from kirby3-srcset.
@bezin can you check if if(editor) { editor.block("srcset", Srcset); }
does solve it?
from kirby3-srcset.
@colin-johnston found a fix. see v3.3.5
from kirby3-srcset.
Related Issues (20)
- Plugin broken with Kirby 3.1.0 (rc1) HOT 1
- Only calls imgSrcset() HOT 1
- add editor field block
- adjust css for figcaption inside figure
- `lazysrcset()` file method throws error if null is passed as argument.
- Warning with Editor Plugin HOT 5
- Thumbs with CDN
- option to force creation of file (for headless) HOT 1
- Markdown Extra <srcsetplugin> custom tag breaks grid layout HOT 2
- kirby3-srcset breaks distantnative/retour-for-kirby HOT 5
- lazysrcset can not create srcset from null HOT 4
- Editor field missing since v3.3.7
- Srcset with comma instead of period HOT 1
- Support multiple image formats for the same file HOT 5
- data-bgset HOT 1
- use kirbyup
- Classes are not added when using the Kirby tag HOT 4
- make kirbytag link attr smarter HOT 1
- add optional support for sizes attr HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kirby3-srcset.