Juergen

I have included a check if "simple_html_dom.php" is included by another module before, because I ran into an issue where 2 Textformatter modules use this file and both have included it. I have used "require_once" to prevent this behaviour but unfortunately it doesn work. Therefore I run a check before the "require_once" which checks if a special function is loaded before. //check if simple_html_dom.php is included by another module before - prevent double including if (function_exists('file_get_html')) { //check for the file_get_html function //do nothing } else { require_once 'simple_html_dom.php'; } Description: If the function "file_get_html" is loaded before by another module, skip the including of the simple_html_dom.php. It works but if anyone has a better idea please let me know. The update is included in the download link of the first entry.

It could not be empty if something is in your body field. I dont think that there is js conflict, but you can try to disable the plugin for testing purposes. It is quite difficult for me, because in my case everything works as expected. It would be good if another person would install the module and try it out if it works. <?php /** * TextformatterUIKitImages (0.0.1) * This little Textformatter adds UIKit classes and markup to images added with CKEditor * Uses simple_html_dom.php because native dom makes problems by using HTML5 tags * @author Juergen Kern * * ProcessWire 2.x * Copyright (C) 2011 by Ryan Cramer * Licensed under GNU/GPL v2, see LICENSE.TXT * * http://www.processwire.com * http://www.ryancramer.com * */ class TextformatterUIKitImages extends Textformatter implements Module { public static function getModuleInfo() { return array( 'title' => "TextformatterUIKitImages", 'version' => "0.0.1", 'summary' => "This little Textformatter adds UIKit classes and markup to images added with CKEditor", 'author' => "Juergen Kern", 'singular' => true, 'permanent' => false, 'requires' => array( "PHP>=5.4.0", "ProcessWire>=2.5.28", "" ) ); } public function format(&$str) { //check if simple_html_dom.php is included by another module before - prevent double including if (function_exists('file_get_html')) { //check for the file_get_html function //do nothing } else { require_once 'simple_html_dom.php'; } $html = str_get_html($str); //Manipulating figcaption with uikit css class $figcaptions = $html->find('figcaption'); foreach ($figcaptions as $caption) { $caption->class = 'uk-thumbnail-caption'; //add class to figure caption tag } foreach (($html->find('img')) as $img) { //manipulate image links with tooltip and lightbox attributes if ($img->parent->tag == 'a') { $pageId = (int) wire($this->page)->get('id'); //get current page id for lightbox group $img->parent->{'data-uk-tooltip'} = ''; //add tooltip attribute $img->parent->{'data-uk-lightbox'} = '{group:\'' . $pageId . '\'}'; //add lightbox attribute if ($img->alt) { $img->parent->title = $img->alt; //add alt attribute as anchor title } else { $img->parent->title = __("Lightbox view of the image"); //add default anchor title } } //create case types if (($img->parent->tag != 'a') && ($img->parent->tag != 'figure')) { $case = 'img'; } if (($img->parent->tag == 'a') && ($img->parent->parent->tag != 'figure')) { $case = "a img"; } if ($img->parent->tag == 'figure') { $case = "figure img"; } if (($img->parent->tag == 'a') && ($img->parent->parent->tag == 'figure')) { $case = "figure a img"; } switch ($case) { case 'img': //create space before image class if ($img->class) { $img->class = ' ' . $img->class; } $img->class = 'uk-thumbnail' . $img->class; if (strpos($img->class, 'align_left') !== false) { $img->class = str_replace('align_left', 'uk-align-left', $img->class); } elseif (strpos($img->class, 'align_right') !== false) { $img->class = str_replace('align_right', 'uk-align-right', $img->class); } elseif (strpos($img->class, 'align_center') !== false) { $img->class = str_replace('align_center', 'uk-align-center uk-text-center', $img->class); } else { $img->class = $img->class . ' no-align'; $img->outertext = '<span class="uk-display-block uk-margin-bottom">' . $img->outertext . '</span>'; } break; case 'a img': $img->parent->class = 'uk-thumbnail ' . $img->class; if (strpos($img->class, 'align_left') !== false) { $img->parent->class = str_replace('align_left', 'uk-align-left', $img->parent->class); $img->outertext = '<span class="uk-overlay uk-overlay-hover">' . $img->outertext . '<span class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></span></span>'; } elseif (strpos($img->class, 'align_right') !== false) { $img->parent->class = str_replace('align_right', 'uk-align-right', $img->parent->class); $img->outertext = '<span class="uk-overlay uk-overlay-hover">' . $img->outertext . '<span class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></span></span>'; } elseif (strpos($img->class, 'align_center') !== false) { $img->parent->class = str_replace('align_center', 'uk-align-center uk-display-inline-block', $img->parent->class); $img->outertext = '<span class="uk-overlay uk-overlay-hover">' . $img->outertext . '<span class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></span></span>'; $img->parent->outertext = '<span class="uk-display-block uk-text-center test">' . $img->parent->outertext . '</span>'; } else { $img->parent->class = $img->class . ' no-align uk-thumbnail'; $img->outertext = '<span class="uk-overlay uk-overlay-hover">' . $img->outertext . '<span class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></span></span>'; $img->parent->outertext = '<span class="uk-display-block uk-margin-bottom">' . $img->parent->outertext . '</span>'; } $img->class = null; break; case 'figure img': if (strpos($img->parent->class, 'align_left') !== false) { $img->parent->class = str_replace('align_left', 'uk-align-left', $img->parent->class); } elseif (strpos($img->parent->class, 'align_right') !== false) { $img->parent->class = str_replace('align_right', 'uk-align-right', $img->parent->class); } elseif (strpos($img->parent->class, 'align_center') !== false) { $img->parent->class = str_replace('align_center', 'uk-align-center uk-text-center', $img->parent->class); } else { $img->parent->class = 'uk-display-inline-block no-align'; } $img->class = 'uk-thumbnail'; break; case 'figure a img': if (strpos($img->parent->parent->class, 'align_left') !== false) { $img->parent->parent->class = str_replace('align_left', 'uk-align-left', $img->parent->parent->class); $img->outertext = '<div class="uk-overlay uk-overlay-hover">' . $img->outertext . '<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></div></div>'; } elseif (strpos($img->parent->parent->class, 'align_right') !== false) { $img->parent->parent->class = str_replace('align_right', 'uk-align-right', $img->parent->parent->class); $img->outertext = '<div class="uk-overlay uk-overlay-hover">' . $img->outertext . '<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></div></div>'; } elseif (strpos($img->parent->parent->class, 'align_center') !== false) { $img->parent->parent->class = str_replace('align_center', 'uk-align-center uk-text-center', $img->parent->parent->class); $img->outertext = '<div class="uk-overlay uk-overlay-hover">' . $img->outertext . '<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></div></div>'; } else { $img->parent->parent->class = $img->parent->parent->class . ' no-align uk-display-inline-block'; $img->outertext = '<div class="uk-overlay uk-overlay-hover">' . $img->outertext . '<div class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></div></div>'; } $img->parent->class = 'uk-thumbnail'; $img->class = null; break; } } $str = $html; } }

Mmmhh! A function like " $html->find" is a syntax of the dom file. Line 35 is the following: foreach (($html->find('img')) as $img) { if the file is integrated properly, it must work. I use simple_html_dom.php on another module too without problems. Have you tried to deinstall and delete the module first?

Could you please copy the code of line 35 (or even make a screenshot) of the file compiler file.

Please try to delete the file compiler cache. I have installed and deinstalled this module several times for testing purposes and it works in my case. I use the latest PW 3.0.41. Maybe you can even try to deinstall the module and reinstall it. I am always running Tracy beside and I got no errors. It seems that simple_html_dom.php is not present in your file compiler cache, because you have uploaded it afterwards.

Hello, I have written a small module which adds UIKit Framework markup to images added with CK-Editor Here are some screenshots: 1) Default view 2) Hover over image shows an overlay and a tooltip info 3) Open in UIKit lightbox How does it work? The module uses Simple HTML DOM Parser for all the manipulations, so this file is also included in the module folder, but it doesnt add any UIKit CSS or Javascript. So you have to load the UIKit framework by yourself. What manipulations take place? Adds UIKit CSS classes to various tags (figure, anchor, image) Adds "no-align" class to tags (figure, image anchor) without alignment, so it could be also styled with CSS Adds an extra surrounding span container to images with no alignment and no figure tag to force block element behaviour Adds UIKit lightbox attribute to linked images Adds image alt attribute as title attribute for linked images on anchor tags / creates fallback if no alt attribute is present Adds UIKit tooltip attribute to all anchors of linked images (tooltip text can be translated in the module translation file) Adds UIKit overlay containers (additional markup) to linked images for overlay effect on hover Example of Markup manipulation: BEFORE <figure class="align_left hidpi"> <a href="/site/assets/files/5556/bora_bora_3.jpg"> <img alt="Rochen" src="/site/assets/files/5556/bora_bora_3.150x0-is-hidpi.jpg" width="150"> </a> <figcaption>Rochen</figcaption> </figure> AFTER <figure class="uk-align-left hidpi"> <a href="/site/assets/files/5556/bora_bora_3.jpg" title="Opens the image in a lightbox view" data-uk-tooltip="" data-uk-lightbox="{group:'my-group'}" class="uk-thumbnail"> <div class="uk-overlay uk-overlay-hover"> <img alt="Rochen" src="/site/assets/files/5556/bora_bora_3.150x0-is-hidpi.jpg" width="150"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></div> </div> </a> <figcaption class="uk-thumbnail-caption">Rochen</figcaption> </figure> How to install the module? Download the module: TextformatterUIKitImages.zip Github: Download from Github Extract the folder and upload the unzipped folder (including both files - simple_html_dom.php, TextformatterUIKitImages.module) into the site/modules folder. Please let both files into the TextformatterUIKitImages folder - TextformatterUIKitImages (folder) -|- TextformatterUIKitImages.modules (file) -|- simple_html_dom.php (file) Install the module as all other modules and add it f.e. to the body field. Hint: I dont maintain the module, so its only here for people who are using UIKit framework too and want to manipulate the image markup of images added with CKEditor. It can also be used as a starting point for your own image markup manipulation module. Best regards Jürgen

