Area backgrounds
Permalink
I'm trying to find a solution for an area background. I've tried Layouts, but I prefer to set things up via a template file.
If I want to set up three backgrounds on an area, what would be the best way to achieve that? A custom style won't work, because it has only 1 file selector. Multiple background are quite common, and when working with responsive websites it's often needed to have different images for each breakpoint. Sprites could be a solution, but they are not super user friendly.
I've now found a work around by adding additional areas e.g. 'Background - Mobile' with an image block. I made an override of Area to retrieve the first block and it image to retrieve the img src. This approach is far from ideal.
It'd be interesting if you's simply add actions to the area popup menu. (if you click on an area you can add blocks, add layouts, etc.) If it were possible to add options like 'Add Mobile Background', 'Add Desktop Background', etc. That would make things quite flexible. (concrete/elements/block_area_footer.php doesn't look quite flexible btw).
Has anyone ever tried such a thing, or maybe you have a better solution?
To put it more generally: can we attach attributes to an Area? (I know it can be done for stacks, but those are not ideal when blocks are only used once throughout a website.)
If I want to set up three backgrounds on an area, what would be the best way to achieve that? A custom style won't work, because it has only 1 file selector. Multiple background are quite common, and when working with responsive websites it's often needed to have different images for each breakpoint. Sprites could be a solution, but they are not super user friendly.
I've now found a work around by adding additional areas e.g. 'Background - Mobile' with an image block. I made an override of Area to retrieve the first block and it image to retrieve the img src. This approach is far from ideal.
It'd be interesting if you's simply add actions to the area popup menu. (if you click on an area you can add blocks, add layouts, etc.) If it were possible to add options like 'Add Mobile Background', 'Add Desktop Background', etc. That would make things quite flexible. (concrete/elements/block_area_footer.php doesn't look quite flexible btw).
Has anyone ever tried such a thing, or maybe you have a better solution?
To put it more generally: can we attach attributes to an Area? (I know it can be done for stacks, but those are not ideal when blocks are only used once throughout a website.)
Hi A3020,
Are you trying to make something that works for any area or a specific area?
If it is a specific area, then I would recommend using page attributes.
You could create three image/file attributes named by breakpoint. In your page template, you would get the image path for each attribute. Using the image path, you could create a <style> tag with the CSS for the backgrounds and media queries for switching them.
I imagine there is a way to use the existing mechanism used for adding a single area background , but instead using it to set multiple backgrounds. An approach like this would likely need a way to manually enter breakpoints.
Are you trying to make something that works for any area or a specific area?
If it is a specific area, then I would recommend using page attributes.
You could create three image/file attributes named by breakpoint. In your page template, you would get the image path for each attribute. Using the image path, you could create a <style> tag with the CSS for the backgrounds and media queries for switching them.
I imagine there is a way to use the existing mechanism used for adding a single area background , but instead using it to set multiple backgrounds. An approach like this would likely need a way to manually enter breakpoints.
Let's take the front page ofhttp://www.concrete5.org as an example. It currently contains 7 content rows.
Let's say we have the following requirements:
- Number of rows should be scalable (could be 2, could be 10).
- Rows, containers, areas (or whatever we call them) can have a background image.
- The background image should be configurable per breakpoint to reduce load times and improve look and feel (text could be longer, thus image may need to be vertically oriented).
Possible solutions:
1. Page attributes. Not suitable, because not scalable and it becomes hacky.
2. Layout backgrounds. Not possible to upload multiple backgrounds for various breakpoints.
3. Adding blocks within areas. Not intuitive for end user. Hacky code.
I'm curious how other front-end web designers would solve this problem in an elegant way.
Let's say we have the following requirements:
- Number of rows should be scalable (could be 2, could be 10).
- Rows, containers, areas (or whatever we call them) can have a background image.
- The background image should be configurable per breakpoint to reduce load times and improve look and feel (text could be longer, thus image may need to be vertically oriented).
Possible solutions:
1. Page attributes. Not suitable, because not scalable and it becomes hacky.
2. Layout backgrounds. Not possible to upload multiple backgrounds for various breakpoints.
3. Adding blocks within areas. Not intuitive for end user. Hacky code.
I'm curious how other front-end web designers would solve this problem in an elegant way.
How I will do it is (still working with 5.6) using the plugin "designer content" and create a custom block.
Then I will download the block and change the code. (Place extra php of classes to suit my needs.) In this way I can create multiple kind of block rows that can be placed, edited and changed position by the user.
Then I will download the block and change the code. (Place extra php of classes to suit my needs.) In this way I can create multiple kind of block rows that can be placed, edited and changed position by the user.
https://www.concrete5.org/marketplace/addons/mrkdilkington-full-scre...
I'm currently trying to write a block that allows a background image to be applied to the <header> only. If you can identify the relevant DIV, you can hang your background off it. To support both an image and a tint overlay, I've had to insert an extra DIV, but that seems to work okay.
Aknowledgement: MrKDilkington