Banner Image Droplet with Foundry 3 and Alloy 3

After creating an image droplet for the purpose of replacing my banner image on the home page, I can’t seem to find the correct way to insert the droplet tag into the background stack. The background styling “mode” dropdown list doesn’t include a choice for an Alloy image droplet. It’s probably a simple oversight, but what am I missing?

I’m using Rapidweaver Classic, Foundry 3, Alloy 3, and at the top of my home page I’ve added Foundry 3 control center, Alloy 3 stack, F3 Shim, and the Droplet stack. Unless my searches are lacking, I can’t find a mention of how this is done with the new versions.

Good morning @RoyRivers

The Droplet options in Foundry 2 were simply Remote URLs with a different name. Basically duplication of controls for the sake of naming them differently. Your Droplet tags are basically insertion points for text. In the case of Image Droplets that text is a URL. You can simply use the Remote URL option for things like Images, Background, etc for your Droplet tag.

1 Like

Thank you for your quick reply. I suspected that might be the case, but when I paste in the droplet tag, {{replace-homepage-banner}} I still don’t get any results after saving and republishing.

Share your project file and droplet file with me please.

Sorry just realized you’re trying to use in the Background. That one won’t work. Droplets can’t be injected into the css file which is where Background’s image file is referenced. Been doing support from phone away from computer today as it is a holiday. Sorry I should have caught that in your original post and my original reply.

Hi-ya Adam, sorry you’re having to work on the holiday. I do appreciate your help! What other Foundry 3 stack should I use for a page banner where the image can be replaced via a droplet? I’ve tried the image stack under the navigation (not embedded in the background stack) but no results when I paste the droplet tag there either. As I still own Rapidweaver 8, Foundry 2, Alloy 2, Potion Pack and Thunder Pack, maybe I should go back to that method instead of RW Classic with Foundry 3 and Alloy 3. I’m actually trying to use Alloy 3 as a CMS in this case as this is a very small site and my client just wants the ability to change very few page elements.

Share your project file and droplet file with me please and I can take a look tomorrow. Can you let me know as well if you’re testing on a live page or just in preview mode.

Also, to answer this question directly – things like Background, or other tools that are used as banners, use a background image applied to a div. This is usually done directly in the CSS file and the PHP parser that handles Droplets has no access to that CSS file, so it cannot make substitutions there via the droplet variable tags.

Thank you again Adam. I emailed you my project and droplet files so you can access them in dropbox. I have been testing live after publishing (not in preview). I very much appreciate your explanation. I also own a copy of EasyCMS and have used it successfully on several sites in the past (it always played well with Foundry), but I immediately ran into issues with it not passing data at all with my current tools. After two installations of it I decided to try Alloys droplets in this case. I love not having to learn extensive coding, yet this kind of issue exposes all my blind spots, and lacking knowledge in what seems to be simple issues. I love RW Classic, Foundry 3, and Alloy 3 (although I seldom use a blog).

I’ll take a look at things tomorrow. It isn’t really your blind spots in this case. Promise. It is that in the past I created special inline code for allowing Droplets to provide background images. Since the inline image resides in the HTML and not the CSS file the Droplet can be parsed. I was trying to stay away from specific settings and tools for Droplets as I don’t prefer to have specialized settings for them. This hinders things for both platforms by locking things in to only one way of working. I want to leave things more open to change and evolving for possible improvements in the future. I know that’s a little vague, but the best I can do for now.

I could probably provide a bit of inline HTML & CSS to achieve what you want, but I think most users of RapidWeaver would balk at this as the procedure for this.

As I mentioned above the CSS for the background would need to reside in the HTML of the page itself for Droplets to be able to interact with it.

So let’s look at doing that. Add a Foundry HTML tool to the page. This needs to be below the Droplet tool. Inside that HTML tool add the following snippet of code:

<style>
.droplet-bkg {
	background-image:  url({{YOUR_DROPLET_TAG_GOES_HERE}}) !important;
}
</style>

You’ll see that there’s a placeholder for a Droplet tag. Rename it to match your Droplet.

Last little thing to do – go to your Background tool, scroll all the way down in its settings until you reach the Classes field at the very bottom. In that field type: droplet-bkg

Basically what this is doing is assigning the Droplet tag’s URL to the background within the HTML of the page since Droplets have no access to the CSS file.

4 Likes

Thank you SO much Adam! Not just for the code, but also for the explanation and lesson. I really appreciate you going above and beyond.

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.