Juergen

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.

Ok I have figured it out - the code works but the Json Array made problems (json_encode doesnt work correctly in this case). So here is the complete code as inspiration for all who want to use UIKit Ajax search function in processwire. <?php if ($config->ajax) { require_once('inc/func.inc'); require_once('_strings.php'); include('paginator/Paginator.php'); include('paginator/PagesPaginator.php'); $numberofitems = 3;//How many items should be displayed $search_array = array(); $q = $sanitizer->text($_REQUEST['search']); // did $q have anything in it? if ($q) { $input->whitelist('q', $q); $q = $sanitizer->selectorValue($q); $templateselector = "template!='profile', template!='activation', template!='privacy-policy-item', template!='serviceitem', template!='single-event', template!=productpricelistitem', template!='partner'"; if ($user->isLoggedin()) $templateselector .= ", has_parent!=2"; $paginator = new PagesPaginator(); $searchresults = $paginator(array( "headline|title~=$q, $templateselector", "introtext~=$q, $templateselector", "body~=$q, $templateselector", "summary~=$q, $templateselector", "firmennameslogan|firmenwortlaut|street|postalcode|place|region|country|geschaeftsfuehrung|vertretung|registergericht|inhaltverantwortung|fachgruppe|subgroup|geldinstitut|ecgbehoerde~=$q, $templateselector", "position~=$q, $templateselector", "privacytable.title|privacytable.body~=$q, $templateselector", "partnertable.title~=$q, $templateselector", "downloadrepeater.downloadfiledesc|downloadrepeater.downloadfieldtitle~=$q, $templateselector" ), $input->pageNum, $numberofitems);//show only 3 items $resultjson = ""; foreach ($searchresults as $key => $result) { $title = $result->title; $summary = $result->summary; $link = $result->url; if($key == $numberofitems - 1){//last item $resultjson .= '{"title":"'.$title.'", "url":"'.$link.'", "text":"'.$summary.'"}'; } else { $resultjson .= '{"title":"'.$title.'", "url":"'.$link.'", "text":"'.$summary.'"},'; } } } header('Content-Type: application/json'); echo '{ "results": ['; echo $resultjson; echo ']}'; } else { //put here the standard search code for non Ajax }

Hello @ all, I have tried to implement an Ajax search from UIKit into processwire, but I cannot get it to work. Has someone implemented it and can give me a hint. My problem is the target page (page for the search results) which should output the search results in a Json format. I know how to create the Json format with a foreach loop but I dont know how to find all matching pages. I am able to get the search term with this code snippet: $q = $sanitizer->text($_REQUEST['search']) After this I have added the code for the search page recommended by Ryan, but this wont work. Here is the complete code: <?php if ($config->ajax) { require_once('inc/func.inc'); require_once('_strings.php'); include('paginator/Paginator.php'); include('paginator/PagesPaginator.php'); $search_array = array(); //$q = $sanitizer->text($input->post->q); $q = $sanitizer->text($_REQUEST['search']); // did $q have anything in it? if ($q) { $input->whitelist('q', $q); $q = $sanitizer->selectorValue($q); $templateselector = "template!='profile', template!='activation', template!='privacy-policy-item', template!='serviceitem', template!='single-event', template!=productpricelistitem', template!='partner'"; if ($user->isLoggedin()) $templateselector .= ", has_parent!=2"; $paginator = new PagesPaginator(); $results = $paginator(array( "headline|title~=$q, $templateselector", "introtext~=$q, $templateselector", "body~=$q, $templateselector", "summary~=$q, $templateselector", "firmennameslogan|firmenwortlaut|street|postalcode|place|region|country|geschaeftsfuehrung|vertretung|registergericht|inhaltverantwortung|fachgruppe|subgroup|geldinstitut|ecgbehoerde~=$q, $templateselector", "position~=$q, $templateselector", "privacytable.title|privacytable.body~=$q, $templateselector", "partnertable.title~=$q, $templateselector", "downloadrepeater.downloadfiledesc|downloadrepeater.downloadfieldtitle~=$q, $templateselector" ), $input->pageNum, 25); foreach ($results as $result) { $title = $result->title; $summary = $result->summary; $link = $result->url; $search_array[] = array( 'title' => $title, 'summary' => $summary, 'url' => $link // ID is the url segment ); } } header('Content-Type: application/json'); $searchresults_json = json_encode($search_array, true); echo '{ "results": ['; echo $searchresults_json; echo ']}'; } Maybe the input variable ($input) doesnt work in this case. Best regards

Thanks @adrian for this module. It would be great if it supports multilanguage depending on the browser language. F.e. if the browser fits one of the installed languages then show the message in this language, otherwise show the default language.

Just to clearify: It only happens if I use $mail->bodyHTML If I use $mail->body everything is ok.

Of course, just a typing mistake