Parallax widget not displaying background images in child theme

Shapely
1

I’m currently working on a child theme of Shapely and wanted to create a page template that would also be compatible with the homepage widgets. I created the new page template, created a new widget area, and called it in my page template.

I’ve got everything working except any images uploaded to the shapely parallax widget in this new widgetized area will not show up on the page when using the background-small or background large settings. It works just fine when displaying the image to the top, bottom, left or right.

If I inspect the element the data-src is pointing to the correct image and that path is valid, but no image displays on the page. Is there some additional scripts I need to enqueue to my child theme’s functions.php file?

I am working on this via a local wordpress install and there isn’t anywhere I can upload it live.

2

Good news! I figured it out myself. I will include the solution here for any other interested parties:

The issue was the parallax script was only being loaded on the home page, since according to Shapely’s parent theme needs, that’s the only page that will be housing the parallax widgets. Therefore we need to enqueue this javascript file for any additional page template that will be needing them in our child theme’s functions.php file.

I opened up Shapely’s functions.php file and browsed around until I found the lines that enqueue the javascript file that enables the parallax functionality and copied it over to my child theme’s functions.php file inside the function that enqueues the parent theme’s styles. From there, I changed the name of the page template to the name of the custom page template I had created, and also modified the name from shapely-scripts to load-shapely-scripts.

Then I saved, refreshed and the background images were working. I even double checked the homepage to make sure I didn’t destroy anything there, also perfectly in tact.

See my attachments for specifics.

3

THANK YOU SO MUCH. I have been struggling for WEEKS with the same exact issue and this fixed it!!!

4

@webliz
thanks, that was the chunk of information that I needed. Parallax effect is now showing fine on additional templates using image position ‘background full’ and ‘background small’. The only thing that is not working yet: these two image positions do not show up in the customizer view but only in the published website. Did you have that issue as well? And if yes, did you find a solution to it?