Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

src-attribute not applying and WebP support? #27

Open
ConduciveMammal opened this issue Jan 5, 2019 · 10 comments
Open

src-attribute not applying and WebP support? #27

ConduciveMammal opened this issue Jan 5, 2019 · 10 comments

Comments

@ConduciveMammal
Copy link

After filling in the src-attribute field, it doesn't seem to be working on the frontend. src-attribute is working fine.

Also, would it be possible to have the plugin generate the images in WebP format as well?
@tobias-kuendig
Copy link
Member

Thank you for your bug report. Can you see if the problem is fixed in 2.0.2?

Support for WebP would be a great addition but I currently don't have the ressources to implement it myself. I opened an issue in case someone wants to submit a PR: #28

@ConduciveMammal
Copy link
Author

Thanks a lot! I’ll give it a test later on tonight.

I’m afraid I’m still fairly new to October and php, but perhaps this php module might help?

@ConduciveMammal
Copy link
Author

Hey @tobias-kuendig, so I've just updated the plugin, and unfortunately it doesn't seem to have made a difference.

I tried resetting the settings to default and re-adding them and also adding new images, neither of which showed the updated data-src attribute.

@ConduciveMammal
Copy link
Author

Hmm in the event log, I get this message on the new image I tried to upload.
[OFFLINE.ResponsiveImages] Could not process image http://localhost:8888/storage/app/uploads/public/5c3/3c7/86d/5c33c786da39d550014529.jpg

That image is this, for reference.
charlie_17_agatha

@tobias-kuendig
Copy link
Member

Is it possible that the image is rather large?

If you look at your storage/logs/system.log file, do you have any additional information with the Could not process image entry?

@ConduciveMammal
Copy link
Author

ConduciveMammal commented Jan 8, 2019 •
edited
Loading

Hmm it doesn't appear to be, to test, I uploaded a new image at 100x100 with no luck.

The latest relevant thing I can find in the log file is:

