Jump to content

Recommended Posts

Awesome - thank you @teppo

Not sure if this is a good idea or not, but what about a way to choose between edit modes from the AdminBar? Inline Edit vs Admin Edit, or something along those lines. Not sure whether they should be separate buttons, or a dropdown for the alternate (not default) method, or perhaps long-click (although this takes training users so not sure this is a good idea).

I just feel like sometimes you know you will want to edit other pages after this one so it's a shortcut to the admin along with editing the page. 

Maybe it's getting too complex though, so no pressure 🙂

Share this post


Link to post
Share on other sites
9 hours ago, adrian said:

Not sure if this is a good idea or not, but what about a way to choose between edit modes from the AdminBar? Inline Edit vs Admin Edit, or something along those lines. Not sure whether they should be separate buttons, or a dropdown for the alternate (not default) method, or perhaps long-click (although this takes training users so not sure this is a good idea).🙂

Just checking that I got this right: do you mean that while the "slide overlay" is enabled and Admin Bar links (such as edit, new, and profile) will normally open the edit view in a "modal" window, there would be some way to open the target URL without the modal instead – going to the "full" admin interface? 🙂

If so, I can see value in this idea, but I'm not yet sure how to make that happen without messing up the simplicity of the UI or causing potentially confusing side-effects. Take long-click for an example: in my experience it's actually quite common for users to long-click or double-click things by accident (or by habit), so in my opinion (in a web based GUI) it's usually bad UX for these to lead to a different outcome vs. "regular click".

Anyway, I'd be interested in implementing this if there's a way to do it in a sensible way. And please let me know if I've misunderstood your idea 🙂

  • Like 1

Share this post


Link to post
Share on other sites

@teppo - yep, you have understood exactly what I am suggesting.

I agree - I don't like long click / double click.

Perhaps just a dropdown from the "Edit" link that says "Edit in Admin". But of course the main top-level Edit link would edit in the overlay, so no need to wait for the dropdown to appear when wanting to edit this way. ??

 

  • Like 1

Share this post


Link to post
Share on other sites
5 hours ago, tires said:

My updated theme is attached.

adminbar-tires-responsive2.png.341efdba7d2c5fcda521781b7c29f2c4.png

tires.zip 5.15 kB · 0 downloads

Thanks – this is now included with the latest release, 2.2.1 🙂

I made a couple of minor adjustments: in mobile size the dropdown was positioned slightly too far down so there was a gap between the icon in the bar and the dropdown, and the "ul li > a, ul li > strong" CSS rule was changed to ".adminbar__link" in order to avoid unintentionally affecting unrelated lists on the site.

9 hours ago, adrian said:

Perhaps just a dropdown from the "Edit" link that says "Edit in Admin". But of course the main top-level Edit link would edit in the overlay, so no need to wait for the dropdown to appear when wanting to edit this way. ??

I'll have to think about this a bit, not sure yet how it would fit the module. Technically this could be a relatively simple modification: the dropdown feature used for the "user" item applies to any item that has a "children" array, so one option would be adding that for the edit link. Haven't tested this yet, so not entirely sure, but that's one option at least 🙂

Share this post


Link to post
Share on other sites

Like to see how the module is growing!

There is a little mistake with the logo in the uikit theme.

And the order of the elements i added to "Items displayed in the admin bar" is not adopting the right way.

  • Like 1

Share this post


Link to post
Share on other sites
8 hours ago, tires said:

There is a little mistake with the logo in the uikit theme.

Could you clarify this a bit, what kind of mistake are you seeing? So far I haven't noticed anything wrong here, so it might be browser-dependent, or perhaps even site-dependent (Admin Bar is affected by site styles as well, so there's always a chance for that).

Please let me know what browser you're using, how it behaves – and if possible, a screenshot would be really helpful too 👍

8 hours ago, tires said:

And the order of the elements i added to "Items displayed in the admin bar" is not adopting the right way.

You mean when you add items via config settings? The order there doesn't actually affect the order of items in the Admin Bar – at least yet. That's something I have on my todo list, but not sure yet when I'll get to it 🙂

