Module Image Tags

[loukote]

On 7/18/2013 at 10:55 PM, diogo said:

... Here is the string to import this Hanna Code:

!HannaCode:images:eyJuYW1lIjoiaW1hZ2VzIiwidHlwZSI6IjIiLCJjb2RlIjoiXC8qaGNfYXR0clxucD1cIjBcIlxuZj1cIjBcIlxubj1cIjBcIlxuaGNfYXR0cipcL1xuJG15UGFnZSA9ICRwID8gJHBhZ2VzLT5nZXQoJHApIDogJHBhZ2U7XHJcbiRmaWVsZE5hbWUgPSAkbXlQYWdlLT5maWVsZHMtPmdldCgndHlwZT1GaWVsZHR5cGVJbWFnZScpO1xyXG4kbXlGaWVsZCA9ICRmID8gJG15UGFnZS0+JGYgOiAkbXlQYWdlLT4kZmllbGROYW1lO1xyXG5cclxuJGluZGV4ID0gJG4tMTtcclxuXHJcbmlmKCRteUZpZWxkIGluc3RhbmNlb2YgUGFnZWltYWdlcyl7XHJcbiAgICBpZigkbil7XHJcbiAgICAgICAgJGltYWdlID0gJG15RmllbGQtPmVxKCRpbmRleCk7XHJcbiAgICAgICAgJGltYWdlID0gXCI8aW1nIGNsYXNzPSdJbWFnZVRhZ3MnIHNyYz0nJGltYWdlLT51cmwnIGFsdD0nJGltYWdlLT5kZXNjcmlwdGlvbic+XCI7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICAgICRpbWFnZSA9IFwiXCI7XHJcbiAgICAgICAgZm9yZWFjaCgkbXlGaWVsZCBhcyAkaW1nKXtcclxuICAgICAgICAgICAgJGltYWdlIC49IFwiPGltZyBjbGFzcz0nSW1hZ2VUYWdzJyBzcmM9JyRpbWctPnVybCcgYWx0PSckaW1nLT5kZXNjcmlwdGlvbic+XCI7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG4gICAgXHJcbn0gZWxzZSBpZigkbXlGaWVsZCBpbnN0YW5jZW9mIFBhZ2VpbWFnZSl7XHJcbiAgICAkaW1hZ2UgPSBcIjxpbWcgY2xhc3M9J0ltYWdlVGFncycgc3JjPSckZmllbGQtPnVybCcgYWx0PSckZmllbGQtPmRlc2NyaXB0aW9uJz5cIjtcclxufSBlbHNlIHtcclxuICAgICRpbWFnZSA9IFwiXCI7XHJcbn1cclxuXHJcbmVjaG8gJGltYWdlOyJ9/!HannaCode

@diogo, a late take on your HannaCode into one that returns a series of thumbnails, possibly limited from N to N+J, for the current or another page, in a <div> to be used with a lightbox of a kind (ready for MagnificPopup). Here is the code for reference:

