Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Lazy load on generated image tags
I’m not sure if this is more of a feature request, but workflow wise, it’s nice having a tab open to upload images, and writing an article in the other tab, now I know lazy load has been added into the latest version of txp, but when generating the tag from the images tab, it’s not there. So if I have <txp:image id=“whateverid” /> that I’m going to paste into the article, do I have to manually type into the generated tag then loading=“lazy”?
It would be great in general to have some control over the generated code, like maybe a checkbox to include lazy load, or maybe an option to generate the tag using a default form, if you could pick a form you could also maybe generate a tag for two images that will both use a certain form.
Would I be right on the original point though that you need to manually type that in? Many thanks!
…………………
I <3 txp
…………………
Offline
Re: Lazy load on generated image tags
hilaryaq wrote #332034:
Would I be right on the original point though that you need to manually type that in? Many thanks!
Maybe? I don’t really know… I much prefer using my own shortcode tag in order to have the whole construction for multiple image formats/sizes/…
The way the Textpattern image tag works is a bit, hmm, old ? I mean, it was fine in previous era of just needing one image for all rendering surfaces.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Lazy load on generated image tags
Are you using the tag builder? If so, yeah, it’s out of step with the attributes so you’ll need to add it manually. From memory, we also haven’t figured out how to offer global attributes in the tag builder yet. We’ll see if we can add some of the changed attributes to the builder prior to 4.8.8, as it’s an easy win.
The image tags are going to be modernised when the image handling branch (which is quite good fun to play with, even though it’s not saving transformed images yet) is given a bit more love and then merged in.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Lazy load on generated image tags
Awesome thanks Stef. I do use shortcodes too like phiw13. It’s probably more of a plugin request, but I have a shortcode that gives a layout for either two images side by side or image one side text the other, and it would be great to be able to store that shortcode somewhere within txp itself, and click to insert it into an article when writing one, or maybe even generate it via the images tab and just store these re-usable snippets while also easily populating them with image id’s. I don’t have it fully thought out but even for right now a dropdown with stored shortcodes would be SO handy to insert while you write articles, and then manually even add the id’s having the images tab open next to your current tab where you write the article. Even the ability to select multiple images and generate 1,2,3,4,5,6 with a ‘copy’ button, that you can then click into the write tab and simply paste in all the image id’s into perhaps your existing shortcode that you had just easily inserted via a dropdown and click. Hope that makes some sense!
…………………
I <3 txp
…………………
Offline
Re: Lazy load on generated image tags
IIRC, com_article_image has a pref to set the image insertion format. Setting it to something like
<txp:image id="{#}" loading="lazy" />might (partially) help.
Offline
Re: Lazy load on generated image tags
Have a look at smd_textile_bar. That has an option to nominate a form type as shortcodes. You select one from the list in the toolbar above the Body field, and you click the nearby hexagon button to insert it.
Does that help? It’s not quite a full solution in your case as you’d need to customise it to add the image. But it’s a start.
I also have another plugin (unpublished) called smd_imagery which I think still works. That pops up a browser to pick an image and then allows you to insert a custom template at the caret position in the body field, filled in with the selected image name(s)/ID(s). Kind of shortcode lite.
If that’s any good to you I can dig it out. Just drop me a line.
EDIT: it works very similarly to the way etc outlined. Use that option first, as it’s more fully featured.
Last edited by Bloke (2021-11-29 12:49:12)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Lazy load on generated image tags
Thanks etc!
Ooooo Stef that sounds like the thing, will install that locally and play around with it, thank you!!
…………………
I <3 txp
…………………
Offline
Re: Lazy load on generated image tags
Ok, I’ve built a thing, but I am strictly not a backend developer so I would love if those of you with amazing programming skills could look this over??
It works, and it will be SO helpful to inserting shortcodes whether they are for images or calls to action, but is there anything with the code that could be better? Also not too familiar with the txp plugin dev system so had to plugin to extend_col_1 but maybe there’s another way.
So basically you can store your shortcodes in an array, and then in the write tab, click to insert where your cursor is in txp body. So you could insert videos, images, calls to action, whatever you want to put in a form and use in your article layouts. Could also work well with themes, so for the theme I’ve made, I could update it with image left, image right, contact call to action and when they install the plugin it’s ready to go including css.
register_callback('pro_shortcodegen', 'article_ui', 'extend_col_1');
/**
Append with Jquery your article shortcodes
**/
function pro_shortcodegen($evt, $stp, $data, $rs)
{
$proScgarray = array('<txp::cta_contact />', '<txp::img_left mythumb="" text="" />', '<txp::img_right mythumb="" text="" />');
$proContaineropen = '
<script>
$(document).ready(function() {
$(".pro_scgcontainer").contents().prependTo(".body");
});
</script>
<div class="pro_scgcontainer">
';
$proContainerclose = '</div>';
$proToggle = '
<script>
$(document).ready(function() {
$("#pro_button").click(function()
{
$("#pro_shortcode_group").toggle();
});
$(".scgarray").click(function()
{
var $bodyTxt = $("#body");
var caretPos = $bodyTxt[0].selectionStart;
var textAreaTxt = $bodyTxt.val();
var txtToAdd = document.getElementById(this.id).innerHTML;
$bodyTxt.val(textAreaTxt.substring(0, caretPos) + txtToAdd.replace("<","<").replace(">", ">") + textAreaTxt.substring(caretPos) );
}
)});
</script>
<a id="pro_button" role="button" aria-controls="pro_shortcode_group">Show Shortcodes</a>';
$proStyle = '
<style>
#pro_button{
cursor: pointer;
}
.scgarray{
background:#f7f7f7;
border-radius:0.5em;
display:inline-block;
margin: 5px;
padding:0.5em;
}
#pro_shortcode_group{
display:flex;
}
</style>';
$data = '';
$i = 0;
foreach ($proScgarray as $value) {
$data = $data . '<div class=scgarray id=' . $i .'>' . htmlspecialchars($value) . '</div>';
$i++;
}
return $proStyle.$proContaineropen.$proToggle.'<div class="toggle" id="pro_shortcode_group" role="group" style="display:none;">'.$data.'</div>'.$proContainerclose;
}…………………
I <3 txp
…………………
Offline
Re: Lazy load on generated image tags
Nice work. Rather than hard-code the shortcodes, why not make it read them from Forms? Untested but you could do something like this:
$skin = Txp::get('\Textpattern\Skin\Skin')->getEditing();
$proScgarray = safe_column('Form', 'txp_form', "type='shortcode' AND skin='".doSlash($skin)."'");That would get you the contents of all the forms in the ‘shortcode’ group (make a new group in Advanced prefs). Then if you add any shortcodes in there, they’ll automatically be drawn into the plugin.
Might need some tweaking as I can’t remember what safe_column() returns – you might need to grab the array_keys() or array_values() but I think safe_column() pulls out the same keys and values so it might be good enough. I’m also rusty on how to get the current skin, but that code rings a bell.
Last edited by Bloke (2021-11-30 19:18:41)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Lazy load on generated image tags
Ooo nice! Will try that thanks Stef! :)
…………………
I <3 txp
…………………
Offline
Re: Lazy load on generated image tags
Couldn’t figure out how to make a new group, I enabled advanced prefs and can see the box but I think I’m maybe not using the right format to create a new form group or something. Fell at the first hurdle!!
…………………
I <3 txp
…………………
Offline
Re: Lazy load on generated image tags
Haha, did you try this?
[Shortcode]
*="Short codes"The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline