Lazy load in 3rd-party resources

Adriano Faria · February 14, 2019

How this works? Is this automatic? Or do we have to change something in image call in templates? I see you mention a setting to show a blank image in some places.

Tks.

Midnight Modding · February 15, 2019

I can't even find anything documenting any changes third party devs can or must make for 4.4. If it's in contributor forum, I don't have access. Dev docs on here has no new docs for 4.4, but there's a warning that third party apps may not be compatible with 4.4, so clearly there are some things we may need to change.

Edited February 15, 2019 by Midnight Modding

Hegnauer.io · February 15, 2019

1 hour ago, Midnight Modding said:

I can't even find anything documenting any changes third party devs can or must make for 4.4. If it's in contributor forum, I don't have access. Dev docs on here has no new docs for 4.4, but there's a warning that third party apps may not be compatible with 4.4, so clearly there are some things we may need to change.

Weird that documentation like this is lacking in an otherwise stellar product.

Midnight Modding · February 15, 2019

11 minutes ago, micasasucasa said:

Weird that documentation like this is lacking in an otherwise stellar product.

someone just told me that IPS had said there will be some once it is stable. I don't guess I'm necessarily in a hurry, since I've so far only updated private ones and those clients won't use 4.4 soon, most likely. Still, I feel better when I know I have something ready. 🙂

I don't think 4.3 affected me any, so I'm hoping 4.4 changes won't affect me much.

Edited February 15, 2019 by Midnight Modding

newbie LAC · February 15, 2019

You should to use additional attributes

img[data-src]

[data-background-src]

iframe[data-embed-src]

video[data-video-embed]

+ controllers which support lazy load or attribute data-ipsLazyLoad

Examples

