Stefanowitsch

No it does not change anything. This logs "false" (when executed in the header of the template in the if $config->ajax statment. bd($instagram->getMedia('myusername'))

Yes I have a working instance of the InstagramBasicDisplayApi on my Page. The media is fetched from my account and displayed in a carousel: This is the code, as I mentioned it works fine: <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-5@m uk-grid"> <?php // Get the 12 most recent items and render them based on type foreach($instagram->getMedia('thumann.media',12) as $item) { switch($item->type) { case 'VIDEO': $media_src = $item->poster; $media_icon = '<i class="fas fa-film"></i>'; break; case 'CAROUSEL_ALBUM': // Just get the first item $media_src = $item->children->first->src; $media_icon = '<i class="far fa-images"></i>'; break; default: $media_src = $item->src; $media_icon = '<i class="far fa-images"></i>'; break; } ?> <li> <a href="<?=$item->link?>" target="_blank" rel="noopener"> <img class="lazyload img-fluid" src="<?=$media_src?>" alt="<?=$item->alt?>"/> <?=$media_icon?> </a> </li> <? } ?> </ul> Right now only 12 items are fetched. I want to go the next step and load the content of my Instagram channel in batches and append them when scrolling through the carousel. So I went to the documentation on the PW modules pages under "Pagination": https://processwire.com/modules/instagram-basic-display-api/ Lazy loading of items can be achieved using getMedia(). The following example shows how to return batches of items using AJAX requests: $instagram = $modules->get('InstagramBasicDisplayApi'); // The pagination cursor is reset if the request is not AJAX, e.g. when the page is loaded. if($config->ajax) { header('Content-Type: application/json'); echo $instagram->getMedia(); // ['json' => true] is inferred by $config->ajax die(); } But when I include a Tracy Debugger bardump on the $instagram->getMedia() function here it returns nothing.

@nbcommunication thanks for your input! It seems the problem lies somewhere else. I am trying to get the most basic output but all I am receiving is an empty data object. On my home.php template I have this code at the very top: <?php $instagram = $modules->get('InstagramBasicDisplayApi'); // The pagination cursor is reset if the request is not AJAX, e.g. when the page is loaded. if($config->ajax) { header('Content-Type: application/json'); echo $instagram->getMedia(); // ['json' => true] is inferred by $config->ajax bd($instagram->getMedia()); die(); } ?> Then inside my template I have this code below which should do nothing else than send an AJAX request to the page itself to execute the code shown above. Also to make tracy debugger log the WireArray that is returned by the $instagram->getMedia() function. <script> (async () => { console.log('try to fetch data'); try { const response = await fetch(window.location.href, { method: 'GET', headers: { 'X-Requested-With': 'XMLHttpRequest' }, responseType: 'json' }); if (response.status === 200) { const data = await response.text(); console.log(data); } else { console.log(response.status); console.log(response.statusText); } } catch (error) { console.error(error); } })(); </script> Wenn viewing the homepage this script is executed but the console.log(data) prints out an empty string. The bd($instagram->getMedia()) instruction in the header also logs nothing.

@nbcommunication For my new project I want to make use of the lazy loading function. So I followed the steps in the documentation. My main question is: where do I have to put this code? $instagram = $modules->get('InstagramBasicDisplayApi'); // The pagination cursor is reset if the request is not AJAX, e.g. when the page is loaded. if($config->ajax) { header('Content-Type: application/json'); echo $instagram->getMedia(); // ['json' => true] is inferred by $config->ajax die(); } echo '<div id=instagram class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@l" data-uk-grid data-uk-lightbox data-uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 128;"></div>'; It it necessary to enter the user name in the getMedia() function? $instagram->getMedia('my.account'); When viewing the page I receive the following error in the console. I guess that has to do with the placement of the code above. (Index):403 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON When placing the code at the top of my template (before the <!DOCTYPE is declared) I receive the following error: SyntaxError: Unexpected end of JSON input

@bernhard does this mean that RockFrontend soon will support the compiling of SCSS files? Please say no. After years of using SCSS I switched to LESS just because of this feature 🙂

It's great to see new recommendations popping up after 4 years 🙂 I was able to solve this via the multi select field from the page tree ever since.

I can reproduce this behaviour. It seems if you copy a text from a website and paste it into the frontend editor all the formatting (this means all HTML tags and elements) are also copied. This works fine on regular body fields that allow HTML tags. For example you can just copy & paste entire HTML tables without creating them in the editor from scratch. But when you then copy this text into a field that is set to not allow html tags it results in this kind of mess in the frontend: In the Backend it looks like this: This is because of the Textformatter settings for this headline field. HTML Tags are just rendered as plain text.

I guess that is the perfect conclusion to this 🙂

I've implemented an ajax-driven auto complete search on a website and I am wondering if you should use the CSRF check on this one or if this would be a bit "over the top"? More information: https://processwire.com/api/ref/session/c-s-r-f/

I like to re-use most of the fields. For example in most projects i have one body field, one headline field and one (single) image field. With fieldsets I can reuse these fields as often an as much on a single template as I want. As long as the field settings not differ that much there is no use to create a "body2" or "body3" field. BUT if you need to alter the field settings in one case it is possible to override these changes on a fieldset-basis. For example I have this fieldset here with two generic input fields: A single image field and a body copy field. These are generic fields that I use all over the place. If I want to make slight changes to those fields in the context of the fieldset I can edit the fieldset and then click on the name of one of the fields inside it. This will open a dialogue where you can override very basic field settings. It is in most cases not possible to customize a field very much this way. For example you can't change the width and height cropping properties on an image field.

After upgrading the PW Version to the latest master version 3.0.227 I get the message that there are two versions of the TinyMCE installed: This is because before the TinyMCE was officially a part of the PW core I installed it manually. My question is: Is it "safe" to just delete the module folder of the manually installed version that lives in the /site/modules folder? I want to make use of the core version from now on.

Yeah I had the pleasure to be one of the earliest customers who uses this module and already made a few websites with it. Once it's released I will give some insight here in the board how I created this and that with it. It's a really powerful tool!

Hello! I know exactly what you are meaning. Well you have at least three possibilites: 1. Use the Fieldset Page in ProcessWire. With this you can combine fields into one Fieldset. I don't use this Fielset anmyore but if I remember correct you have to install it from the "Core Modules Tab" (under: /processwire/module/). You create a new field (name it for example fieldset_introduction) and then you add fields to it that you want to make use of (cool thing: you can reuse this fields in all other fieldset page fields and don't have to create a "body copy field" for each and everyone of them separetely!) And here is what it looks like on a page template. The fields shown above are aligned in a fieldset named "Introduction". You can add several Fieldsets this way and just put them in any order on your page template. 2. Use the Repeater Matrix Pro Field. This ones commercial but it makes handling and editing Sections on your pages much easier and more flexible! Cool thing is that you can define your content blocks in the field settngs and add the needed fields right there. Then on your page template you can select the type of content block (or name it section): After that it's super easy and comfortable to edit these sections and also change their order! 3. Use a third party page builder module like the RockPageBuilder from @bernhard. This module even beats the popular Repeater Matrix module in my opinion as it accelerates the creation and editing (and managing!) of content massively! Even better, it kind of combines the Repeater Matrix block-buidling functions with frontend editing which is a massive leap forward in terms of workflow optimization and customer happiness (cause it is also very easy to use for non-technically experienced users!).