!HannaCode:gallery:eyJuYW1lIjoiZ2FsbGVyeSIsInR5cGUiOiIyIiwiY29kZSI6IlwvKmhjX2F0dHJcbnA9XCIwXCJcbm49XCIwXCJcbmk9XCIwXCJcbmhjX2F0dHIqXC9cblwvXC8gQmFzZWQgb24gdGhpcyBwb3N0OiBodHRwczpcL1wvcHJvY2Vzc3dpcmUuY29tXC90YWxrXC90b3BpY1wvMTE4Mi1tb2R1bGUtaW1hZ2UtdGFnc1wvP2RvPWZpbmRDb21tZW50JmNvbW1lbnQ9NDAwMTVcblxuJG15UGFnZSAgICAgPSAkcCA/ICRwYWdlcy0+Z2V0KCRwKSA6ICRwYWdlO1xuJGZpZWxkTmFtZSAgPSAkbXlQYWdlLT5maWVsZHMtPmdldCgndHlwZT1GaWVsZHR5cGVJbWFnZScpO1xuJG15RmllbGQgICAgPSAkbXlQYWdlLT4kZmllbGROYW1lO1xuXG4kaW5kZXggICAgICA9ICRuIC0gMTtcbiRpbWFnZXMgICAgID0gJyc7XG5cbmlmKCRteUZpZWxkIGluc3RhbmNlb2YgUGFnZWltYWdlcyl7XG4gICAgaWYoJG4gJiYgJGkpe1xuICAgICAgICBcL1wvIElmICRuIGFuZCAkaSBkZWZpbmVkLCBpdGVyYXRlIGZyb20gJG4gZm9yICRpIHRpbWVzIGFuZCByZXR1cm4gdGhlc2UgKHdpdGggYSBsaWdodGJveC1saWtlIGdhbGxlcnkgaW4gbWluZClcbiAgICAgICAgZm9yICgkaiA9ICRpbmRleDsgJGogPD0gKCRpbmRleCArICRpIC0xKTsgJGorKykge1xuICAgICAgICAgICAgJGltYWdlID0gJG15RmllbGQtPmVxKCRqKTtcbiAgICAgICAgICAgIFxuICAgICAgICAgICAgaWYgKCAhKCRpbWFnZSBpbnN0YW5jZW9mIFBhZ2VJbWFnZSkgKSBjb250aW51ZTtcbiAgICAgICAgICAgIFxuXHRcdCAgICAkdGh1bWIgPSAkaW1hZ2UtPnNpemUoMjIwLDE0Nyk7XG5cdFx0ICAgICRsYXJnZSA9ICRpbWFnZS0+d2lkdGgoMTAwMCk7XG4gICAgICAgICAgICBcbiAgICAgICAgICAgIFwvXC8gc2FtZSBhcyBpbiBfZnVuYy5waHAgPiByZW5kZXJBdHRhY2hlZEltYWdlcygpIDogXG4gICAgICAgICAgICAkaW1hZ2UgPSBcIjxkaXYgY2xhc3M9J2NvbHVtbiBwb3B1cC1nYWxsZXJ5LWl0ZW0nPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxhIGhyZWY9J3skbGFyZ2UtPnVybH0nIGNsYXNzPSdhbGlnbl9sZWZ0JyB0aXRsZT0neyRsYXJnZS0+ZGVzY3JpcHRpb259Jz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGltZyBzcmM9J3skdGh1bWItPnVybH0nIGFsdD0neyRpbWFnZS0+ZGVzY3JpcHRpb259Jz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSd0ZXh0LWNlbnRlcic+eyRpbWFnZS0+ZGVzY3JpcHRpb259PFwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxcL2E+XG4gICAgICAgICAgICAgICAgICAgICAgICA8XC9kaXY+XCI7XG4gICAgICAgICAgICBcbiAgICAgICAgICAgICRpbWFnZXMgLj0gJGltYWdlO1xuICAgICAgICB9XG4gICAgfVxuICAgIFxufSBlbHNlIHtcbiAgICAkaW1hZ2VzID0gXCJcIjtcbn1cblxuaWYgKCRpbWFnZXMpICRnYWxsZXJ5ID0gXCI8ZGl2IGNsYXNzPSdwb3B1cC1nYWxsZXJ5IHJvdyBtZWRpdW0tdXAtMyBzbWFsbC11cC0yJz5cIi4kaW1hZ2VzLlwiPFwvZGl2PlxcbjxkaXYgc3R5bGU9J2NsZWFyOmJvdGg7Jz48XC9kaXY+XFxuXCI7XG5lY2hvICRnYWxsZXJ5OyJ9/!HannaCode

Thank you for the inspiration!

[froot]

I'm using this module TextformatterImageTags on a CKEditor-body-field. It allows to insert images sequentially with a simple shortcode inside the body without having to add the images manually. It works great and saves a lot of time.

How can I set a default size by which the images get resized though? Any idea how that is achievable? Let's say I want a max-width of 500 px, I know how to do that via API for individual images but how do I access the images here? All I do to return the body and the images inside is

echo $page->body;

Do I need to configure the CKEditor? or the body field? or the image field? or use some arguments with the API method? Or do I use hooks? Hook what though, the body field? images field? the TextformatterImageTags module?

Thanks for help!

Edited December 8, 2020 by kongondo
moderator note: moved to TextformatterImageTags support thread

[froot]

OK I now basically just added…

if ($image) : $image = '<img class="ImageTags" src="'.$this->resizeImage($image).'" alt="'.$image->description.'">'; endif;

and further below…

$image .= '<img class="ImageTags" src="'.$this->resizeImage($image).'" alt="'.$img->description.'">';

and then the function…

function resizeImage($image) {
        $width500URL = $image->width(500)->url;
        return $width500URL;
}

to the very module itself. It does what I need but I doubt this is good practice, what if I ever update – rhetorical question.

Can I use a hook instead? It's not hookable afaik, as I don't see any underscores. 

[diogo]

@fruid I'm glad the module was useful for you ?

I'm not planning to update the module, since I offered an alternative that I consider superior:

I think you solved the situation well for your use case. I would advise you to simply change the class and file names of your customised version to prevent any unwanted update. I don't have time to look at it at the moment, but you could also add one more optional parameter to the short tag for the size of the image, and trigger the resizing with the passed value only if it exists.

If you wish to share your changes, feel free to create a fork or submit a pull request. Whatever you prefer ?

[froot]

yes I agree, it's quite hard-coded this way, I should make more options available.