<div data-controller='core.front.core.lightboxedImages'>
	{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='link_to_img' alt="alt_text">
	{{else}}
		<img src='link_to_img' alt="alt_text">
	{{endif}}
</div>

<div data-ipsLazyLoad>
	{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='link_to_img' alt="alt_text">
	{{else}}
		<img src='link_to_img' alt="alt_text">
	{{endif}}
</div>

Edited February 15, 2019 by newbie LAC

bfarber · February 15, 2019

There is a developer changelog in the forums already, but it's possible not every specific thing has been documented. Feel free to reply to that topic if you find something missing you'd like to see covered.

LaCollision · March 10, 2019

If you develop an app / plugin, and that you want to display a WYSIWYG editor, you must add the controller:

data-controller='core.front.core.lightboxedImages'

… to the div that includes your WYSIWYG editor content.

For instance:

<div class="ipsType_richText ipsContained" data-controller="core.front.core.lightboxedImages">
  {$object->content|raw}
</div>

Daniel F · March 10, 2019

39 minutes ago, LaCollision said:
If you develop an app / plugin, and that you want to display a WYSIWYG editor, you must add the controller:
data-controller='core.front.core.lightboxedImages'
… to the div that includes your WYSIWYG editor content.

For instance:
<div class="ipsType_richText ipsContained" data-controller="core.front.core.lightboxedImages">
  {$object->content|raw}
</div>

We've improved this for a future release 🙂

I'm not going to mention any version yet😇, please pay attention to the dev change topics , but in the future you'll be able to use a generic template for this.

{template="richText" group="global" app="core" location="global" params="the content which includes the media "}

Template parameters:

$value, $extraClasses=array(), $extraControllers=array(), $extraAttributes=array()

and the template will include all the necessary code. This is also going to make it future proof, so if anything else changes, we'll only need to adjust this template 🙂

LaCollision · March 10, 2019

15 minutes ago, Daniel F said:

We've improved this for a future release 🙂

I'm not going to mention any version yet😇, please pay attention to the dev change topics , but in the future you'll be able to use a generic template for this.

That's GREAT news, thank you!!!

sobrenome · March 16, 2019

On 3/10/2019 at 2:39 PM, Daniel F said:

and the template will include all the necessary code. This is also going to make it future proof, so if anything else changes, we'll only need to adjust this template 🙂

awesome!

LaCollision · March 21, 2019

On 3/10/2019 at 6:39 PM, Daniel F said:
We've improved this for a future release 🙂

I'm not going to mention any version yet😇, please pay attention to the dev change topics , but in the future you'll be able to use a generic template for this.
{template="richText" group="global" app="core" location="global" params="the content which includes the media "}
		
Template parameters:
$value, $extraClasses=array(), $extraControllers=array(), $extraAttributes=array()
and the template will include all the necessary code. This is also going to make it future proof, so if anything else changes, we'll only need to adjust this template 🙂

Hi @Daniel F,

I can see the richText template in 4.4.2, that's great, thank you!

Just a suggestion:

For SEO purposes, the rich text could be embed in a h1, or h2, or hx tag…

So that would be great for the richText template to have an additional 'tag' parameter:

<ips:template parameters="$value, $tag = 'div', $extraClasses=array(), $extraControllers=array(), $extraAttributes=array()" />
{{$controllers = array_merge( array('core.front.core.lightboxedImages'), $extraControllers );}}
<{$tag} class='ipsType_richText {expression="implode(' ', $extraClasses)"}' data-controller='{expression="implode(',', $controllers)"}' {{foreach $extraAttributes as $attribute}} {$attribute|raw}{{endforeach}}>
	{$value|raw}
</{$tag}>

Thanks!

bfarber · March 21, 2019

5 hours ago, LaCollision said:
Hi @Daniel F,

I can see the richText template in 4.4.2, that's great, thank you!

Just a suggestion:

For SEO purposes, the rich text could be embed in a h1, or h2, or hx tag…

So that would be great for the richText template to have an additional 'tag' parameter:
<ips:template parameters="$value, $tag = 'div', $extraClasses=array(), $extraControllers=array(), $extraAttributes=array()" />
{{$controllers = array_merge( array('core.front.core.lightboxedImages'), $extraControllers );}}
<{$tag} class='ipsType_richText {expression="implode(' ', $extraClasses)"}' data-controller='{expression="implode(',', $controllers)"}' {{foreach $extraAttributes as $attribute}} {$attribute|raw}{{endforeach}}>
	{$value|raw}
</{$tag}>
Thanks!

This template is used to show posted WYSIWYG content, and is 99.9% of the time NOT a heading, so I don't see much point personally.

Adriano Faria · March 22, 2019

Anyone having issue to display on ACP? It works fine on front-end but I can't seem make it work on ACP:

- Front-end:

		<div data-ipsTruncate data-ipsTruncate-size='3 lines'>
			<span class='ipsType_break ipsContained' style='white-space:normal;'>
				{template="richText" group="global" app="core" location="global" params="$row['note_content']"}
			</span>
		</div>

ACP table:

		'note_content' => function( $val, $row )
		{
			return \IPS\Theme::i()->getTemplate( 'members', 'membernotes', 'admin' )->noteContent( $val );
		},

Template noteContent:

<ips:template parameters="$note" />
<div data-ipsTruncate data-ipsTruncate-size='3 lines'>
	<span class='ipsType_break ipsContained' style='white-space:normal;'>
		{template="richText" group="global" app="core" location="global" params="$note"}
	</span>
</div>

Doesn't show the image.

Stuart Silvester · March 22, 2019

25 minutes ago, Adriano Faria said:

Anyone having issue to display on ACP? It works fine on front-end but I can't seem make it work on ACP:

- Front-end:


		<div data-ipsTruncate data-ipsTruncate-size='3 lines'>
			<span class='ipsType_break ipsContained' style='white-space:normal;'>
				{template="richText" group="global" app="core" location="global" params="$row['note_content']"}
			</span>
		</div>

ACP table:


		'note_content' => function( $val, $row )
		{
			return \IPS\Theme::i()->getTemplate( 'members', 'membernotes', 'admin' )->noteContent( $val );
		},

Template noteContent:


<ips:template parameters="$note" />
<div data-ipsTruncate data-ipsTruncate-size='3 lines'>
	<span class='ipsType_break ipsContained' style='white-space:normal;'>
		{template="richText" group="global" app="core" location="global" params="$note"}
	</span>
</div>

Doesn't show the image.

No it's a front-end thing only, core.front.core.lightboxedImages is a front end controller only. In the AdminCP, you could just add data-ipsLazyLoad to your container tag

Adriano Faria · March 22, 2019

1 minute ago, Stuart Silvester said:

In the AdminCP, you could just add data-ipsLazyLoad to your container tag

That worked:

Thank you. 👍

SJ77 · April 9, 2019

On 2/14/2019 at 9:54 PM, newbie LAC said:

You should to use additional attributes

img[data-src]

[data-background-src]

iframe[data-embed-src]

video[data-video-embed]

+ controllers which support lazy load or attribute data-ipsLazyLoad

Examples


<div data-controller='core.front.core.lightboxedImages'>
	{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='link_to_img' alt="alt_text">
	{{else}}
		<img src='link_to_img' alt="alt_text">
	{{endif}}
</div>


<div data-ipsLazyLoad>
	{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='link_to_img' alt="alt_text">
	{{else}}
		<img src='link_to_img' alt="alt_text">
	{{endif}}
</div>

I use your image expand and also your image download count plugin. Will this work if I choose lazy load?

newbie LAC · April 10, 2019

Hello,

13 hours ago, SJ77 said:

image download count plugin.

What the plugin?

This plugin only add additional info and doesn't affect on images

13 hours ago, SJ77 said:

I use your image expand . Will this work if I choose lazy load?

Yes.

Edited April 10, 2019 by newbie LAC

sobrenome · May 6, 2019

On 3/22/2019 at 9:47 AM, Stuart Silvester said:

No it's a front-end thing only, core.front.core.lightboxedImages is a front end controller only. In the AdminCP, you could just add data-ipsLazyLoad to your container tag

Is this the final version? How can I add it to my custom Pages templates?

Daniel F · May 6, 2019

You can use the richText template now for the ACP and Frontend 🙂

sobrenome · May 7, 2019

20 hours ago, Daniel F said:

You can use the richText template now for the ACP and Frontend 🙂

Sorry, I could not figure out how to do it yet...

sobrenome · May 7, 2019

Should be like this:

<img src="{file="$record->field_103" extensions="cms_Records"}" alt="{$record->_title}: posição inicial" data-ipsLazyLoad>

sobrenome · July 14, 2019

On 3/10/2019 at 2:39 PM, Daniel F said:
I'm not going to mention any version yet😇, please pay attention to the dev change topics , but in the future you'll be able to use a generic template for this.
{template="richText" group="global" app="core" location="global" params="the content which includes the media "}
		

Hello, to implement lazy loading for an image I should call the image using this template just placing in the params”” the image source, like $record_image for example?

Daniel F · July 14, 2019

32 minutes ago, sobrenome said:

Hello, to implement lazy loading for an image I should call the image using this template just placing in the params”” the image source, like $record_image for example?

No, there’s no need for the template if it’s only for an image. Please take a look at the guides for further information.

sobrenome · July 14, 2019

Let me see If I get it. For Pages $record_image load using the lazy load the code should be:

<div data-ipsLazyLoad>
{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='{$record_image}' class='ipsCoverPhoto_photo' data-action="toggleCoverPhoto" alt='my image alt text'>
{{else}}
		<img src='{$record_image}' class='ipsCoverPhoto_photo' data-action="toggleCoverPhoto" alt='my image alt text'>
{{endif}}
</div>

sobrenome · July 22, 2019

Hello! I could manage it! Thanks! Wonder why profile images are not loaded by lazy loading, as long as they can be big.

I have changed the template userPhoto to add the lazy loading, but when I insert the <div data-ipsLazyLoad> wrapping the image it breaks the website design. Is it possible to add lazy loading for profile images in the next release?

Thanks!

Invision Community 4: SEO, prepare for v5 and dormant account notifications

Invision Community 5: Beta testing and latest updates

Invision Community 4: A more professional report center

Invision Community 5: A video walkthrough creating a custom theme and homepage

Lazy load in 3rd-party resources

Recommended Posts

Adriano Faria

Midnight Modding

Hegnauer.io

Midnight Modding

newbie LAC

bfarber

LaCollision

Daniel F

LaCollision

sobrenome

LaCollision

bfarber

Adriano Faria

Stuart Silvester

Adriano Faria

SJ77

newbie LAC

sobrenome

Daniel F

sobrenome

sobrenome

sobrenome

Daniel F

sobrenome

sobrenome

Recently Browsing 0 members

More