Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 11/10/2022 in all areas

  1. ProcessWire Docker Image Dockerized Processwire installation and development enviroment Local enviroment with MariaDB container included Mount local filesystem Processwire versions VSCode Itelliphense configuration xDebug preconfigured Opcache + JIT ready (xDebug must be disabled) Installation & usage Development enviroment installation Build using local script $ git clone https://github.com/laikmosh/docker-processwire.git $ cd docker-processwire $ docker-compose up Install as usual, no extra configuration is needed. There is a config-dev.php file in the ./site/ folder, this file will load by default when running locally, but is in the .dockerignore, so it wont be included at image building time. Custom php.ini settings can be set at: /Processwire/scripts/php/php.ini *Image must be rebuilt for changes on php.ini to take effect Development enviroment usage By default the ProcessWire installer will load the `.env` configuration. Configure .env file for project and DB settings, default database credentials are: Database: {COMPOSE_PROJECT_NAME} User: admin Password: password Server: database Port: 3306 Editable files and templates will be installed to the ./site/ folder. Processwire documentation ProcessWire ProcessWire Repo ProcessWire Documentation
    5 points
  2. If you're just after making your image a wonky shape then you can probably just use some fancy css border radius values. Here's a handy looking site for generating the code that looks promising: https://9elements.github.io/fancy-border-radius/
    3 points
  3. Sticking to FA will probably be a good idea because there's a lot of javascript on the backend (for example for adding spinners that indicate loading) and that would likely break with other icon libraries that work differently or use other classes. On the other hand having more icons available would be nice, so the free subset of FA6 sounds like a good idea to me if it does not take up too much space just for the small benefit of having more icons. I think the best chances to get that into the core are if someone just tried it out and provided a PR and let Ryan know about it. Or maybe ask Ryan before doing it if he'd be willing to add it at all (to prevent useless work).
    2 points
  4. ProcessWire uses still a limited subset of Font Awesome 4 for the back-end. One solution could be to upgrade to Font Awesome 6 with 2000 icons in the free version: https://fontawesome.com/search?o=r&m=free Of course the Feather and Material icons are also beautiful.
    2 points
  5. No, it's not ? The mask does not stretch to the image below ? GOT IT!!! The key is to add this to your <svg> element: preserveAspectRatio="none" It's for sure an edge-case but I like solutions that work always, and not almost always ?
    2 points
  6. Thanks @Guy Incognito. Yes, now that I've dived in a bit, I can see that handling the communication may be tricky. (Logged-in sales rep initiates a 'stock query' > check if exists, creates a new DB record > writes file > waits for response > checks if new response file matches my stock query > parse file and update DB record > display result > rinse and repeat.) The php module 'Inotify' looks promising as far as checking for directory/file changes, but I haven't gotten there yet. Thanks again.
    1 point
  7. yes it worked before (Rockfrontend Version 2.1.11) without the noescape filters. When I upgrade to 2.7.1, I need to add them. there is a standard.php that has one line of code: <?= $rockfrontend->render('./standard.latte') ?> and the standard.latte looks like this now (the whole main body HTML content is rendered from ProField repater matrix): {$rockfrontend->render('includes/_head')|noescape} {$rockfrontend->render('includes/_header')|noescape} <!-- Render all Layout Blocks defined in page. Output derived from seperate output files --> {$rockfrontend->render($page->layout_blocks)|noescape} {$rockfrontend->render('includes/_footer')|noescape}
    1 point
  8. @bernhard Imho modifiers like 2x should not be necessary at all. It took me quite some time and testing to wrap my head around responsive images and my experiments with the current browsers showed that whenever my sizes attribute was accurate, the browser chose the closest image resolution from the sourceset taking pixel density of the screen into account automatically. This is a (rather complex) example for my usage of PageimageSource on a page with a masonry style layout that can have from 1 to 5 columns and the sizes also take padding etc. into account (which might be overkill): $img_markup = $img->render([ 'picture' => true, 'srcset' => ['360', '480', '640', '800'], 'sizes' => '(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))', 'class' => 'teaser-img proportional', 'alt' => $img->description, 'markup' => "<img src='{$img->width(480)->url}' alt='{alt}' class='{class}' width='".$img->width(480)->width."' height='".$img->width(480)->height."'>" ]); Output: <picture> <source srcset="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.360x0-srcset.webp 360w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0-srcset.webp 480w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.640x0-srcset.webp 640w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.800x0-srcset.webp 800w" sizes="(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))" type="image/webp"> <source srcset="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.360x0-srcset.jpg 360w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0-srcset.jpg 480w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.640x0-srcset.jpg 640w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.800x0-srcset.jpg 800w" sizes="(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))" type="image/jpeg"> <img src="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0.jpg" alt="Klimanagepasster Wohnunsgbau" class="teaser-img proportional" width="480" height="282" loading="lazy"> </picture> @nbcommunication Great module, I like it a lot! Nevertheless my example also shows a little incovenience I experienced when using PageimageSource: I need to output width and height attributes for my img tag and using the markup option (as shown above) was the only way to accomplish this. Using the height and width options of the render method rendered the srcset useless (all the same sizes). Maybe you could implement an option that outputs the size of the first entry from the srcset as width and height attributes of the img? Especially when using lazyloading the width and height attributes serve as proportional placeholders and prevent layout shifts. Cheers, Flo
    1 point
  9. Hi, I'm very happy to announce that processwire is finally available on turnkey. Here is the link https://www.turnkeylinux.org/node/32567 Turnkey offers production ready free open source server images, meaning that they give you servers already installed and configured ready to be facing the internet. You can now host your own processwire without having to install or configure it. Thanks, Have a good day !!
    1 point
  10. It's 2022, I'm using Processwire 3.0.200 and I still have this issue in every project. Very frustrating! I even changed the /wire/modules/Inputfield/InputfieldCKEditor/mystyles.js in case my file is ignored (it is linked in the source code though), still no changes. Anyone found a solution to this yet? @ryan?
    1 point
  11. Added some useful functions to FieldtypeColor class: /** * Find the "naive" difference between two colors. * @param int[] $color_a Three-element array with R,G,B color values 0-255. * @param int[] $color_b Three-element array with R,G,B color values 0-255. * @return int */ public function getColorDistance(array $color_a, array $color_b) /** * Find the difference between two colors' luminance values. * @param int[] $color_a Three-element array with R,G,B color values 0-255. * @param int[] $color_b Three-element array with R,G,B color values 0-255. * @return int */ public function getLuminanceDistance(array $color_a, array $color_b) /** * Find the closest named color * @param hexcolor 6 or 8 digits, with or without leading '#' * @return string */ public function getClosestColorName(string $color) Usage example: $fc = $modules->get('FieldtypeColor'); $colorname = $fc->getClosestColorName('#01fb99'); var_dump($colorname); // string(17) "MediumSpringGreen" I needed this for the COLOR property in .ics file type. According to the specifications, the value must be a valid CSS3 color name. https://icalendar.org/New-Properties-for-iCalendar-RFC-7986/5-9-color-property.html
    1 point
  12. I have added a new field type to the FieldtypeColor package. It is still in beta, but is already working quite well. The module is an extension of the Core FieldtypeOptions module and offers colors as predefined selectable options via 4 different input field types (Select, SelectMultiple, Checkboxes and Radios). Please try it out and if you like it, recommend it in the modules directory ? 2 Screenshots
    1 point
×
×
  • Create New...