In my crowd fundraiser (which incidentally I managed

In my crowd fundraiser (which incidentally I managed to convince PayPal to give me an app ID after three weeks of grief)
I want to "reward" people with T-Shirts... simple - or not!

The key here I need to offer a size option. Either I offer 6 different rewards of the difference being size (makes the fundraiser ugly); or on pledging and going through paypal, they return th the thank you page, with a big button saying "fill in size and delivery details" which go to a Gravity form for such a purpose (I know I could get address within fundraiser, but my form is neater :grinning:.

So I have an image for my button and to keep with the "theme" where buttons go from gold with blue text to gold with red text on mouse over, I want to add the following code:

<img class="aligncenter" onmouseover="this.src='https://www.since1664.com/wp-content1664/uploads/2014/02/sizeanddeliveryover.jpg'" onmouseout="this.src='https://www.since1664.com/wp-content1664/uploads/2014/02/sizeanddelivery.jpg'" alt="" src="https://www.since1664.com/wp-content1664/uploads/2014/02/sizeanddelivery.jpg" />

which achieves the desired aim. But when I save the fundraiser is saves as:

<img class="aligncenter" alt="" src="https://www.since1664.com/wp-content1664/uploads/2014/02/sizeanddelivery.jpg" />

ie it is messing with my single quotes - any idea why, and if there is a short term fix?

  • Alexander

    Hi @TrueHammer,

    The WordPress post editor will do this for any post. It's a security issue to allow Javascript from posts or pages, as there are often many users who have access to this.

    There are a couple of options here. You can add the unfiltered_html capability to your user account with a plugin like PermitPress.
    https://codex.wordpress.org/Roles_and_Capabilities#unfiltered_html

    Or, you can move your code into it's own javascript that loads in your theme footer.

    Try this code:

    add_action('wp_footer','add_custom_js_for_hover');
    
    function add_custom_js_for_hover() { ?>
    <script>
    jQuery(function($){
        $( "img[src*=sizeanddelivery.jpg]" ).hover(
          function() {
            $( this ).attr("src", "https://www.since1664.com/wp-content1664/uploads/2014/02/sizeanddeliveryover.jpg");
          }, function() {
            $( this ).attr("src", "https://www.since1664.com/wp-content1664/uploads/2014/02/sizeanddelivery.jpg");
          }
        );
    });
    </script> <?php
    
    }

    That should find all images that use the first image, then apply a handler that changes the image source on hover. I've not tested it, but that's the general approach.

    You can place this code in functions.php of a theme (or Child Theme), in your own plugin, or using something like Code Snippets.

    Best regards,

  • TrueHammer

    That is great - thanks not being a php buff (actually I am a complete ignoramus) I ran this through a php code checker and it suggests one two many }

    However tried it and managed to break the site!! Not sure whether this goes before the opening php satatement in my current child theme functions php or after and if so whether all the code.

    This is the current child theme functions theme:

    /**start*/
    
    <?php
    
    // Tell the main theme that a child theme is running. Do not remove this.
    $GLOBALS['builder_child_theme_loaded'] = true;
    
    // Load translations
    load_theme_textdomain( 'it-l10n-Builder-Base', get_stylesheet_directory() . '/lang' );
    
    /**
     * Registers support for post formats.
     */
    function builder_base_child_setup() {
    	/**
    	 * Enable support for Post Formats.
    	 *
    	 * @link http://codex.wordpress.org/Post_Formats
    	 */
    	add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat' ) );
    }
    add_action( 'after_setup_theme', 'builder_base_child_setup' );
    /**
     * forces fonts to be registered to get around https problems
     */
    function add_my_code() {
    
            // load the font
            wp_register_style('googleFonts-Open-Sans', '//fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700');
            wp_enqueue_style( 'googleFonts-Open-Sans');
    
    }
    add_action('wp_enqueue_scripts', 'add_my_code');
    
    // Do not load custom font over http
    add_filter( 'builder_base_enable_custom_font', '__return_false');
    
    /* Add custom roles for newsletter sign ups */
    add_role('contact_us', 'Contact Us', array(
        'read' => true,
        'edit_posts' => true,
        'delete_posts' => true,
    ));
    
    add_role('news', 'News Sign Ups', array(
        'read' => true,
        'edit_posts' => true,
        'delete_posts' => true,
    ));
    
    add_role('pre_reg', 'Pre Register', array(
        'read' => true,
        'edit_posts' => true,
        'delete_posts' => true,
    ));
    
    /**end*/

    SO helping a numpty out greatly appreciated :slight_smile:

  • TrueHammer

    @Alex, going back to your first comment:

    "The WordPress post editor will do this for any post. It's a security issue to allow Javascript from posts or pages, as there are often many users who have access to this.

    There are a couple of options here. You can add the unfiltered_html capability to your user account with a plugin like PermitPress.
    "

    My reading of " unfiltered_html " is that admins should have it enabled by default. Now I have yet to investigate whether I do, but if this is the case and I indeed make sure I have this privilege surely the code I am trying to save should actually save (which suggests the privilege has been turn off somewhere (maybe better wp-security).

    So assuming I get this turned back on I should be able to save this - Also If I turn it on for admins, or create a new admin role just for me, does this create a security issue - ie is it the ability to save that has been affected or is this an issue with a visitor seeing the mouseover work?

    BTW, not sue I made it clear, the mouseover works in a txt widget..... and on a page, its just in when put into the "return" piece in fundraiser.....

  • Maniu

    Hello @TrueHammer

    Fundraising should not strip anything, i am not sure why it does for you but i think it is much better to achieve what you need with css:

    .fundraising-button {
    display:inline-block;
    width:WIDTH_OF_IMAGEpx;
    height:HEIGHT_OF_IMAGEpx;
    background: url('https://www.since1664.com/wp-content1664/uploads/2014/02/sizeanddelivery.jpg');
    }
    .fundraising-button:hover {
    background: url('https://www.since1664.com/wp-content1664/uploads/2014/02/sizeanddeliveryover.jpg');
    }

    Then you can add to the content of post something like:
    <div class="fundraising-button"></div>
    or
    <a class="fundraising-button"></a>

    I have not tested it but i hope it will work:slight_smile:

    Thanks,
    Maniu

  • TrueHammer

    @Maniu, thanks will look at that - I do believe it is a work around though. Rest assured however, that fundraiser is stripping out that code - I have had people watch as it works in a post, then cut and paste into fundraiser, and see it disappear as it saves!

    Not sure its better to do it in css (though would guess better than in functions file) than in fundraiser - as you suggest "it should work" - another example of plugins (I have to say almost everyone from everywhere) that "work" but miss the last 10%.

    In this case I am only trying to call a gravity form as I can't get someone to tell their "size/colour" for a reward in fundraiser.... and given my estimate that at least 50% of any rewards (but any T-Shirt which is a pretty common reward in my experience of crowdsourcing) will involve a colour/size selection, this seems to me to be a bit of a glaring omission - the 10% that's "missing"

  • TrueHammer

    @ Maniu surely CSS is the best work around given my servers seem to be stripping this (though why not for a page - any clue as to what to ask the isp here would be great)? Doing it in fundraiser is surely the "proper" option - after all that why the post paypal field otherwise? When asking the ISP, what is the nature of that field in fundraiser (ie it is not a page but a ????)

    Of course, I am only having to do this to link to the Gravity Form to capture size/colour of the T-shirts (or mugs or wristband or whatever) as I can't do this in fundraiser. You already capture Address (but typo spelling of Addres line 2) so adding size/colour info, with address or with each reward is I suggest not a hugely significant task (but that is a guess - like firstname on newsletter) requirement, but a significant enhancement to the functionality given the nature of crowdfunding rewards.....

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.