Replacing wave

The image is loaded from the sidebar-banner.php file which grabs the curve images from the theme’s image folder. There are two curves, one for the large and one for the smaller curve. In the sidebar-banner file, there are several instances of the images, for example:

echo '<div id="banner-curve"><img src="' . get_template_directory_uri()  . '/images/wave-fp-' . $colourscheme . '.png" alt="banner curve" /></div>';

The wave-fp is the larger curve while the wave-page is the smaller.

Was this what you were looking for?

That’s about all I have been able to figure out. Last night I wasn’t able to get much past that point.

As a start I have placed a copy of sidebar-banner.php in the child theme, together with an images directory containing a copy of the file intended to replace the home page wave. This file I have temporarily renamed wave-fp-default.png to see if I am on the right track. I haven’t created a smaller one for the other image yet. The site doesn’t show my replacement file, so I am thinking that I am missing how the path to the image file is in the sidebar-banner.php code. Either that or there is another piece that still needs to be incorporated in the child theme. My php is pretty minimal.

What am I missing?

This will more likely be the issue…

Change this:

get_template_directory_uri()

to

get_stylesheet_directory_uri()

Reference: https://codex.www.ads-software.com/Function_Reference/get_stylesheet_directory_uri

I really appreciate your help with this. I have been envisioning this for awhile and am looking forward to seeing it work.

That got it a step closer. I changed all instances of that line of code in the sidebar-banner.php. When I refreshed the wave had been replaced by a horizontal grey band with ‘banner curve’ in small text in the lower left corner of the band. Possibly an alt tag?—this is the only text on the page which can’t be selected. It does this on all pages now.

I tried inspecting the element and it comes up with the id of ‘no-curve’ even though the settings are for the curve to show on all pages, large on the home page.

Next?

It’s kind of hard to actually envision this because I cannot see your results or really have an idea of what kind of graphic is replacing the curves; is to exist on all pages; is it still required to overlay the bottom part of the banner image? etc…

The small text in a grey background sounds like that is the ALT tag, but your custom image is a broken path. I just tried a child theme on my local test site and was able to show the custom image when I replaced the curve image. So it sounds like your sidebar-banner file is not finding your custom image. When I did mine, I did this for the full path:

<img src="' . get_stylesheet_directory_uri()  . '/images/test.png" alt="banner curve" />

It also worked this way when I renamed the custom image as test-default.png:

<img src="' . get_stylesheet_directory_uri()  . '/images/test-' . $colourscheme . '.png" alt="banner curve" />

That one of course is if you plan to have different colours of your custom graphic that are assigned to the same colour as the parent theme choices are.

My objective is to come fairly close to recreating what you have done with the wave, using the large one at the top of the home page, and the smaller one for the other pages. At this point I am only working with the home page. My file is slightly taller than the wave is. Instead of a wave it is a border of foliage and flowers. I know I will need to adjust the positioning after I am able to see it. As with the wave, there will be some overlap of the banner.

I didn’t see any errors in my code, but after seeing your examples I have simplified mine to exclude the color scheme option. It isn’t showing yet so I am clearly missing something.

get_stylesheet_directory_uri() . '/images/foliage-fp.png" alt="foliage"

Here is a shot of the file structure and this is a shot of what I am currently seeing.
Thank you

I clipped the code when I copied it. Here is the full block—

<?php dynamic_sidebar( 'banner' );
				if( $fpcurve ) : // show or hide the curve on the front page
                	if( $fplgcurve ) : // show the large curve on the front page
                        echo '<div id="banner-curve"><img src="' . get_stylesheet_directory_uri()  . '/images/foliage-fp.png" alt="foliage" /></div>';

The screenshot tells me that the image is not found and only the ALT is showing….but even the ALT tag is not correct if it says “banner curve” instead of “foliage”.

Again, it’s hard to tell what is happening unless I had access to the site because I use the browser’s webmaster tools to troubleshoot (I use chrome for that).

But is seems that something is not done correctly with your child theme somewhere. Again, moments ago I was able to get a custom image to replace the curve on my test child theme.

There is one thing though….make sure the code you change to your custom image is in the correct area of the sidebar-banner file. There are two instances, one for the front page and one for pages. The top part is for the front page otherwise the bottom half is for pages.

Can you post a link to your curve replacement image here? I’m going to use your image on my test.

The path is here

(It was nice to see it again—even though it’s still not where it belongs!)

Thank you

OK, I think I know what might be happening here.
First, I have to make assumptions here because I don’t have access to the site or really know what your overall plan is for this.

First, if your image is named as foliage-fp.png, then make sure your code path looks like this:

<img src="' . get_stylesheet_directory_uri()  . '/images/foliage-fp.png" alt="short description" />

Next, if you have no banner published, but you want your foliage image to show, then that path above needs to be added to the sidebar-banner.php file around line 39. This is the part of the code that says, if no banner is published, then use this. Also make sure the Show banner curve setting is checked to be seen and not disabled.

As for positioning, you will have to play around with some CSS because by default, the curve graphic is not as big as your image is, so it requires little space in height; yours requires a LOT more. The default positioning of the curve graphic is this:

#banner-curve {
    bottom: -5px;
}

But that is based on a curve image that is only 90px in height, your’s is 333px. You’re going to have to increase the bottom: -5px to something much larger, like -160px (a negative position).

But it doesn’t stop there, you need to adjust the #content padding at the top because now your new graphic is going to move down overlapping your content area. Do you will need to increase the padding-top to something large as well. Something like

#content {padding-top: 200px;}

As simple as it seems to replace the curve graphic, it’s actually a lot more complicated because of the size. However, the above should point you in the right direction.

One side note…when publishing a banner, this kind of changes the dynamics of your negative px positioning when no banner is used. So you will have to work out how to do CSS to change when a banner is published because then your banner curve container needs to have a bottom of 0

#banner-curve {
bottom: 0;
}

Then your #content container needs to be back to normal then for the top padding.

What seems simple can often become very complicated. I’m encountering that with my next theme I’m developing; I wanted to do something I thought would be easy but it turned out it was a lot more complicated…in fact, not really achievable, so I had to make some sacrifices.

Yahoo! I still need to make some of the adjustments from the rest of your instructions, but the first part gave me an “ah-ha.” I added a dummy banner image and the wave-replacement was immediately visible. You can see it in place here. I think she is going to want a skinny banner image, so having the tall wave replacement may end up taking up about the same amount of space.

I am going to leave this unresolved until I am sure I have a handle on the adjustments, but I would count this 95% of the way there. ??

Thank you!

Good to hear….now, although this topic is really outside of support and related more to customization issues, I hope to get a glowing review and stars for helping out here
??

I believe I have already given you a 5-star review from the last site, but if I have I think I can add to it ??

lol…not required. I was thinking that you did but I went looking for your username but wasn’t able to see it in any of my free theme reviews. Anyway, what is important here is to make sure your setup is working 100%.

I am picking this up where I left off, sort of…
This is a different site (which you won’t be able to view yet) and different images, but the same files and code. The first site lost it’s owner and is waiting for the right one to come along to be able to go live.

In the current site I have the home page working perfectly with a new banner and a file looking like deckle-edged paper in place of the wave. Now I have moved onto the other pages and have gotten stuck. Once again, I am getting the alt tag description but not the image standing in for the wave. The following is a link to the pastebin file for the sidebar-banner.php. I am assuming that is where my problem is but haven’t been able to spot it. Any assistance would be hugely appreciated.

Thank you