-
Posts
2,927 -
Joined
-
Last visited
-
Days Won
19
Everything posted by szabesz
-
Second site launch for the Australian Antarctic Division
szabesz replied to AAD Web Team's topic in Showcase
Hi, https://jobs.antarctica.gov.au/ is currently in the state of "404 Not Found, nginx" -
CKEditor is a nasty beast when it comes to configuring it, but I will try to help ? First things first, how to configure it: https://github.com/processwire/processwire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-css-file You probably did this but to make things clear: the field's type is Textarea, while the inputfield's type is CKEditor. So far so good ? On the Details tab: content type is recommended to be Markup/HTML and it should be. "Markup/HTML (Content Type)" option can be configured as required, as they do not affect the CSS we are dealing with. The things in question be configured on the Input tab, under the CKEditor settings, so here come the interesting bits. Available core toolbar items are listed there, and as an example, here is what I often use: PWImage, Format, Styles, RemoveFormat, Bold, Italic, NumberedList, BulletedList, PWLink, Unlink, Table, SpecialChar, Sourcedialog Format and Styles are needed to make those dropdowns show up. If you do not have too many CKEditor fields on the edit page then I recommend setting them to "Regular Editor". We have a thread of discussing settings, BTW: https://processwire.com/talk/topic/17862-share-your-ckeditor-settings/ Turning ACF and HTML Purifier on is generally recommended, however, they might make things harder in terms of keeping those HTML bits intact when saving the page. In the case of ACF, you need to deal with "extra allowed content" so that your code actually gets saved as intended. Here are some forum topics to tackle some issues that may arise: https://processwire.com/talk/topic/19519-ckeditor-and-extra-allowed-content/ https://processwire.com/talk/topic/19918-modify-ckeditor-image-markup-via-hook/?do=findComment&comment=172616 https://processwire.com/talk/topic/12773-ckeditor-does-not-reapply-styles/#entry116174 Normally I turn ACF on, but keep HTML Purifier off in some cases, as I usually use "Regular Editor" instead of "Inline" and have trusted users. However, HTML Purifier is good for making sure only valid code is saved, so it is a trade off not to turn it on. When I do use HTML Purifier, then I sometimes temporarily turn it off during development but I make sure to turn in on for the production site, even for trusted users. If you run into troubles, try turning it on and off to see what it changes in the source. Sadly, HTML Purifier is not yet configurable in ProcessWire. You can give this request a thumb's up though: https://github.com/processwire/processwire-requests/issues/226 Setting up Format Tags is self explanatory, usually I use at least the minimum of p;h2;h3;h4;h5 (h1 is always generated by the template file so no need to include it). Extra Allowed Content is very important, normally I use this: p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*};i(*)[*]{*};tr(*)[*]{*};*[id];*(class); *[id] and *(class) are somewhat redundant as they allow any IDs and any classes while (*)[*] also allow any of those in the case of the element they are applied to. Now we are getting to the bits you are probably concerned with: Custom Editor CSS File (regular mode) - which can be used to style the HTML of content editor itself as opposed to the frontend Custom Editor JS Styles Set - this is the file you need when you want to define styes for the Style toolbar dropdown Custom Config Options - the notes of the field read: these settings can also be set in one of these files (e.g.) ...config.js and ...config-body.js and this is what I normally use. To configure these options properly this is what you need to tripple check: Make sure: you did create the directory /site/modules/InputfieldCKEditor/ and copied the file called mystyles.js from /wire/modules/Inputfield/InputfieldCKEditor/ to its counterpart: /site/modules/InputfieldCKEditor/ Make sure: files in the directory /site/modules/InputfieldCKEditor/ are named exactly as the ones configured in the options. In the case of Custom Editor JS Styles Set, make sure that in the JS file the function parameter reflects the name you defined in the admin. The default is "mystyles", defined this way: mystyles:/site/modules/InputfieldCKEditor/site_styles.js which means that in the JS file you need CKEDITOR.stylesSet.add( 'mystyles', [... but if you want to use a different string, then replace "mystyles" both in the admin's configuration filed and the accompanying JS file, something like: cke_extra:/site/modules/InputfieldCKEditor/my_extra.js and CKEDITOR.stylesSet.add( 'cke_extra', [... Regarding the configuration files themselves, here is an example for config-body.js: CKEDITOR.editorConfig = function (config) { // Define changes to default configuration here. For example: // config.uiColor = '#AADC6E'; //config.enterMode = CKEDITOR.ENTER_BR; // stops new <p> tags from being added, adds <br /> instead. config.protectedSource.push(/<i[a-z0-9\=\'\"_\- ]*><\/i>/g); // needed for empty <i> tags (icons) config.protectedSource.push(/@/g); // needed for empty <i> tags (icons) /* If this one is enabled: * config.allowedContent = true; * then it is not possible to stop adding widht and height to images */ config.disallowedContent = 'img[width,height]'; // to stop adding widht and height to images }; CKEDITOR.dtd.$removeEmpty['i'] = 0; // needed for empty <i> tags (icons) Regarding mystyles:/site/modules/InputfieldCKEditor/mystyles.js here is one approach for UIkit 3: CKEDITOR.stylesSet.add( 'cke_extra', [ { name: 'Normal Paragraph', element: 'p', attributes: {'class': 'site-paragraph'} }, { name: 'Clear runaround', element: 'p', attributes: {'class': 'uk-clearfix'} }, { name: 'Warning Paragraph', element: 'p', attributes: {'class': 'uk-alert-warning', 'data-uk-alert': ''} }, { name: 'Success Paragraph', element: 'p', attributes: {'class': 'uk-alert-success', 'data-uk-alert': ''} }, { name: '1/2 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-2@s site-body-img'} }, { name: '1/2 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-2@s site-body-img'} }, { name: '1/3 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-3 site-body-img'} }, { name: '1/3 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-3 site-body-img'} }, { name: '1/4 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-4 site-body-img'} }, { name: '1/4 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-4 site-body-img'} }, { name: 'center image', element: 'img', attributes: {'class': 'align_center uk-align-center site-body-img'} }, ]); This method above defines classes for the Style toolbar dropdown in a way that more than one class or attribute is applied to the selected element. For example align_left is applied because the default ProcessWire CKEditor class for left align is this (see this post). However, to make sure that in the frontend the same element is also aligned to the left, I also apply uk-float-left uk-width-1-2@s to it. This is just a dead simple approach but you can make it more sophisticated. If you want to turn CKEditor into a WYSIWYG editor then you need do some extra work, because you need to make sure your contents.css defines the classes and styles also used on the fronted. I have not ventured too far in this direction though. Normally I use UIkit 3 on the frontend and not in the admin so I simply mimic the most important subset of the frontend's styles in contents.css. I will need to improve on this practice but only after I have switched from the Reno Admin Theme to Admin Theme UIkit. I hope I cleared up a few things for you. I you want even more tips form others, I recommend using google to search like this: https://www.google.hu/search?q=CKEditor+site%3Aprocesswire.com%2Ftalk&oq=CKEditor
-
Hello, There are basically three approaches you can choose from: 1. "Styles" dropdown: Make use of CKEditor's "Styles" dropdown, and define the styles the editors must apply to each image: https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/ https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#advanced-tips 2. by using Hanna Codes: This approach is not for everyone but very versatile: https://processwire.com/talk/topic/11549-insert-any-html-tag-with-attributes-using-hanna-code/ http://modules.processwire.com/modules/process-hanna-code/ 3. automatically manipulate CKEditor content via custom coding: https://processwire.com/talk/topic/19918-modify-ckeditor-image-markup-via-hook/?do=findComment&comment=172616 http://modules.processwire.com/modules/textformatter-fluid-images/ http://modules.processwire.com/modules/textformatter-make-links/ https://processwire.com/talk/topic/14835-module-textformatter-for-uikit-images/ Hope this helps.
-
Hi, regarding creating groups, we have various discussions in the forum, for example: https://processwire.com/talk/topic/18775-fun-with-hooks-pagearraygroupby/ https://processwire.com/talk/topic/14129-list-pages-by-year-similar-to-blog-archive/ https://processwire.com/talk/topic/15369-group-pages-by-field/?tab=comments#comment-137442
-
Hi Marcell, What @adrian said and I also recommend configuring the template of the User where you can do even more. Just edit the Fields settings of User template and on the Input tab of the given field set the visibility to Hidden (not shown in the editor):
-
Well, while I like your idea, a "changelog" would be more useful. Sure, we are talking about two different things, at least API additions and changes are part of the changelog and not the other way around. Regarding your idea, the solution relying on a cached version sounds very useful, however, the absence of the @since tags is a pity, I agree. Utilizing both would be the best... ?
-
Regarding .htaccess and (the rare case of index.php) changes I tackle them by using Beyond Compare as the fastest GUI diff app around. Since the PW upgrade does not delete these files but renames them, after the update I can use Beyond Compare's "compare to" feature to compare two files not having the same name, and this way I can easily apply any changes of the new .htaccess to the old, modified version of mine.
-
What @clsource said, and in addition: I recommend clicking the "Watch button" of "processwire/processwire-issues" at Github (and optionally on processwire-requests) and keeping the incoming emails organized, at least those you are interested in. It would be great though if @ryan could come up with an automatically generated "changelog", one that can somehow automagically be injected into his blog posts and the new docs he is currently working on. Side note: for module "changelogs" I recommend using https://modules.processwire.com/modules/module-release-notes/ by @netcarver Regarding the ProcessWire core changes, maybe Ryan could make it possible for Netcarver to hook into the PW upgrade process so that Github changes can also be listed by ModuleReleaseNotes.
-
My son is interested in programming not in hardware so our C64 is waiting for its new owner. Just PM me...
-
... Kongondo too ?
-
Carbon Copy Cloner 20% off (November 28-30): https://bombich.com/
-
+1
-
Thanks for the tip! Yeah, I guess this will do the trick ?
-
Thanks for this, I think I will keep it uninstalled, partly because I do not like it's menu item to appear in the main menu. However, on he Tracy settings page: Adminer settings are available here. results in a system message "Unknown module", so you might wan to change it to something like Adminer settings are only available when the Process Tracy Adminer module is installed.
-
CKEditor - syntax highlighting in Source and/or Sourcedialog?
szabesz replied to Gadgetto's topic in General Support
Hello @Gadgetto The easiest way to add Codemirror is by using AdminOnSteroid module, see: https://github.com/rolandtoth/AdminOnSteroids/wiki/CKEaddons Beside a one click install, you can also configure loads of other things to your liking ? -
New kid on the block: https://squoosh.app/ Found in this otherwise recommended article: https://www.i-programmer.info/news/146-uiux/12318-news-from-chrome-summit.html with other gems like: https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc/rela and https://web.dev/measure
-
It is quite common to use one or two characters for "translate functions", since they are typed and used a lot. Some examples: https://codex.wordpress.org/I18n_for_WordPress_Developers https://api.drupal.org/api/drupal/includes!bootstrap.inc/function/t/7.x https://docs.joomla.org/Making_templates_translatable Underscore appears to be a popular one.
-
+1 75% OFF on new shared hosting plans and upgrades to GrowBig and GoGeek plans! https://www.siteground.com/ I'm using GoGeek, I can recommend it. Sure, SiteGround is serious about the limits the accounts are confined to, but if you can stay within those limitations, their service is good.
-
More deals for Mac users: Backup your Windows on a Boot Camp partition, save 30%: https://twocanoes.com/products/mac/winclone/ The very best color picker and manager app for designers, save 50%: http://www.sipapp.io/
-
Thanks for the link @flydev! How secure a VPN is always a contradictory topic. I am still testing it as far as speed, access and download possibilities are concerned. So far I cannot complain for the price/features ratio. As for DNS leaking I cannot say much, but I'n not really after rock solid privacy but instead: access. You are certainly right to point out that pureVPN might not be the one for anyone, however they have at least improved on their Refund Policy: https://www.purevpn.com/refund-policy.php. Your linked article mentions "3 GB or 100 sessions = VOID", currently they have a "31-Day Refund Policy" with exceptions like: "some payment methods do not support the refund option. We have clearly marked such payment methods "non-refundable" during the checkout process". All in all, I'm still testing...
-
Hello, Currently I'm hunting for IT deals, so I thought I'd share what I find interesting. If you happen to find more IT and webdev related offers, please share it. VPN: Cheapest VPN with P2P, streaming (Netflix, BBC, etc...) support, multi device (routers too), 5 simultaneous device connections, 5 year deal: https://www.purevpn.com/ I did purchase it. MAMP Pro, I've been waiting for this ? new licence and/or upgrade: 25% by using a coupon https://www.mamp.info/en/store/black-friday/
-
Hi, yes, there is: For this you might want to use cached data, or am I missing something?
-
Hello, Before outputting anything in your template file, simply check: if ($config->ajax)... eg: If you do not use jQuery – which does this for you – you need to add this key-value-pair to your requests: key: X-Requested-With value: XMLHttpRequest like : request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-
I think it is highly improbable that anyone has the time to write a book on PW in the near future, however, the docs are being updated, extended and reorganized by Ryan so it will probably be a good substitute for a book anyway (and free ? ). See: http://processwire.com/blog/posts/rebuilding-pw-website-part2/