Hello Can, I am using TextareaLanguage field as my body field. Therefore I got fe an error message at "$value->getLanguageValue($user->language)" - this could not be used with a string. Anyway, I have written my own image markup manipulation module using simplehtmldom. I am using UIKit as my framework and I have to include the UIKIT CSS classes and markup for images inserted with CKEditor. I have used your module as starting point for mine. Best regards

Doesnt work at all, There are a lot of error messages reported by TracyDebugger

Hello Can, I have tried to install your module in the latest PW version, but unfortunately I always see the code of the module in my backend. Maybe I have done something wrong: I have added the content of the ready.php file to my ready.php file. I have uploaded the Blogimage.module without the ready.php and the CSS file to the module directory. Have you tested it with the latest PW version. EDIT: OK I have found out that the opening php tag was missing.

Yep you are right. I am running it in Strict mode.

The error will only be displayed if I have activated TracyDebugger in the backend. If I disable it I am able to translate my files. Should I open an issue on Github?

Hello @ all, today I have discovered a strange error message on my multilingual site: Does anyone know what this could be? It always happens if I try to open my English translations folder. Best regards

Hello @tpr now I think it is the time to say thank you to you in the name of all "Admin on Steroids" users, because you make our life much easier. "Admin on Steroids" has grown incredible since the beginning. I was a little bit sceptic if I should use this module in the beginning, but now I am totally convinced. So thank you for your enthusiasm, your time and your patience with all our wishes! Best regards