Share this post


Link to post
Share on other sites

Here is what i see (Firefox, Windows 10):

adminbar-2.2.1.thumb.png.65bf8bc2fae48d01d923f8d85227144f.png

 

16 hours ago, teppo said:

You mean when you add items via config settings? The order there doesn't actually affect the order of items in the Admin Bar – at least yet. That's something I have on my todo list, but not sure yet when I'll get to it 🙂

Yes, that is what i meant.
I am looking forward to this feature.

  • Like 1

Share this post


Link to post
Share on other sites
On 8/14/2019 at 12:22 AM, tires said:

Here is what i see (Firefox, Windows 10):

adminbar-2.2.1.thumb.png.65bf8bc2fae48d01d923f8d85227144f.png

Thanks – this should now be fixed in the latest version (2.2.2).

  • Like 1

Share this post


Link to post
Share on other sites

@teppo I just installed the module but noticed all links are anchor tags, which is a bit problematic since these links can be triggered involuntarily by scripts or browsers prefetches. When combined with frontend link preloaders (e.g. InstantClick) or browser prefetching (e.g. Google Chrome Page Prefetch), this results in newly-created orphan pages or mystery logouts. Is there a way the module can be updated to use buttons instead? This would also make it work better with libraries like Turbolinks or Barba.js which intercept link clicks to load them via AJAX and switch out the response body.

I'd gladly create my own theme to do that, but figure this is also a security issue, so it might be best to tackle this at the root level 🌝

  • Like 1

Share this post


Link to post
Share on other sites
13 hours ago, d'Hinnisdaël said:

@teppo I just installed the module but noticed all links are anchor tags, which is a bit problematic since these links can be triggered involuntarily by scripts or browsers prefetches. When combined with frontend link preloaders (e.g. InstantClick) or browser prefetching (e.g. Google Chrome Page Prefetch), this results in newly-created orphan pages or mystery logouts. Is there a way the module can be updated to use buttons instead?

Thanks for the feedback!

Replacing <a> tags with buttons was originally on my list, but I've been pushing it back as there are some additional considerations here:

  • There are some "proper links" (such as the admin link) that should remain that way. As such, this wouldn't apply to all links automatically.
  • When the modal ("slide overlay" in module settings) mode is disabled, almost every item should be a regular link – except for browse, which technically shouldn't do anything there, as in that case it's just an indicator of your "current state".
  • Admin Bar should work regardless of JavaScript. This makes it more robust, and as such more accessible.

That last point isn't an argument against using buttons, just something to keep in mind when making changes: everything should remain functional regardless, which could mean links by default (when JS isn't available, or working as expected) and buttons otherwise. Since default styling is now based on BEM, it should make this easier in some respects, though; technically what element is used shouldn't matter anyway.

I don't actually see (m)any notable issues in the current behaviour. None of the built-in Admin Bar features will create any content without user actually submitting a form – and I'd be very surprised if a plugin did that on itself. The logout link is problematic though, you're absolutely right on that one – I've added this on my todo list, but not entirely sure yet how to handle it.

I'm not familiar with Turbolinks, but the way Barba.js usually works is that you define a container, which you then switch with new content. I'm not particularly experienced in this regard, but to my best understanding you wouldn't usually define your entire <body> element as a container, and since AdminBar attempts to place itself as the last element right before </body> closing tag, normally this shouldn't be an issue – though again, this is just based on my (quite likely lacking) understanding of such libraries 🙂

  • Like 1

Share this post


Link to post
Share on other sites

@teppo Those are some good points.

I agree the admin link itself and the edit link should stay anchor tags. Create, browse and logout, however, aren't semantically speaking links since they potentially have side effects (create, logout) or only trigger module JS (browse).

Quote

None of the built-in Admin Bar features will create any content without user actually submitting a form – and I'd be very surprised if a plugin did that on itself.

There is one case that will create pages by merely following a link: when a template is configured to use the »Name format for children« setting in order to skip the page-add step. In that case, a new empty page is created every time the link is opened. I use that setting on most templates, that's probably why I noticed.