Truly an inspiring project! The technical solutions here are fascinating. I haven't touched a project with a custom backend for users (yet!) and I always wondered how to approach it.

I now changed Line 322 in InputfieldImageMarker.module from $addInfoPages = $modules->get('InputfieldAsmSelect'); foreach($opts as $opt) $addInfoPages->addOption($opt->id, $opt->title); to: $addInfoPages = $modules->get('InputfieldAsmSelect'); foreach($opts as $opt) $addInfoPages->addOption($opt->id, $opt->headline); Now the headline is shown as title in the select field: But the bummer is: It turns out that this field does not work properly inside a repeater matrix. The table with the marker coordinates never shows up after saving 😞

Ah sorry, my bad! This is not what I meant. I want to make the headline field of the repeater item pages shown in my screenshot to be listed in the AsmSelect Inputfield of the Image Marker Field. Right now this AsmSelect Field is only showing the page ID's of the repeater item pages: I don't know if this is even possible via hook.

That's an interesting approach. The repeater items are located here in this case (rep_stories), how would I hook into the title rendering function in this case?

I am in the need of using this module in a current project 🙂 Turns out it works just as fine as I could ever wish! Except one thing: I want to make use of Repater Field Items as selectable pages only. So I added this line of code in the field settings. The page ID in this case is my repeater field that contains the child elements (=pages) that I want to be able to select. This works but unfortunately I see only the page IDs in the AsmSelect Inputfield as labels: I know that there is a setting for the AsmSelect to tell which field to use for the label: BUT since the AsmSelect in the ImageMarker module is generated via API code it is not possible to adjust this setting. @kongondo can you help me out on this one? it is somehow possible to tell the AsmSelect which field to use as a label?