[2019-01-08 20:54:24] development.WARNING: [OFFLINE.ResponsiveImages] DOM manipulation failed: DOMDocument::loadHTML(): htmlParseEntityRef: expecting ';' in Entity, line: 1 {"exception":"[object] (ErrorException(code: 0): DOMDocument::loadHTML(): htmlParseEntityRef: expecting ';' in Entity, line: 1 at /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/DomManipulator.php:107)
[stacktrace]
#0 [internal function]: Illuminate\\Foundation\\Bootstrap\\HandleExceptions->handleError(2, 'DOMDocument::lo...', '/Applications/M...', 107, Array)
#1 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/DomManipulator.php(107): DOMDocument->loadHTML('<img src='http:...')
#2 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/DomManipulator.php(79): OFFLINE\\ResponsiveImages\\Classes\\DomManipulator->loadImageTag('<img src='http:...')
#3 [internal function]: OFFLINE\\ResponsiveImages\\Classes\\DomManipulator->OFFLINE\\ResponsiveImages\\Classes\\{closure}(Array)
#4 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/DomManipulator.php(67): preg_replace_callback('/<img[\\\\s\\\\S][^>]...', Object(Closure), '<!DOCTYPE html>...')
#5 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/ResponsiveImagesMiddleware.php(48): OFFLINE\\ResponsiveImages\\Classes\\DomManipulator->process()
#6 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): OFFLINE\\ResponsiveImages\\Classes\\ResponsiveImagesMiddleware->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#7 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
#8 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php(46): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
#9 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\\Foundation\\Http\\Middleware\\CheckForMaintenanceMode->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#10 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
#11 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(102): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
#12 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(151): Illuminate\\Pipeline\\Pipeline->then(Object(Closure))
#13 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(116): Illuminate\\Foundation\\Http\\Kernel->sendRequestThroughRouter(Object(Illuminate\\Http\\Request))
#14 /Applications/MAMP/htdocs/index.php(43): Illuminate\\Foundation\\Http\\Kernel->handle(Object(Illuminate\\Http\\Request))
#15 {main}
"}

Here's the image I uploaded this time
swatch-firebrick

@tobias-kuendig
Copy link
Member

DOMDocument::loadHTML(): htmlParseEntityRef: expecting ';' in Entity

There seems to be a problem when parsing the html. Could you provide an actual html snippet from your browser's "View page source" page (not from the dev tools!)?

The img tag itself and some of the surrounding elements would be great.

@ConduciveMammal
Copy link
Author

Sure thing,

Here's one using the swatch above, in this one the data-srcset seems to be working:

<header class="header__slideshow--wrapper">
  <div class="portfolio-slideshow" data-portfolio-slideshow>
    <div class="slideshow__item">
      <div class="content">
        <img src="//localhost:3000/storage/app/uploads/public/5c3/50d/d1e/5c350dd1e1b2f154077594.png" class="slideshow__image lazyload"
          alt="" data-srcset="//localhost:3000/storage/app/uploads/public/5c3/50d/d1e/5c350dd1e1b2f154077594.png 100w"
          sizes="(max-width: 100px) 100vw, 100px">
      </div>
    </div>
  </div>
</header>

And here's another that isn't working at all, plus other slides that also aren't working.

<header class="header__slideshow--wrapper">
  <div class="portfolio-slideshow" data-portfolio-slideshow>
    <div class="slideshow__item">
      <div class="content">
        <img src="//localhost:3000/storage/app/uploads/public/5c3/27e/938/5c327e938c636163248045.jpg" class="slideshow__image" alt="">
      </div>
    </div>
    <div class="slideshow__item">
      <div class="content">
        <img src="//localhost:3000/storage/app/uploads/public/5c3/27e/979/5c327e97956fe054857173.jpg" class="slideshow__image" alt="">
      </div>
    </div>
    <div class="slideshow__item">
      <div class="content">
        <img src="//localhost:3000/storage/app/uploads/public/5c3/27e/982/5c327e98248c3973017768.jpg" class="slideshow__image" alt="">
      </div>
    </div>
    <div class="slideshow__item">
      <div class="content">
        <img src="//localhost:3000/storage/app/uploads/public/5c3/27e/989/5c327e989c651342566482.jpg" class="slideshow__image" alt="">
      </div>
    </div>
    <div class="slideshow__item">
      <div class="content">
        <img src="//localhost:3000/storage/app/uploads/public/5c3/27e/98d/5c327e98d6ae6387809633.jpg" class="slideshow__image" alt="">
      </div>
    </div>
  </div>
</header>

@tobias-kuendig
Copy link
Member

Thank you for your patience. Can you test this with version 2.0.3?

It looks like the relative protocol URLs generated by October are the problem.

@ConduciveMammal
Copy link
Author

ConduciveMammal commented Jan 15, 2019 •
edited
Loading

Hmmm really sorry, you're going to hate me. Doesn't seem like it made much difference, although its producing a new log error.

[2019-01-15 21:30:32] development.WARNING: [OFFLINE.ResponsiveImages] Could not process image http://localhost:8888/storage/app/uploads/public/146/9f9/3a2/thumb__585_400_0_0_crop.jpg {"exception":"[object] (ErrorException(code: 0): imagesx(): supplied resource is not a valid Image resource at /Applications/MAMP/htdocs/vendor/october/rain/src/Database/Attach/Resizer.php:227)
[stacktrace]
#0 [internal function]: Illuminate\\Foundation\\Bootstrap\\HandleExceptions->handleError(2, 'imagesx(): supp...', '/Applications/M...', 227, Array)
#1 /Applications/MAMP/htdocs/vendor/october/rain/src/Database/Attach/Resizer.php(227): imagesx(Resource id #776)
#2 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/ImageResizer.php(23): October\\Rain\\Database\\Attach\\Resizer->getWidth()
#3 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/ResponsiveImage.php(168): OFFLINE\\ResponsiveImages\\Classes\\ImageResizer->getWidth()
#4 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/ResponsiveImage.php(156): OFFLINE\\ResponsiveImages\\Classes\\ResponsiveImage->createCopy('768')
#5 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/ResponsiveImage.php(108): OFFLINE\\ResponsiveImages\\Classes\\ResponsiveImage->createCopies()
#6 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/DomManipulator.php(121): OFFLINE\\ResponsiveImages\\Classes\\ResponsiveImage->__construct('http://localhos...')
#7 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/DomManipulator.php(82): OFFLINE\\ResponsiveImages\\Classes\\DomManipulator->getResponsiveImage('http://localhos...')
#8 [internal function]: OFFLINE\\ResponsiveImages\\Classes\\DomManipulator->OFFLINE\\ResponsiveImages\\Classes\\{closure}(Array)
#9 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/DomManipulator.php(67): preg_replace_callback('/<img[\\\\s\\\\S][^>]...', Object(Closure), '<!DOCTYPE html>...')
#10 /Applications/MAMP/htdocs/plugins/offline/responsiveimages/classes/ResponsiveImagesMiddleware.php(48): OFFLINE\\ResponsiveImages\\Classes\\DomManipulator->process()
#11 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): OFFLINE\\ResponsiveImages\\Classes\\ResponsiveImagesMiddleware->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#12 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
#13 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php(46): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
#14 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\\Foundation\\Http\\Middleware\\CheckForMaintenanceMode->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#15 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
#16 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(102): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
#17 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(151): Illuminate\\Pipeline\\Pipeline->then(Object(Closure))
#18 /Applications/MAMP/htdocs/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(116): Illuminate\\Foundation\\Http\\Kernel->sendRequestThroughRouter(Object(Illuminate\\Http\\Request))
#19 /Applications/MAMP/htdocs/index.php(43): Illuminate\\Foundation\\Http\\Kernel->handle(Object(Illuminate\\Http\\Request))
#20 {main}
"}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tobias-kuendig @ConduciveMammal