Jump to content
Philipp

TextformatterSrcset - Responsive images with HiDPI, lazyload and much more

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

Share this post


Link to post
Share on other sites

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';

?>

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

@philipp I think there is no need to extend Pageimage or FieldtypeImage. I should be enough to make your Textformatter autoload, and add a hook 'srcset' to Pageimage from your module.

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Adding a new method to pageimage is great. This way people can use the TextformatterSrcset with whatever imagefield they like.

Share this post


Link to post
Share on other sites

Yeah, thats exactly what i meant @horst, @Philipp. Hope someone comes up with an easy solution.

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Is there any update on the matter, using the module on not just body images?

Unfortunately I can't get the somas method working.

  • Like 1

Share this post


Link to post
Share on other sites

I tried to get it to work with an image field, instead of the textfield, somas post didn't work for me.

Could someone help me out or are there any news on the module to support image fields?

Share this post


Link to post
Share on other sites

A textformatter works on text, as the name suggests, and not on images. It should work like that:

$img_markup_srcset = $modules->get("TextformatterSrcset")->formatValue(new Page(), new Field(), "<img src='…' />");
  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

The problem is that the textformatter tries to call the width function on an non-existent image.

Have you tried to uncheck the option LQP? Is the error still occuring then?

Share this post


Link to post
Share on other sites

Has anyone had any luck getting this textformatter to work on CKEditor fields that are part of a repeater matrix itemtype? 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites
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 3

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...