Hello. This is my first venture into the support forums for Foundry (I miss the old days of contacting the developer for help so here we are).
I have bought Foundry and the Potion Pack and started with a simple one-page project. On this project I have placed the logo over an image inside a Banner stack.
Banner > Margins > Image
The logo file is sized to work great on laptops/desktops and tablets but too big for mobile so I would rather not send this large version to the browser for mobiles - ensuring fast load times for mobiles. So I was looking at the ‘Responsive’ options (Hide on Mobile, Tablet 0r Desktop) but I’m guessing that the image would be hidden (by CSS) but still sent to the browser?
There is the option “Don’t publish this stack” but that confuses me. Why would someone not want to publish a stack? I thought that was “Don’t publish it to devices for which it is set to hide” but that’s not the case.
So I am confused by that. Why would someone go to the trouble of adding a stack to a page and then click “don’t publish this stack” except for devices it is too big for etc?
Is there a way I can publish a page that has 2 versions of the same stack but one with a smaller image in for mobiles, hide one version on tablets and desktops and hide the other on mobiles and not have both versions of the image sent to all browsers on all devices?
Good morning @martinkos – hope you had a nice weekend
I answer email from customers every single day. You’re not limited to asking questions here on the forum. You can go to the Elixir site and submit a support email there any time you like.
I do encourage people to use the forum though as their question and the resulting replies might help others in the future as well. This means your post has the potential to reach others who might have a problem as well. It also allows others with a different frame of reference to reply and share their knowledge as well.
With that said…
Yes, options such as the Visibility stack only hide or show content based on the breakpoint. The content still exists and is just made visible, or hidden, using CSS. This is generally used for different content, not like content, as in your example.
In your example it would be better to simply optimize the one image instead of using two different images showing the same graphic but at different sizes.
Pro Tip: This is off topic, sort of, but I’d recommit https://tinypng.com for compressing PNGs and JPGs for your site.
This is so you could work up new content on a page for later publishing ahead of time. You’d still be able to publish your current page, all while keeping that new content for later. Note this is just one use case.
Honestly you’re best off using an image that displays at its largest size and optimizing it using compression software (like I mentioned above). This means you’re only loading one image on the page and you’re doing you due diligence to optimize its size and thus loading time.