Ah that is a classic mistake I also made in the past. Page paths always have to end with a backslash in ProcessWire (but that is adjustable in the template settings!). When you call up an URL you can leave the backslash - this will work - but in that case theres a redirect going on that leads to the data-loss when submitting form data.

I am stumbling over and over again over this issue and I really think this should be fixed, or at least the 'remove' option of the fixUnclosedTags() Function should be adjustable in the $sanitizer->truncate() method. @ryan

Ah! That did the trick. Thank you! I now went from this: return "<div class='uk-navbar-dropdown'><ul class='uk-nav uk-navbar-dropdown-nav'>$output</ul></div>"; To this (also added the 'uk-drop' class as you mentioned). return "<div class='uk-navbar-dropdown uk-drop'><ul class='uk-nav uk-navbar-dropdown-nav'>$output</ul></div>"; Now I can use "defer" without having the flashy dropdown menus on page load. This is a trick I bet I want to try on some other UIkit components aswell, if they behave a little bit clunky.

It seems you have more and more options nowadays to use everyday things. One thing I don't like about using the "defer" method (even it seems as the go-to method today) is that when you make use of frontend frameworks that manipulate the look of elements on your website this results in some ugly "jumping around of elements that are not aligned/styled yet because the script is waiting to be executed". I am using UIkit and when using "defer" on the uikit.min.js file it will execute after the HTML is parsed. So for a few milliseconds on page load you can see some of the dropdown menus visible in the main navigation for example. That is because I make use of the uk-navbar component, which relies on the uikit.min.js file: uk-navbar="align: center; animation: uk-animation-slide-top-small; animate-out: true" When loading the script the normal way (no defer or async) you see no dropdown menu at all when the page is loaded. Because then the script is executed before all of the page is loaded. I think even when there are best-practices how to to stuff you always should check what is more important for your project. Having a consistent look or save a few fractions of some milliseconds on loading time.

For me personally I see RockFrontend as a tool for development. Not a frontend framework. The main reasons why I am using RockFrontend are: - Auto Refresh - Make use of the rfGrow Feature for fluid font sizes & Handling Assets: - Auto compile LESS to CSS - Minify CSS and JS Files I know that there are already some JS-Snippets included (like rf-scrollclass) but I it's too tempting to start in including more and more Frontend Framework features. I personally use only a fraction of what RockFrontend offers and it's hard keeping track because new features arrive continuously 🙂 If more and more frontend framework features will be included at some point in the future you have to decide wether RockFrontend will evolve into it's own frontend framework, shipping scripts and styles for everyday usages.

As far as I know (and I haven't used this feature yet!) this should be possible (found here: https://processwire.com/modules/rock-frontend/) You can make use of the addIf() function to load a script only under special circumstances. Adding assets to your site (JS or CSS) While you can always add custom <script> or <link> tags to your site's markup it is recommended that you use RockFrontend's AssetsArray feature: $rockfrontend->scripts() ->add('/path/to/your/script.js') // you can add any custom flags to your $rockfrontend variable at runtime! ->addIf('/path/to/foo.js', $rockfrontend->needsFooScript) ->addIf('/path/to/slider.js', $page instanceof HomePage) ->addIf('/path/to/blogscript.js', $page->template == 'blogitem') ; $rockfrontend->styles() ->add(...) ->addIf(...) ; There are several reasons why this is preferable over adding custom script/style tags: addIf() keeps your markup file cleaner than using if / echo / endif It automatically adds timestamps of files for cache busting You can inject scripts/styles from within other files (eg PW modules) RockFrontend itself uses this technique to inject the styles and scripts necessary for frontend editing (ALFRED). Have a look at the module's init() method!

Thank you for your honest response! I am still interested in getting started with Padloper 2 and I guess I will try it out in the next project. When do you plan to update the docs or release the video documentation? Both would be really great 🙂