Adriano Faria Posted February 14, 2019 Posted 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. Joel R, Cristian Weiser and crmarks 2 1
Midnight Modding Posted February 15, 2019 Posted February 15, 2019 (edited) 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 Posted February 15, 2019 Posted 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. sobrenome 1
Midnight Modding Posted February 15, 2019 Posted February 15, 2019 (edited) 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 sobrenome 1
Solution newbie LAC Posted February 15, 2019 Solution Posted February 15, 2019 (edited) 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 LaCollision, Midnight Modding, sobrenome and 4 others 3 4
bfarber Posted February 15, 2019 Posted 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. sobrenome and Aiwa 2
LaCollision Posted March 10, 2019 Posted 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> sobrenome 1
Daniel F Posted March 10, 2019 Posted 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 🙂 crmarks, sobrenome and LaCollision 2 1
LaCollision Posted March 10, 2019 Posted 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!!! Daniel F and sobrenome 2
sobrenome Posted March 16, 2019 Posted 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 Posted March 21, 2019 Posted 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! sobrenome 1
bfarber Posted March 21, 2019 Posted 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. sobrenome 1
Adriano Faria Posted March 22, 2019 Author Posted 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 Posted March 22, 2019 Posted 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 1
Adriano Faria Posted March 22, 2019 Author Posted 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 Posted April 9, 2019 Posted 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? sobrenome 1
newbie LAC Posted April 10, 2019 Posted April 10, 2019 (edited) 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 SJ77 1
sobrenome Posted May 6, 2019 Posted 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 Posted May 6, 2019 Posted May 6, 2019 You can use the richText template now for the ACP and Frontend 🙂 sobrenome 1
sobrenome Posted May 7, 2019 Posted 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 Posted May 7, 2019 Posted 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 Posted July 14, 2019 Posted 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 Posted July 14, 2019 Posted 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 1
sobrenome Posted July 14, 2019 Posted 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 Posted July 22, 2019 Posted 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! crmarks 1
Recommended Posts