Jump to content


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by monollonom

  1. monollonom

    Dynamic CSS

    I have no idea how Tailwind works but when I need something like this I usually set a CSS variable and add them with the style attribute where needed. Something like: <?php namespace ProcessWire; ?> <div style="--color: <?= $page->color ?>"><!-- My content --></div> When I need something more complex, say a CSS animation depending on some of the page parameters (e.g. children count) then I output in a <style> element within my template.
  2. Sure! In your js: window.addEventListener("load", () => { const headers = new Headers({"X-Requested-With": "XMLHttpRequest"}); // needed for $config->ajax to work const links = document.querySelectorAll("a.ajax"); const main = document.querySelector("main"); for(let i = 0; i < links.length; i++) { links[i].addEventListener("click", async (e) => { e.preventDefault(); loadPage(e.currentTarget.href); }); } async function loadPage(url, options) { const page = await fetch(url, { headers }); main.innerHTML = await page.text(); } }); And in your php: <?php namespace ProcessWire; ?> <?php if(!$config->ajax): ?> <main pw-id="main" pw-append> <?php endif; ?> <article><!-- Your content --></article> <?php if(!$config->ajax): ?> </main> <?php endif; ?> <?php if($config->ajax) exit; When opening the page directly it will go the usual route, outputting your content within <main> but if requested with ajax then it will only send the content and exit() so no other file is appended (_main.php in my case).
  3. @ngrmm both ! I make a fetch call from js and then check in the back-end using $config->ajax to only echo parts of my templates and exiting early to avoid my _main.php to be appended (because of the markup regions output strategy).
  4. I guess best would be to either have a help popup, which I’m not fond of, or display the help text differently. I’ll stick with this for now as I think I’ve made enough changes but maybe I’ll come back to this later on. Thank you again for all the feedbacks. My bad on this one, thanks for pointing it out.
  5. I should give you guys an early access to our websites in the Beer Garden lol Thank you though for the valuable feedbacks, it’s the kind of things you can have a hard time to see once you’re deep into projects with unconventional design: you get used to it and think it’s “understandable” enough. I went ahead and made the grey text darker and I’ve displayed the title in the center when you hover the outer strands. I also increased the contrast when hovering these. I hope this will do. Please don’t look at my code 🫥
  6. This is pretty neat, thanks for sharing! Until now I was adding these admin css tweaks through $config->styles in admin.php and thus I had a plethora of “!important” in my CSS...
  7. There is actually a help text: the one on the rotating circle inside (desktop) / outside (mobile) but it’s dismissed after the first click wherever. I’m going to change it so it remains as long as you didn’t click on a “post” strand. Also, were you on mobile when seeing the website? It’s a tougher UI there for sure without hover... If not, did you notice the title of the post appearing in the bottom bar when hovering a strand? Maybe I could add at least a title="Open ”Title of the post”" so you have another hint when hovering. In any case, thank you for you comment @teppo! Edit: changes applied 🙂
  8. Hi all, I'm happy to share with you this website we launched two weeks ago for a Swiss movie in pre-production phase. The client wanted to have a blog to document the project and allow users to contribute posts through a form but also with a login to the admin which — once approved — gives them access to more options for their contribution’s content. Right at the beginning they came to us with scientific visualizations as references and thus I finally got to try D3.js. I’ve known about it for a very long time but never got a chance to try it out. It wasn’t easy but in the end I managed to get (what I think is) a pretty satisfying result. And here is a sample of the modules we used: - Fluency ⭐ - TracyDebugger - FormBuilder - RepeaterMatrix - AdminRestrictBranch - FieldtypeOembed - PageRenameOptions - MarkupComponents - Login Magic Link: this is a new one allowing to login with a link sent to the user’s email (inspired by this thread). It’s almost ready to share but I want to create a Process to have an overview of the generated links first Enjoy!
  9. Maybe then the version would finally bump from 3.0.x to 4.0.0... 😬
  10. I’ve never tried myself, but I assume you could achieve this using the “PagefileSecure” option in your template holding the files: Which would then allow you to hook into ProcessPageView::sendFile: $wire->addHookAfter("ProcessPageView::sendFile", function(HookEvent $event) { /** @var Page $page */ $page = $event->arguments("page"); if($page->template == 'admin') return; /** @var Pagefile $file */ $file = $page->filesManager()->getFile($event->arguments("basename")); $page->of(false); $count = (int) $file->filedata("downloadsCount"); $file->filedata("downloadsCount", ++$count); $page->save(); }); And then later on retrieve and display the downloads count.
  11. Then you need to look for the home’s name in the user’s language, either $pages->get(1)->getLanguageValue($user->language, "name"); or $pages->get(1)->localName($user->language);
  12. If you’re talking about the current page you could go with https://processwire.com/api/ref/wire-input/canonical-url/
  13. Most likely it’s because FieldtypeOptions is not an allowed fieldtype as a custom field. You can check this in FieldtypeFile’s module page (or in PW’s source code). I don’t know why that is though. An alternative could be to use a FieldtypePage instead.
  14. If this content is not editable you could use FieldtypeCache (a core module) and FieldtypeRuntimeOnly. Create a FieldtypeCache field “sms” and select the fields you would like to combine under the “Details” tab. Create a FieldtypeRuntimeOnly field “preview_sms_content” (instead of your textarea) and edit the associated php file to have something like: if(empty($page->sms)) { return "No content yet"; } else { $sms = implode(" ", $page->sms); return "$sms (" . strlen($sms) . " characters)"; } Add both fields to your repeater, save and you should see the SMS preview. Edit: actually you could skip the FieldtypeCache and just concatenate your strings in the FieldtypeRuntimeOnly php file...
  15. But then you lose the ability to contextually edit the field or set the column width, though I agree InputfieldTextTags has a great UX and I try to use it whenever I can. There could be an equivalent to InputfieldPageAutocomplete for fields but I always feel it’s way slower than text tags...
  16. @MarkE are you saying something like this? Unfortunately it’s not possible as there aren’t any hooks for this part (L1215-1222 in ProcessTemplate.module) but it could be a feature request for @ryan?
  17. If your layout remains like this (3 per row) with maybe one breakpoint for mobile you could do something like this: <div class="team"> <div class="team_member"> <img class="team_image" src="/path/to/image" onclick="this.nextElementSibling.classList.toggle('team_about--opened')" /> <div class="team_about"> <!-- content --> </div> </div> <div class="team_member"> <!-- repeat --> </div> <div class="team_member"> <!-- repeat --> </div> </div> CSS (non-tested, overly simplified and missing things, like accounting for the gap in the grid...): .team { display: grid; grid-template-columns: repeat(3, 1fr); } .team_about { width: 300%; height: 0; position: relative; background-color: blue; } .team_about:nth-child(3n + 2) { /* every 2nd element per row */ left: -33.333%; } .team_about:nth-child(3n + 3) { /* every 3rd element per row */ left: -66.666%; } .team_about--opened { height: auto; } .team_about::before { /* arrow */ content: ""; display: block; margin-left: -10px; position: absolute; bottom: 100%; left: 25%; border: 10px solid transparent; border-bottom-color: blue; } .team_about:nth-child(3n + 2)::before { left: 50%; } .team_about:nth-child(3n + 3)::before { left: 75%; } Basically the idea is to have the dropdown within the team member’s div so that when you open it it adds to the parent’s height (thus pushing the next line) and then you account for the offset by using position: relative. This is ok for such case where the layout is well defined but it doesn’t “scale” well if you decide to have 4/5/... members per row. However this is me not using any preprocessor but since I know you’re using Less (or Sass?) maybe you could easily write a function generating the necessary CSS based on the number per row. (in my example, JS is necessary to add the "team_about--opened" class, but you could do something with pure HTML/CSS using the amazing details tag)
  18. Thanks! It’s now updated https://processwire.com/modules/tags-to-folders/ 👍
  19. Here’s the update @MarkE, let me know if it’s all good (looks fine on my side) and I’ll push the update on github/modules directory TagsToFolders.module.php
  20. Ah, good point. I’d say it actually makes sense to show tagged system fields in their respective “folders” (looking back I might have picked the wrong name...) as well since it’s something you’re willingly doing, right? I’m going to add this and the option mentioned before, post the update here first so you can have a look and if it’s good this way then I’ll push the update.
  21. @MarkE there’s this module I made some time ago https://processwire.com/modules/tags-to-folders/ with one of the latest updates being having the system fields/templates in their own submenu. I could add an option to hide them so I’m taking your question as a feature request 🙂
  22. When moving out / back in the files did you make sure you moved the .htaccess (the one in the PW’s root directory) file as well? You can easily forget about it as it can be hidden by default.
  23. It seems you tried to upload the zip file of the github repository instead of the one within it with the translations (one can see this because of the repository’s README.md file in the error). First unzip “pw-30229-lang-fr-main.zip” and then upload ”pw_3.0.229_fr.zip” in ProcessWire.
  24. If you click on the return value "PagesNames" you can get there. As to where / how I encountered it, it was from the "Name format for children" option in the ProcessTemplate edit page:
  • Create New...