Jump to content

TextformatterSrcset - Responsive images with HiDPI, lazyload and much more


Philipp
 Share

Recommended Posts

I've created a new Textformatter in the last couple of days:

  
TextformatterSrcset will add a srcset attribute to all your images inside a Textarea. Depending on your configuration, it will create all sizes for the images, make a double-sized one for HiDPI/Retina devices and you can even create a low-quality placeholder. Read more at Github and make sure that you read the examples.

textformattersrcset-screen.jpg
 
It was build to work perfect with the two scripts from Alexander Farkas, respimage and Lazysizes. Do yourself a favor and try them out. They don't require jQuery, they have wonderful fallback and are fast and easy to use. 
 
More information and downloads on our Github repo.

This module is currently quite stable and tested against multiple configuration variations. It works Some code improvements are needed, so use with care.

Feel free to ask any questions you might have.

  • Like 18
Link to comment
Share on other sites

  • 2 weeks later...

How can i use this for image fields instead of body or another content field?

So if i added one or multiple images i want to use a simple code to output the image tag with srcset attributes:

<?php
echo $page->images->first->srcset;
?>

Is that possible or is there an alternative?

I know that i can write the code by myself by using the following code, but it could be nicer if the module does the output for me.

<?php

echo "<img src='{$page->images->first->url}' srcset='{$page->images->first->url->width(320)} 320w, {$page->images->first->url->width(320)} 700w';

?>

Link to comment
Share on other sites

You could run the Textformatter manually by following somas reply here. Build a normal image string and pass it to the formatter.

I think it would be a great idea, to make this to a module that would extend the PageImage. Using the same configuration, it could provide an easy way to generate markup. On my own sites, I just have another function in my functions.php taht basically does the same stuff when you pass an image.

Link to comment
Share on other sites

I should be enough to make your Textformatter autoload, and add a hook 'srcset' to Pageimage from your module.

That was what I meant with "extending". Sorry for beeing unclear.

So I can make a hook to inside a TextFormatter module? Have to try this over the weekend.

  • Like 1
Link to comment
Share on other sites

Now i tried

 if (count($page->images)) {
            $str=  "<img src='{$page->images->first->url}' class='img-responsive' alt='' />";
            $modules->TextformatterSrcset->formatValue(new Page(), new Field(), $str);
            echo $str;
        }

as suggested by soma, but i get a 500 Internal Server Error. Can you see whats wrong?

Link to comment
Share on other sites

  • 3 months later...
  • 7 months later...
  • 7 months later...

Hello,

I hope, I'm in the right section here. I have a problem with the TextformatterSrcset. I've downloaded the module and installed it under site/modules/TextformatterSrcset. On the configration page I've set Resolution: 320,720,960 for test purposes and use smallest size as LQP.

In my body field under details I added the TextformatterSrcset. Then I loaded up an image (called test.jpg) to my image field (array). In site/assets/files/1
I can see now the file test.jpg. When I insert the image in the body, in site/assets/files/1 are two more file:

test.0x100.jpg and
test.1020x0-is.jpg

When I now want to view the site, three new images appears in the site/assets/files/1 folder:

test.320x0.jpg
test.720x0.jpg
test.960x0.jpg

but in the browser I see the following errors:

Notice: Undefined offset: 0 in /var/www/clients/client5/web11/web/site/modules/TextformatterSrcset/TextformatterSrcset.module on line 100
Notice: Undefined offset: 1 in /var/www/clients/client5/web11/web/site/modules/TextformatterSrcset/TextformatterSrcset.module on line 122
Notice: Trying to get property of non-object in /var/www/clients/client5/web11/web/wire/core/Page.php on line 685
Warning: Invalid argument supplied for foreach() in /var/www/clients/client5/web11/web/site/modules/TextformatterSrcset/TextformatterSrcset.module on line 131
Notice: Undefined offset: -1 in /var/www/clients/client5/web11/web/site/modules/TextformatterSrcset/TextformatterSrcset.module on line 143
Notice: Undefined variable: image in /var/www/clients/client5/web11/web/site/modules/TextformatterSrcset/TextformatterSrcset.module on line 148
Notice: Trying to get property of non-object in /var/www/clients/client5/web11/web/site/modules/TextformatterSrcset/TextformatterSrcset.module on line 148
Notice: Undefined variable: image in /var/www/clients/client5/web11/web/site/modules/TextformatterSrcset/TextformatterSrcset.module on line 190
Fatal error: Call to a member function width() on null in /var/www/clients/client5/web11/web/site/modules/TextformatterSrcset/TextformatterSrcset.module on line 190
Error: Call to a member function width() on null (line 190 of /var/www/clients/client5/web11/web/site/modules/TextformatterSrcset/TextformatterSrcset.module)
This error message was shown because site is in debug mode ($config->debug = true; in /site/config.php). Error has been logged.

Someone have a tip for me what my mistake is?

My development equipment:

Server
Distributor ID: Debian
Description:    Debian GNU/Linux 7.10 (wheezy)
Release:        7.10
Codename:       wheezy
PHP 5.4.45-0+deb7u2
Zend Engine v2.4.0 with XCache v2.0.0

Software
ProcessWire 2.7.2
TextformatterSrcset 1.0.0

Sorry for my english, it's not my native language.

Greetings Tom

[NOT SOLVED] Problem returns on new server too. Don't know what to do to use this module.

Link to comment
Share on other sites

  • 3 weeks later...
  • 1 year later...
  • 2 years later...

I tried this with PW 3.0.144 and it's not longer working.
Showing these errors on the frontend, when a site with an image inside cke is rendered:

PHP Notice: Undefined variable: image in .../TextformatterSrcset/TextformatterSrcset.module:178
PHP Notice: Trying to get property of non-object in .../TextformatterSrcset/TextformatterSrcset.module:178
PHP Notice: Undefined variable: image in .../TextformatterSrcset/TextformatterSrcset.module:182


Any Ideas how to fix this? Would be cool to still be able to use this helpful module

Link to comment
Share on other sites

EDIT: Turns out it is still working with PW 3.0.144. The error happens when you have two image fields and one of them is empty. I had to make both image fields an array in the settings to solve the error. now everything works as expected. Maybe someone can confirm this bug and make a suggestion how to solve it in the module code?

Link to comment
Share on other sites

  • 2 months later...
On 1/27/2020 at 5:57 PM, jploch said:

EDIT: Turns out it is still working with PW 3.0.144. The error happens when you have two image fields and one of them is empty. I had to make both image fields an array in the settings to solve the error. now everything works as expected. Maybe someone can confirm this bug and make a suggestion how to solve it in the module code?

I made a fork because i needed some changes for my use - maybe it can be useful.

https://github.com/dauni/TextformatterSrcset/releases/tag/1.0.6

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...