Paste Linked Pondering

Ideas
1

I’ve come across this on a few of my clients sites now and thankfully only one of them has more than 30 pages, but the rest go between 10 and 25 so it’s still a lot of pages to do piecework. Here’s my dilemma:

In my current project there will be 16 pages. All but 2 will have the same exact header background. All of the rest of the Header including Nav will be exactly the same for all pages.
The client intends to change her heading backgrounds with the seasons (all but the 2 that will be different and remain the same always).

I’ve been wracking my brains trying to find a way to Use the Component Linking system to no avail. Today I thought I had figured out a way, by trying to copy just the Header part since the background image is on the Container that it’s all within. Thinking that even though the header on the one page was linked by parental layers (meaning components inside were all linked because the Container was linked), I figured if I just copied the next layer within (the Header) I should be able to Paste Linked that part … but nope it wouldn’t let me do it.

I really love the Linked Components feature, I use it for every site, but this situation calls for something a little different. Granted yes, I can Link all from the Header in and not link the Container itself, but then I have to manually change the backgrounds on 16 or more pages every season which to me seems like there should be another way around this.

Any ideas here would be appreciated. I’m thinking the Container situation is what I’m going to be stuck doing, but maybe there’s something I’m unaware of or that can be done to facilitate these types of situations?

2

Could you not just unlink the 2 you dont want to change?

3

Well ya, but as I said everything else in the Header is the same and will be for all pages so it’s like this:

<container>  <-- Background image is in here, this will change for all pages except 2, seasonally.
    <header>
        <all the content of the header such as the Logo, Subheading and little embellishments>
    </header>
</container>

Header section will be the same on all pages, but the “container div” itself is what will change. As the app is now, if you make a Component Link to anything, everything inside it is also automatically linked.

Right now I’ve gone in and just did the Component Link to the section and will have to edit all the background images manually. Not horrible, but seems it could be more productive than this is all.

4

What about adding a class with the background image you want to change then use it on the containers you want to change. You’d have to unlink the 2 you don’t want to change.

<container class = "new-background-img">  <-- Background image is in here, this will change for all pages except 2 (unlink the 2 pages you don't want to change), seasonally.
    <header>
        <all the content of the header such as the Logo, Subheading and little embellishments>
    </header>
</container>
5

You could also be a bit clever and use some javascript/jquery to change the background automatically depending on what month it is. if you can’t write the js yourself then Kuligaposten would be your man for that.

6

Actually you gave me an even easier way to do it. I had tried something similar to your idea on another client’s site. Thankfully their site doesn’t change at all, just has a different background for every menu section so any dropdowns inherit the parent’s background image. Works pretty nice since I didn’t have to change it after, and am grateful as that site has almost 40 pages lol.

My new idea right now is to just swap the image name on the image itself. In other words, I’ll set up the HTML similar to what you have, but the image name will never change in the HTML.

I think what I’ll do instead is just change the image name on the image itself so that it will update all pages at the same time. Basically name it current-season.jpg and then each time the season changes, I’ll rename the one that was being used back to it’s season name, and change the new season’s image to current-season.jpg and it will be done for all pages that change season? Sounds like it should work pretty slick and all it will be is renaming two images.

7

There’s more than one way to skin a cat as the old saying goes. That sounds like it will work but I think you’d still have to unlink the 2 you don’t want to change.

8

Oh ya, definitely would need to do that since they don’t need to change at all (well at least so she says LOL)

9

I’ve just tried your way and it works but tis a bit of a long way about it with the find and replace. Would it not be easier if you have a class then change the image in the class?

.my-background {
  background: url("myImage.webp") center / auto repeat;
}
10

Yeah I like that idea better than what I was thinking, but I also think you misunderstood. What I would have done was:

All page headers with the images that will be changing with seasons are linked. Those that don’t change are not.

Create the css class for the background and I would call the like this:

.current-season-header {
  background: url("current-season.jpg") no-repeat;
  background-size: cover;
}

That code would not change ever.

Now I would have 4 images, 1 for each season named winter.jpg, summer.jpg, spring.jpg and fall.jpg
From here I would rename whichever season’s image it is to current-season.jpg
Now next season I would rename the one that is current-season.jpg back to it’s own season name
Then rename the current season image to current-season.jpg
That’s it, won’t need to change any code anywhere at all, the code would stay the same, the image names would be altered instead.

But, I’m going about this back asswards lol, and your idea is the more proper one

But in the end I still end up with if the client wants to change anything other than the image in the header, I will have to manually do those 2+ pages because they aren’t linked … which truly is what I was trying to work around lol. I’ll go with your idea, which should have been the first one I thought of … not a work day today I think LOL.

11

For the 2 pages you could delete the container on one page then copy it back in as linked from the other page so only they 2 have that container

12

I’m no code writer so this is maybe long winded for the code but it changes the background depending on what month it is. You’d grab your container ID with the querySelector and have 4 classes for the seasons

const month = new Date();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";

const d = new Date();
let currentMonth = month[d.getMonth()];
const bg = document.querySelector("yourContainerId");

if (
    currentMonth === "January" ||
    currentMonth === "February" ||
    currentMonth === "March"
) {
    bg.classList.remove("autumn");
    bg.classList.add("winter");
} else if (
    currentMonth === "April" ||
    currentMonth === "May" ||
    currentMonth === "June"
) {
    bg.classList.remove("winter");
    bg.classList.add("spring");
} else if (
    currentMonth === "July" ||
    currentMonth === "August" ||
    currentMonth === "September"
) {
    bg.classList.remove("spring");
    bg.classList.add("summer");
} else {
    bg.classList.remove("summer");
    bg.classList.add("autumn");
}
1 Like
13

That’s a slick piece of code there too @floydmanfloyd . I’m not a coder either so I’ll play around with it a bit in case I can use it for this or other things.

In the end it was so simple that I couldn’t imagine why it even gave me a headache figuring this situation out.

I did exactly what you said to do earlier, created a class and will just change the image in that class each season. By doing this I was able to then just use the Header section for the Linked Component for all pages, and only the Container is used for the image changing and that’s it. I was all worried for nothing! Thanks for setting me straight on that path which somehow eluded me (hence why I took most of today off LOL.

Thanks all, I think between what I have it as now and the 2 code systems that you have provided to me I’m pretty sure it’s all set to go. Thanks again as always!

14

:ok_hand: Glad you got it sorted.

15

@jo-r You could add the image through the code if that would be easier

if (
    currentMonth === "January" ||
    currentMonth === "February" ||
    currentMonth === "March"
) {
    bg.style.backgroundImage = "url('lg/classical-guitar.webp') center / cover no-repeat";
}