Support » Plugin: Feature A Page Widget » Enhancement: Custom “layout graphic”

  • I use FPW almost exclusively (thanks again) and often have custom layouts. It would be nice to allow the customization of layoutIcons.svg, though I don’t know if this rarely used feature would be worth the code to implement it.

    How I might go about it:


    Allow SVG or PNG files within fpw2_views whose filename matches the template file name except for the extension.

    Display Option 1: via CSS


    function fpw_layout_css( ) {
       $templates = fpw_widget_templates();
       $css       = '';
       $exts      = [ 'svg', 'png' ];
       foreach( $templates as $key => $title ) {
          $file = $url = '';
          $path = '/fpw2_views/' . $key . '.';
          foreach( $exts as $ext ) {
             $try = get_stylesheet_directory() . $path . $ext;
             if ( file_exists( $try) ) {
                $file = $try;
                $url = get_stylesheet_directory_uri() . $path . $ext;
          if ( ! $file ) continue;
          $css .= '.fpw-layouts .fpw-layout-' . $key . ':checked + label::after{';
          $css .= 'background-image: url( ' . $url . ');';
          $css .= 'background-position: 0 0;';
          $css .= '}';
       if ( $css ) {
          wp_add_inline_style( 'fpw_admin_css', $css );

    Display Option 2: Use JS

    Not going to code it, but would involve watching the click on the layout options, checking if the BG position of the label is 0,0, and then using ajax to try and get a new BG graphic. I think.

    Anyway, this would add a nice polishing touch to custom layouts. And, actually, now that I’m asking for the moon, it would be nice if the standard graphic could be replaced by having an exact-named graphic in the fpw2_views directory. I often co-opt standard layouts to reverse title/image order or similar. This is much less of a priority.

    If you use github for source control, would be happy to do a pull request there.

Viewing 1 replies (of 1 total)
  • Plugin Author mrwweb


    This is a great idea, and something I’ve mulled over but never quite gotten to.

    You could already implement a CSS override fairly easily to do this, but I could imagine either a new filter with a list of available layouts for selection including a “Custom” one that’s a fallback or a new argument in the fpw_widget_templates array for registering a custom SVG. As part of that work, I’ll likely break out each image as well, so that would be a double win for you.

    I have no timeline for any of this, but I’d expect it in the next version.

Viewing 1 replies (of 1 total)
  • The topic ‘Enhancement: Custom “layout graphic”’ is closed to new replies.