pict3000

I solved the problem.

The assignment of artWall and artOnly at the top of the script was loading before the html that it was looking for. So those objects were null and the code wouldn’t work. So I moved those assignments into the functions that were being called within the html onload events.

That’s why the code was working when hard coded on page, but not enqueued.

Thanks for pointing out the null objects, Andrew!

I didn’t get anything with the second console log. But an error message says both get***Pixels functions are not being found onload. The error message is calling them variables. Hmm.

Maybe it’s a timing issue, i.e. the two get***Pixels() functions are being called before they are available. That might explain why the code works on page but not enqueued.

I managed time enough to console.log on artOnly. It was null. I’ll try your other suggestion jQuery("#art-color").length; tomorrow. Thanks for your help!

I sure will. Back tomorrow.

Why is the code working when hard coded into the html between script tags, but not in the enqueued version?

You bet. Here’s the page:
Custom Colors

As described on that page, the user chooses 2 colors from 2 color pickers, then clicks on the 2 buttons to make the wall color, then the art color, change according to their chosen colors. This all worked perfectly with the code in the page body.

Two of the functions, getWallPixels() and getArtPixels() are triggered onload in the image tags. The buttons fire onclick events for changeWallColor() and changeArtColor() functions. The color-changing code is here:

var artWall = document.getElementById("wall-color");
            var artOnly = document.getElementById("art-color");
            var canvas = document.createElement("canvas");
            var canvas2 = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            var ctx2 = canvas2.getContext("2d");
            var originalPixels = null;
            var currentPixels = null;
            var originalPixels2 = null;
            var currentPixels2 = null;
            var test = "bear";

            function getWallPixels(img)
            {
                canvas.width = img.width;
                canvas.height = img.height;

                ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
                originalPixels = ctx.getImageData(0, 0, img.width, img.height);
                currentPixels = ctx.getImageData(0, 0, img.width, img.height);

                img.onload = null;
            }

            function getArtPixels(img)
            {
                canvas2.width = img.width;
                canvas2.height = img.height;

                ctx2.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
                originalPixels2 = ctx2.getImageData(0, 0, img.width, img.height);
                currentPixels2 = ctx2.getImageData(0, 0, img.width, img.height);

                img.onload = null;
            }

            function hexToRGB(hex)
            {
                var long = parseInt(hex.replace(/^#/, ""), 16);
                return {
                    R: (long >>> 16) & 0xff,
                    G: (long >>> 8) & 0xff,
                    B: long & 0xff
                };
            }            

              function changeWallColor()
                {
                    if(!originalPixels) return; // Check if image has loaded
                    var newColor = hexToRGB(document.getElementsByTagName("INPUT")[0].value);

                    for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
                    {
                        if(currentPixels.data[I + 3] > 0) // If it is not a transparent pixel
                        {
                            currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                            currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                            currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
                        }
                    }

                    ctx.putImageData(currentPixels, 0, 0);
                    artWall.src = canvas.toDataURL("image/png");
                }

                function changeArtColor()
                {
                    if(!originalPixels2) return; // Check if image has loaded
                    var newColor = hexToRGB(document.getElementsByTagName("INPUT")[1].value);

                    for(var I = 0, L = originalPixels2.data.length; I < L; I += 4)
                    {
                        if(currentPixels2.data[I + 3] > 0) // If it is not a transparent pixel
                        {
                            currentPixels2.data[I] = originalPixels2.data[I] / 255 * newColor.R;
                            currentPixels2.data[I + 1] = originalPixels2.data[I + 1] / 255 * newColor.G;
                            currentPixels2.data[I + 2] = originalPixels2.data[I + 2] / 255 * newColor.B;
                        }
                    }

                    ctx2.putImageData(currentPixels2, 0, 0);
                    artOnly.src = canvas2.toDataURL("image/png");
                }

Thanks for taking a look.

Awesome! Thanks again, James.

Sorry about my miscommunication. Someone once said, “Don’t listen to what I say, listen to what I mean.” ??

Before I say why that won’t work, let me just say that was a good suggestion, nevertheless. And thank you!

The reason it won’t work is because when someone clicks on that photo, which represents a product category, they will be taken to the corresponding category page titled with the text I re-styled underneath the photo on the homepage. That’s not what I want.

I want text underneath those three product category photos independent of the titles that will display on their linked-to pages.

I suppose I need to know what filter hook to use so I can maybe create a new <p> underneath those category titles (that are situated under their photos). This is where I’m on shaky ground because I’ve never worked with filters and plugins before.

Trying to get my footing in filters and actions by looking for the origin of the filter hook storefront_product_categories_args from this code in themes/storefront/inc/structure/templates_tags.php:

* Display Product Categories
	 * Hooked into the <code>homepage</code> action in the homepage template
	 * @since  1.0.0
	 * @return void
	 */
	function storefront_product_categories( $args ) {

		if ( is_woocommerce_activated() ) {

			$args = apply_filters( 'storefront_product_categories_args', array(
				'limit' 			=> 3,
				'columns' 			=> 3,
				'child_categories' 	=> 0,
				'orderby' 			=> 'name',
				'title'				=> __( 'Product Categories', 'storefront' ),
				) );

			etc...

Where is this filter hook? A database read somewhere, right?

Anyone know?

Thanks James.

Great advice, thank you!

It all worked great. Now all I need to do is bone up on actions and filters and hooks and I’ve got the control I’m looking for.

Following up on my previous post, I found the <section> string in storefront/inc/structure/template-tags.php when I did a search for that html in my WP files. So I got pretty close to the image source part that would let me change image sizes, etc., but a search for any part of <img src="https://4ninths.com/wp-content/uploads/2015/02/music-450x600-150x150.jpg" alt="Music" width="150" height="150"> didn’t give me any search results.

The images I have there now (4ninths.com) are the theme’s stock photos. I know how to change them in admin, but I want total control.

So to revise my question, where would I find the php that generates the “img src” for homepage product categories?

James, because this is the only code in template-homepage:

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			/**
			 * @hooked storefront_page_content - 10
			 * @hooked storefront_product_categories - 20
			 * @hooked storefront_recent_products - 30
			 * @hooked storefront_featured_products - 40
			 * @hooked storefront_popular_products - 50
			 * @hooked storefront_on_sale_products - 60
			 */
			do_action( 'homepage' ); ?>

		</main><!-- #main -->
	</div><!-- #primary -->
<?php get_footer(); ?>

you can see why I’m unable to find the html. Apparently, the markup I’m looking for is buried in the line * @hooked storefront_product_categories - 20. So how do I drill down into that?

What am I trying to do? In this particular case I’m trying to experiment with various category-image sizes, and rearrange neighboring text accordingly. But from here on out I will always need to be able to find whatever html I may choose, for whatever manipulation I may need, for any location on any web page anywhere on my site, for any design reason that may arise.

So where are these ‘hooked’ blocks of code so I can manipulate the html they output?

Yep, that did it! Deafening applause and a rowdy ovation for you, Calvin!!

@wooassist– in order to change the font-family for whatever text I replace “Primary Menu’ with, what css selector do I target?