Quote

The logout link is problematic though, you're absolutely right on that one – I've added this on my todo list, but not entirely sure yet how to handle it.

The logout could be implemented using just a form and a submit button, using the form action for the logout URL. Not sure if ProcessWire currently supports custom redirect URIs after logout or if you might have to hook into the logout process for that.

Quote

I'm not familiar with Turbolinks, but the way Barba.js usually works is that you define a container, which you then switch with new content. I'm not particularly experienced in this regard, but to my best understanding you wouldn't usually define your entire <body> element as a container.

Turbolinks in particular switches out the whole body, but the problem here is that since there's no actual reload, stylesheets and scripts stay active on the page, so you mostly need to make sure that you don't cross between frontend and backend with any of these libraries, whatever part of the HTML they switch out.

I've found a hacky solution by canceling any AJAX page visits if the URL matches the ProcessWire admin URL, but that means the frontend code needs to have a 3rd-party backend module in mind, which feels wrong.

 

 

  • Like 1

Share this post


Link to post
Share on other sites
29 minutes ago, d'Hinnisdaël said:

I agree the admin link itself and the edit link should stay anchor tags. Create, browse and logout, however, aren't semantically speaking links since they potentially have side effects (create, logout) or only trigger module JS (browse).

There is one case that will create pages by merely following a link: when a template is configured to use the »Name format for children« setting in order to skip the page-add step. In that case, a new empty page is created every time the link is opened. I use that setting on most templates, that's probably why I noticed.

The logout could be implemented using just a form and a submit button, using the form action for the logout URL. Not sure if ProcessWire currently supports custom redirect URIs after logout or if you might have to hook into the logout process for that.

You're right that browse isn't really a link – that's definitely one that shouldn't be represented by <a> tag 👍

Logout is a border case: technically it can be a link, just like it is right now, but you're right that it probably shouldn't be. On the other hand even changing it to a form isn't, in my opinion, quite enough – it should also provide and validate some sort of nonce/token, just to be sure that it can't be abused. There's no redirect after logout at the moment either, so that's not a major problem. Anyway, I'll figure something out for the next minor release of the module.

Create is one of the cases where a link usually makes sense: it should be a link to the "new page" view in Admin in case the modal mode is disabled or JavaScript is for whatever reason out of equation. That being said, I've almost never used the "name format" option, so I didn't even think of that – that behaviour is indeed problematic and needs to be addressed somehow 🙂

29 minutes ago, d'Hinnisdaël said:

Turbolinks in particular switches out the whole body, but the problem here is that since there's no actual reload, stylesheets and scripts stay active on the page, so you mostly need to make sure that you don't cross between frontend and backend with any of these libraries, whatever part of the HTML they switch out.

I've found a hacky solution by canceling any AJAX page visits if the URL matches the ProcessWire admin URL, but that means the frontend code needs to have a 3rd-party backend module in mind, which feels wrong.

It just occurred to me that my earlier explanation was flawed 😞

If you reload, say, just the <main> element within your <body>, and Admin Bar remains as-is, the links/buttons there will point to the wrong page. As such using such plugins you probably would need to reload Admin Bar as well. I could add support for modifying target/parent IDs with JavaScript, but that would still require extra steps for the developer anyway. Also thought about using URL in this case, but that wouldn't help, as Admin Bar can't know for sure if you're using "real" URLs or some custom format (via URL segments, History API, or something else.)

Currently I'm thinking that an option for reloading / re-rendering Admin Bar via JavaScript might actually be the best option here: in most situations the module would work right out-of-the-box, but if you do use some sort of front-end routing / transition code, you could somehow tell it to update. Not a perfect solution, so any suggestions are welcome.

--

By the way, if – and only if – it turns out that one/some links can't be easily switched to buttons without sacrificing something else, do you know if role="button" would help at all?