On frameworks you can load only what you want (CSS or JS). So you can use only the grid or you use other components too - depends on your choice. You dont need to include all features.

Hello @bernhard of course: adding a submission class to the form itself will be the easier way instead of adding it to every field . Maybe to less coffee this morning. Beside this topic: Thanks for pointing me to UIKit (you have mentioned in one of your emails that you use this framework). I have tested it and I find it much better than Bootstrap. Its also better to integrate with the form API of PW.

Thanks for the hint. I didnt know that there are CSS properties for valid and invalid. Anyway! I have solved it by adding a class after submission with this piece of code: foreach ($form as $field){ $field->attr('class' , $field->attr('class') . ' submitted'); //add class submitted after form submission } So every field will get the additional class "submitted". The code must be placed after $input->post->submit. Now I can style the inputs depending on their state. Thanks

Thats a good idea. I will try it.

Above post is not a big problem, because I can make in invisible via CSS. Another question: Is it possible to add a fe "isvalid" class after form submission to valid fields, so I can style them with CSS (fe a green border around the input field).

Unfortunately the collapsing tag appears after validation. So every field which has an error shows the collapse tag again.

Great! Works as expected!! Thanks

Hello @ all, til now I have written the codes for my forms manually, but now I will use the API-method from PW. On my inputfields I always have the following code for collapsing inside my labels: <i title="Toggle open/close" class="toggle-icon fa fa-fw fa-angle-down" data-to="fa-angle-down fa-angle-right" aria-hidden="true"></i> Is there a way to get rid of this part via the API like this: $field->collapsed(....); Best regards

Hello adrian, does this module check for the browser language? I always get the German text. I have changed my browser settings to English and German but no changes on the frontend. English and German are the installed languages in my PW. Best regards

Wow ! Thanks adrian. Exactly what I mean. I will try it and if there are problems I will post it here.

I use this syntax in another json array for events which I have copied from another entry and in this case it works. I get all my events in json. I have tried json_encode($searchresult_array); too but it doesnt work in this case. Maybe the json array will be created but UIKit doesnt fetch it. I have to figure out if the syntax of the json array is not in the right syntax for UIKit in this case.

No, but at the first trials it doesnt work, but it works too after all the changes.