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

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

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

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.