I wouldn't use that unless I really have to (reinventing <button> with ARIA attributes is almost always just plain dumb), but this might be one of those cases where it's actually the most sensible approach – it would be an improvement in terms of accessibility, but I've no idea if it would help with preload/prefetch/etc. features 🙂

Share this post


Link to post
Share on other sites
Quote

Currently I'm thinking that an option for reloading / re-rendering Admin Bar via JavaScript might actually be the best option here: in most situations the module would work right out-of-the-box, but if you do use some sort of front-end routing / transition code, you could somehow tell it to update. Not a perfect solution, so any suggestions are welcome.

You're right in that it's nearly impossible to tell which page to edit just from the URL. I think the only reliable way of getting the correct edit link is to render the admin bar server-side using wire('page'). No need to make it overly complex, I guess, by going the JS route. If somebody decides to do partial content replacement in their frontend, I feel like that's just something they have to take care of themselves by including the admin bar in the list of replaceable containers.

The more I think about it, the more I feel like my case applies to that rule as well. If I want the links to force a full reload instead of a replacement, I need to configure my frontend accordingly.

My only remaining gripe is probably the logout button that shouldn't be an anchor 🤡

Quote

By the way, if – and only if – it turns out that one/some links can't be easily switched to buttons without sacrificing something else, do you know if role="button" would help at all?

As far as I know, it wouldn't make a difference since most libraries don't care too much about accessibility and tend to define their own cancellation methods (data-no-turbolinks="true", etc.).

 

  • Like 1

Share this post


Link to post
Share on other sites

First off all... I stumbled across this by accident and didn't follow the whole conversation... more or less... but as far as I understand the Adminbar (module) is only available to those who are logged in. So why bother with any libraries, browser extensions and such that (in most cases) only apply to those who aren't logged in?

There are many modules that behave differently when compared to logged in users and guests.

Sorry if I miss an important point here!

Share this post


Link to post
Share on other sites
9 hours ago, wbmnfktr said:

First off all... I stumbled across this by accident and didn't follow the whole conversation... more or less... but as far as I understand the Adminbar (module) is only available to those who are logged in. So why bother with any libraries, browser extensions and such that (in most cases) only apply to those who aren't logged in?

You're correct that AdminBar only applies to users who are logged in. There's no "guest user" when it comes to AdminBar – only superusers and users with the "adminbar" permission will see anything out of the ordinary. Regardless, since AdminBar outputs features visible on the front-end, it's very much connected with everything else happening there.

