Is there a way to change 'src' to 'data-spai-src' automatically

General Web Design
#1

I am looking at using a CDN to improve the speed images are served, etc, and the one I am looking at requires me to change all the src references to data-spai-src.

So for example:

<img class=“aligncenter” src=“https://shortpixel.com/img/robot_lookleft_wink.png” alt=“robo winks” width=“600” height=“933” />

Would have to change it to:

<img class=“aligncenter” data-spai-src=“https://shortpixel.com/img/robot_lookleft_wink.png” alt=“robo winks” width=“600” height=“933” />

Is it possible to do this in Rapidweaver?

#2

It’s an option in the Source Image stacks if you happen to be using Source.

image

I don’t know of any other image stacks that offer this. Easy enough just to add the required html in the HTML stack in any case.

2 Likes
#3

Just checked out Source. It looks very cool indeed. Does it work well with Foundations and Total CMS?

Shame none of the other image stacks I am using have that Prefix setting.

1 Like
#4

No.

Yes.

#5

Darn. All my sites use Foundations. Without Foundations I’d have to go back to using a pre-made template, right?

Big shame as Source looks very comprehensive and cohesive.

#6

Foundation is one of a number of framework options.

You can just put your required code for the image in the default HTML stack. Just like you pasted above. You would just need to know the url/path to your image to include in the code.

#7

Which frameworks does Source work with just so I know? I like Foundation, but always open to change.

Problem with editing the html is it would mean going through every image stack on my site, of which there are many, and deleting them and then adding an html stack and editing that. Lots of work :-( I was hoping there might be some clever hack to just magically change them all to be data-spai-src and not just src.

#8

It is a framework itself and so doesn’t / won’t work with any of the others available.

No - you won’t find that magic inside rapidweaver. You could potentially do a find and replace in the exported html file but they would be overwritten the next time you published the page.

#9

Really? So I could replace Foundation with Source? That sounds exciting, apart from I have just bought an upgrade to Foundation 6, although am yet to install or use it.

So you can design the whole layout of a site with Source? Amazing.

#10

You sure can. It doesn’t come with things like a slider stack or a gallery stack but there are great third-party stacks for that (which are generally better / more flexible than the ones that are built into frameworks)

#11

I’m sold. Once I have a free weekend I am going to dive in. I do have lots of other stacks and tend to replace a lot of those from Foundation with my own favorites anyway, so sounds like it would work for me. So glad you told me about it.

2 Likes
#12

Going from Foundation to Source is a simple transition in my experience of having done it many times. You really only need to learn about 7 Source stacks and you will see a big speed up in Edit and Preview times as you go.

#13

Thanks for that input Gary. I am going to make it one of my ‘over-Christmas’ tasks (if not before). I do like Foundation, and Joe Workman does a great job of supporting it, but there is a LOT of overhead with it that I don’t touch, and without wanting to criticize Foundation at all there are, as @habitualshaker says, other stacks that do some of the individual components of Foundation better.

Looking forward to having a play :-)

1 Like