How to change a single ad image for multiple pages at once?

I have a squarespace 7.0 blog.

I want to place an ad on most blog posts. A plain image with a clickthrough would be enough, I'm just linking to my own product.

However, I also want to change the image sometimes. Let's say I want to add an "ON SALE" sticker or advertise a different product.

Changing dozens/hundreds of pages individually won't work, so is there a solution with minimal code that allows me to change the ad image for many pages at once on Squarespace?

You mean

You use an image

You place it on many pages

Now, you want, when change image to another image, it will change on all pages

Is that right?

Yes, that's correct. Is there a good way to do this?

Last night I just resolved a similar case. They have a list of author links, they need to insert it into multiple team people pages, and they need a way to change the link on only 1 page, and all will change at the same time.

My solution is to insert a list of links in Code Injection, then use some code, and insert a line of Code Block into the team people pages. All will be updated.

With your case, I also use same approach.

Can you share link to a page where you added an ad image? I can imagine your layout easier.

Okay, so the single code injection says "Here's an image URL", pointing to an image hosted by Squarespace, and the various code blocks all say "Here's an ad, use the URL in the injection for the image"?

I don't have any ads up yet, but the URL is parempimina.fi and the layout on blog posts will be as basic as it gets:

• Bunch of text
• IMG AD
• Bunch of text

The code injection simply added the image into the footer of the website.

What if there is no Step #2 on any particular page?

I forgot CSS code, add this code to Custom CSS

/* hide ads image */
.image-ads {
	display: none;
}
/* show ads image in Code Block */
.code-block .image-ads {
		display: block !important;
	}

You need to do both steps, if you do #1 only, the images will disappear after use CSS code

This worked, awesome!

Not only did it work perfectly, but it's actually BETTER than adding an image via Squarespace, since the DIV code block stays and scales within the text block width without needing spacers (I never understood why that's a thing in 7.0 templates).

So in the future I can adjust the system to have multiple codes for different types of ad. All blog posts on topic #1 get ad #1, topic #2 is shown ad #2, and so on.

Excellent, thank you so much! You're a treasure. =)

Actually, this doesn't seem to be working quite right.

On desktop, the ad doesn't show up if I return to a blog post I've already seen once. I have to refresh to get the ad to show.

On mobile, it's the opposite - the first view of a blog post doesn't load the ad, but a refresh does.

Since most people are on mobile, this means most readers aren't seeing the ad at all, which is a bit of a problem.

Any ideas why this might be happening? I'm stumped from the start.

URL was parempimina.fi and click any new blog post.

Quote

Any ideas why this might be happening? I'm stumped from the start.

I'm thinking the curse of Ajax Loading strikes again! Try, temporarily, turning off Ajax Loading to see if the problem goes away.

Please note that turning off Ajax Loading will effect the performance of your site. Ajax Loading is designed to increase the loading speed of your site after it first loads.

If the problem goes away then it is likely the code has not been written to be Ajax compatible. It would need to be rewritten to be Ajax compatible, assuming it it even possible.

You have to decide whether the custom code you are trying to use is worth turning off Ajax Loading. Or, it is worth trying to get an Ajax compatible version of the code.

@paul2009 has a great article on the ins and outs of Ajax Loading. Please see Why does Squarespace code only work on refresh?

The other option is to try to adapt the code to work for v7.0.

Just reading that first link: "If your template uses Ajax loading, some elements, such as the header and footer, won’t need to load each time you visit a page."

Since the code is in the footer, this certainly sounds like the culprit.

Tried it and that fixed it!

This also explains why code that inverts the logo colours on certain pages wouldn't work properly in the header without a refresh. I guess I can move that code back from a regular code block to the header now.

I don't benefit a great deal from Ajax anyway, since my site is pretty minimalist and fast to load. (Except for the Farro-style blog landing page, which will apparently always use Ajax regardless of settings.)

Thank you very much. =)