What you're missing here is that being logged in won't disable those browser extensions or nullify the effects of third party libraries – so it's not true that those features would only apply to users who aren't logged in. As such, it's very important that admin bar is as "tolerant" as possible, so that it won't break or cause new problems if you decide to implement a new JavaScript library on your site (or enable a browser feature/plugin).

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By teppo
      This module tracks changes, additions, removals etc. of public (as in "not under admin") pages of your site. Like it's name says, it doesn't attempt to be a version control system or anything like that - just a log of what's happened.
      At the moment it's still a work in progress and will most likely be a victim of many ruthless this-won't-work-let's-try-that-instead cycles, but I believe I've nailed basic functionality well enough to post it here.. so, once again, I'll be happy to hear any comments you folks can provide
      https://modules.processwire.com/modules/process-changelog/
      https://github.com/teppokoivula/ProcessChangelog
      How does it work?
      Exactly like it's (sort of) predecessor, Process Changelog actually consists of two modules: Process Changelog and Process Changelog Hooks. Hooks module exists only to serve main module by hooking into various functions within Pages class, collecting data of performed operations, refining it and keeping up a log of events in it's own custom database table (process_changelog.) Visible part is managed by Process Changelog, which provides users a (relatively) pretty view of the contents of said log table.
      How do you use it?
      When installed this module adds new page called Changelog under Admin > Setup which provides you with a table view of collected data and basic filtering tools See attached screenshots to get a general idea about what that page should look like after a while.
      For detailed installation instructions etc. see README.md.
       


    • By Gadgetto
      Status update links (inside this thread) for SnipWire development will be always posted here:
      2019-08-08
      2019-06-15
      2019-06-02
      2019-05-25
      If you are interested, you can test the current state of development:
      https://github.com/gadgetto/SnipWire
      Please note that the software is not yet intended for use in a production system (alpha version).
      If you like, you can also submit feature requests and suggestions for improvement. I also accept pull requests.
      ---- INITIAL POST FROM 2019-05-25 ----
      I wanted to let you know that I am currently working on a new ProcessWire module that fully integrates the Snipcart Shopping Cart System into ProcessWire. (this is a customer project, so I had to postpone the development of my other module GroupMailer).
      The new module SnipWire offers full integration of the Snipcart Shopping Cart System into ProcessWire.
      Here are some highlights:
      simple setup with (optional) pre-installed templates, product fields, sample products (quasi a complete shop system to get started immediately) store dashboard with all data from the snipcart system (no change to the snipcart dashboard itself required) Integrated REST API for controlling and querying snipcart data webhooks to trigger events from Snipcart (new order, new customer, etc.) multi currency support self-defined/configurable tax rates etc. Development is already well advanced and I plan to release the module in the next 2-3 months.
      I'm not sure yet if this will be a "Pro" module or if it will be made available for free.
      I would be grateful for suggestions and hints!
      (please have a look at the screenshots to get an idea what I'm talking about)
       




    • By Mike Rockett
      Jumplinks for ProcessWire
      Release: 1.5.54
      Composer: rockett/jumplinks
      Jumplinks is an enhanced version of the original ProcessRedirects by Antti Peisa.
      The Process module manages your permanent and temporary redirects (we'll call these "jumplinks" from now on, unless in reference to redirects from another module), useful for when you're migrating over to ProcessWire from another system/platform. Each jumplink supports wildcards, shortening the time needed to create them.
      Unlike similar modules for other platforms, wildcards in Jumplinks are much easier to work with, as Regular Expressions are not fully exposed. Instead, parameters wrapped in curly braces are used - these are described in the documentation.
      Under Development: 2.0, to be powered by FastRoute
      As of version 1.5.0, Jumplinks requires at least ProcessWire 2.6.1 to run.
      View on GitLab
      Download via the Modules Directory
      Read the docs
      Features
      The most prominent features include:
      Basic jumplinks (from one fixed route to another) Parameter-based wildcards with "Smart" equivalents Mapping Collections (for converting ID-based routes to their named-equivalents without the need to create multiple jumplinks) Destination Selectors (for finding and redirecting to pages containing legacy location information) Timed Activation (activate and/or deactivate jumplinks at specific times) 404-Monitor (for creating jumplinks based on 404 hits) Additionally, the following features may come in handy:
      Stale jumplink management Legacy domain support for slow migrations An importer (from CSV or ProcessRedirects) Feedback & Feature Requests
      I’d love to know what you think of this module. Please provide some feedback on the module as a whole, or even regarding smaller things that make it whole. Also, please feel free to submit feature requests and their use-cases.
      Note: Features requested so far have been added to the to-do list, and will be added to 2.0, and not the current dev/master branches.
      Open Source

      Jumplinks is an open-source project, and is free to use. In fact, Jumplinks will always be open-source, and will always remain free to use. Forever. If you would like to support the development of Jumplinks, please consider making a small donation via PayPal.
      Enjoy! :)
    • By nbcommunication
      I've spent the last while experimenting with srcset implementation - and PageimageSrcset is the result:
      PageimageSrcset
      Provides configurable srcset and sizes properties/methods for Pageimage.
      Overview
      The main purpose of this module is to make srcset implementation as simple as possible in your template code. It does not handle images rendered in CKEditor or similar fields.
      For an introduction to srcset and sizes, please read this Mozilla article about responsive images.
      Pageimage::srcset()
      // The property, which uses the set rules in the module configuration $srcset = $image->srcset; // A method call, using a set rules string // Delimiting with a newline (\n) would also work, but not as readable $srcset = $image->srcset("320, 480, 640x480 768w, 1240, 2048 2x"); // The same as above but using an indexed/sequential array $srcset = $image->srcset([ "320", "480", "640x480 768w", "1240", "2048 2x", ]); // The same as above but using an associative array // No rule checking is performed $srcset = $image->srcset([ "320w" => [320], "480w" => [480], "768w" => [640, 480], "1240w" => [1240], "2x" => [2048], ]); // Use the default set rules with portrait images generated for mobile/tablet devices $srcset = $image->srcset(true); // Return the srcset using all arguments $srcset = $image->srcset("320, 480, 640x480 768w, 1240, 2048 2x", [ "portrait" => "320, 640", ]); // The set rules above are a demonstration, not a recommendation! Image variations are only created for set rules which require a smaller image than the Pageimage itself. On large sites this may still result in a lot of images being generated. If you have limited storage, please use this module wisely.
      Portrait Mode
      In many situations, the ratio of the image does not need to change at different screen sizes. However, images that cover the entire viewport are an exception to this and are often the ones that benefit most from srcset implementation.
      The main problem with cover images is that they need to display landscape on desktop devices and portrait when this orientation is used on mobile and tablet devices.
      You can automatically generate portrait images by enabling portrait mode. It is recommended that you use this in combination with Pageimage::focus() so that the portrait variations retain the correct subject.
      The generated variations are HiDPI/Retina versions. Their height is determined by the portrait ratio (e.g. 9:16). Variations are always generated, regardless of whether the original image is smaller. Upscaling is disabled though, so you may find that some variations are actually smaller than they say they are in their filename.
      The sizes attribute should be used when portrait mode is enabled. Pageimage::sizes will return (orientation: portrait) and (max-width: {maxWidth}px) 50vw by default, which handles the use of these images for retina devices. The maximum width used in this rule is the largest set width.
      Pageimage::sizes()
      There is no option to configure default sizes because in most cases 100vw is all you need, and you do not need to output this anyway as it is inferred when using the srcset attribute. You can use the method for custom sizes though:
      // The property $sizes = $image->sizes; // Returns 100vw in most cases // Returns '(orientation: portrait) and (max-width: {maxWidth}px)50vw' if portrait mode enabled // A method call, using a mixture of integer widths and media query rules // Integer widths are treated as a min-width media query rule $sizes = $image->sizes([ 480 => 50, "(orientation: portrait) and (max-width: 640px)" => 100, 960 => 25, ]); // (min-width: 480px) 50vw, (orientation: portrait) and (max-width: 640px) 100vw, (min-width: 960px) 25vw // Determine widths by UIkit 'child-width' classes $sizes = $image->sizes([ "uk-child-width-1-2@s", "uk-child-width-1-3@l", ]); // (min-width: 640px) 50vw, (min-width: 1200px) 33.33vw // Determine widths by UIkit 'width' classes $sizes = $image->sizes([ "uk-width-1-2@m", "uk-width-1-3@xl", ]); // (min-width: 960px) 50vw, (min-width: 1600px) 33.33vw // Return the portrait size rule $sizes = $image->sizes(true); // (orientation: portrait) and (max-width: {maxWidth}px) 50vw // The arguments above are a demonstration, not a recommendation! Pageimage::render()
      This module extends the options available to this method with:
      srcset: When the module is installed, this will always be added, unless set to false. Any values in the formats described above can be passed. sizes: Only used if specified. Any values in the formats described above can be passed. uk-img: If passed, as either true or as a valid uk-img value, then this attribute will be added. The srcset attribute will also become data-srcset. Please refer to the API Reference for more information about this method.
      // Render an image using the default set rules echo $image->render(); // <img src='image.jpg' alt='' srcset='{default set rules}'> // Render an image using custom set rules echo $image->render(["srcset" => "480, 1240x640"]); // <img src='image.jpg' alt='' srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w'> // Render an image using custom set rules and sizes // Also use the `markup` argument echo $image->render("<img class='image' src='{url}' alt='Image'>", [ "srcset" => "480, 1240", "sizes" => [1240 => 50], ]); // <img class='image' src='image.jpg' alt='Image' srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w' sizes='(min-width: 1240px) 50vw'> // Render an image using custom set rules and sizes // Enable uk-img echo $image->render([ "srcset" => "480, 1240", "sizes" => ["uk-child-width-1-2@m"], "uk-img" => true, ]); // <img src='image.jpg' alt='' data-uk-img data-srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w' sizes='(min-width: 960px) 50vw'> // Render an image using portrait mode // Default rule sets used: 320, 640, 768, 1024, 1366, 1600 // Portrait widths used: 320, 640, 768 // Original image is 1000px wide // Not possible to use portrait mode and custom sets or portrait widths in render() // Sizes attribute automatically added echo $image->render(["srcset" => true]); // <img src='image.jpg' alt='' srcset='image.320x569-srcset-hidpi.jpg 320w, image.640x1138-srcset-hidpi.jpg 640w, image.768x1365-srcset-hidpi.jpg 768w, image.jpg 1024w' sizes='(orientation: portrait) and (max-width: 768px) 50vw'> Configuration
      To configure this module, go to Modules > Configure > PageimageSrcset.
      Set Rules
      These are the default set rules that will be used when none are specified, e.g. when calling the property: $image->srcset.
      Each set rule should be entered on a new line, in the format {width}x{height} {inherentwidth}w|{resolution}x.
      Not all arguments are required - you will probably find that specifying the width is sufficient for most cases. Here's a few examples of valid set rules and the sets they generate:
      Set Rule Set Generated Arguments Used 320 image.320x0-srcset.jpg 320w {width} 480x540 image.480x540-srcset.jpg 480w {width}x{height} 640x480 768w image.640x480-srcset.jpg 768w {width}x{height} {inherentwidth}w 2048 2x image.2048x0-srcset.jpg 2x {width} {resolution}x How you configure your rules is dependent on the needs of the site you are developing; there are no prescriptive rules that will meet the needs of most situations. This article gives a good overview of some of the things to consider.
      When you save your rules, a preview of the sets generated and an equivalent method call will be displayed to the right. Invalid rules will not be used, and you will be notified of this.
      Portrait Mode
      Set Widths
      A comma limited list of widths to create HiDPI/Retina portrait variations for.
      Crop Ratio
      The portrait ratio that should be used to crop the image. The default of 9:16 should be fine for most circumstances as this is the standard portrait ratio of most devices. However, you can specify something different if you want. If you add a landscape ratio, it will be switched to portrait when used.
      Any crops in the set rules ({width}x{height}) are ignored for portrait mode variations as this ratio is used instead.
      UIkit Widths
      If your website theme uses UIkit, you can pass an array of UIkit width classes to Pageimage::sizes to be converted to sizes. The values stored here are used to do this. If you have customised the breakpoints on your theme, you should also customise them here.
      Please note that only 1- widths are evaluated by Pageimage::sizes, e.g. uk-width-2-3 will not work.
      Remove Variations
      If checked, the image variations generated by this module are cleared on Submit. On large sites, this may take a while. It makes sense to run this after you have made changes to the set rules.
      Image Suffix
      You will see this field when Remove Variations is checked. The value is appended to the name of the images generated by this module and is used to identify variations. You should not encounter any issues with the default suffix, but if you find that it conflicts with any other functionality on your site, you can set a custom suffix instead.
      Debug Mode
      When this is enabled, a range of information is logged to pageimage-srcset.
      PageimageSrcsetDebug.js is also added to the <head> of your HTML pages. This will console.log a range of information about the images and nodes using srcset on your page after a window.onresize event is triggered. This can assist you in debugging your implementation.
      The browser will always use the highest resolution image it has loaded or has cached. You may need to disable browser caching to determine whether your set rules are working, and it makes sense to work from a small screen size and up. If you do it the other way, the browser is going to continue to use the higher resolution image it loaded first.
      UIkit Features
      This module implements some additional features that are tailored towards UIkit being used as the front-end theme framework, but this is not required to use the module.
      Installation
      Download the zip file at Github or clone the repo into your site/modules directory. If you downloaded the zip file, extract it in your sites/modules directory. In your admin, go to Modules > Refresh, then Modules > New, then click on the Install button for this module. ProcessWire >= 3.0.123 is required to use this module.
    • By nbcommunication
      Wondering how to get that A+ rating on Mozilla Observatory? Now you can with ⭐⭐⭐MarkupContentSecurityPolicy⭐⭐⭐
      Of course, MarkupContentSecurityPolicy does not guarantee an A+ rating, but it does help you implement a Content Security Policy for your ProcessWire website.
      Markup Content Security Policy
      Configure and implement a Content Security Policy for all front-end HTML pages.
      This module should only be used in production once it has been fully tested in development. Implementing a Content Security Policy on a site without testing will almost certainly break something!
      Overview
      Website Security Auditing Tools such as Mozilla Observatory will only return a high score if a Content Security Policy is implemented. It is therefore desirable to implement one.
      A common way of adding the Content-Security-Policy header would be to add it to the .htaccess file in the site's root directory. However, this means the policy would also cover the ProcessWire admin, and this limits the level of security policy you can add.
      The solution is to use the <meta> element to configure a policy, for example: <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">. MarkupContentSecurityPolicy places this element with your configured policy at the beginning of the <head> element on each HTML page of your site.
      There are some limitations to using the <meta> element:
      Not all directives are allowed. These include frame-ancestors, report-uri, and sandbox. The Content-Security-Policy-Report-Only header is not supported, so is not available for use by this module. Configuration
      To configure this module, go to Modules > Configure > MarkupContentSecurityPolicy.
      Directives
      The most commonly used directives are listed, with a field for each. The placeholder values given are examples, not suggestions, but they may provide a useful starting point.
      You will almost certainly need to use 'unsafe-inline' in the style-src directive as this is required by some modules (e.g. TextformatterVideoEmbed) or frameworks such as UIkit.
      Should you wish to add any other directives not listed, you can do so by adding them in Any other directives.
      Please refer to these links for more information on how to configure your policy:
      https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy https://scotthelme.co.uk/content-security-policy-an-introduction/ https://developers.google.com/web/fundamentals/security/csp/ Violation Reporting
      Because the report-uri directive is not available, when Violation Reporting is enabled a script is added to the <head>which listens for a SecurityPolicyViolationEvent. This script is based on https://developer.mozilla.org/en-US/docs/Web/API/SecurityPolicyViolationEvent and POSTs the generated report to ?csp-violations=1. The module then logs the violation report to csp-violations.
      Unfortunately, most of the violations that are reported are false positives, and not actual attempts to violate the policy. These are most likely from browser extensions and are not easy to determine and filter.
      For this reason, there is no option for the report to be emailed when a policy is violated. Instead, you can specify an endpoint for the report to be sent to. This allows you to handle additional reporting in a way that meets your needs. For example, you may want to log all reports in a central location and send out an email once a day to an administrator notifying them of all sites with violations since the last email.
      Retrieving the Report
      To retrieve the report at your endpoint, the following can be used:
      $report = file_get_contents("php://input"); if(!empty($report)) { $report = json_decode($report, 1); if(isset($report) && is_array($report) && isset($report["documentURI"])) { // Do something } } Debug Mode
      When this is enabled, a range of information is logged to markup-content-security-policy. This is probably most useful when debugging a reporting endpoint.
      Additional .htaccess Rules
      To get an A+ score on Mozilla Observatory, besides using HTTPS and enabling the HSTS header, you can also place the following prior to ProcessWire's htaccess directives:
      Header set Content-Security-Policy "frame-ancestors 'self'" Header set Referrer-Policy "no-referrer-when-downgrade" Installation
      Download the zip file at Github or clone the repo into your site/modules directory. If you downloaded the zip file, extract it in your sites/modules directory. In your admin, go to Modules > Refresh, then Modules > New, then click on the Install button for this module. ProcessWire >= 3.0.123 is required to use this module.
×
×
  • Create New...