Developer forum

Forum » Rapido » App with full-width background-image

App with full-width background-image

Mafalda Correa
Mafalda Correa
Reply

Hello,

I wanted to have a full-width background image with a search box in the middle (as below). To achieve this I had to:

1. 'Allow module attachment' on the Paragraph Container item type

2. Create the Paragraph Container and attach the App to it, as well as using the styles I wanted (full-width, background-image, height,etc)

3. Add a blank paragragh so that the App is rendered (it won't render if there's no paragraph)

3.1 When I tried to create more paragraphs in the Paragraph Container, the App repeated for as many paragraphs as I had, instead of attaching only to one.

Is there an easier way to achieve this? All I wanted was to be able to use an App and give it a full-width background image.

This could be solved by having full-width normal paragraphs or even more useful to be able to add modules to paragraph containers the same way we add paragraphs.

Regards


Replies

 
Karsten Thuen Dynamicweb Employee
Karsten Thuen
Reply

Hi Mafalda

Thank you for the question. I can see that you have already put a lot of thought into the possibilities. 

Your current setup where the module is weirdly inserted
I have created bug #67702 to investigate why this happens. The reason why we do not have modules enabled by default on the paragraph container, is that, no matter what it will make the concept of having paragraphs inside the container much harder to grasp for the users. At the same time the feature may only be needed in very special cases.

But we can make your setup better supported. What I can do, is try to simply make the module render in a 12 width column on the paragraph container by default. 

Full width on normal paragraphs
The main reason why this is not supported, is that you would then need some kind of new container where the content inside the paragraph should be placed. In your design, for example, the content should be senter aligned an float with the rest of the page. It will also introduce new problems, like how should it render if the paragraph is inside a paragraph container and is set to use full width?

Alternatives
The most sleek solution to this problem I have seen, is to render an external paragraph where we need a module when it is not normally possible. You can see how the concept if you look at a DynamicArticle through content in the backend, there is a section called "Call to action". Here you will find a field "CTA paragraph link". Here you can select a simple paragraph that renders a module. It should be quite easy to simply add a similiar field on the Paragraph item time, and then add the small change to the Paragraph template.

A very hard thing while trying to make the best Rapido as possible, is to both give you a simple and intuitive interface while still giving you all the features that you need. Too many features may make the interface hard to use. Especially if a feature is complex in nature. And this is the reason why the paragraph item type does not do this by default.  
 


Best regards
Karsten Thuen 

 
Mafalda Correa
Mafalda Correa
Reply

I see how setting the paragraph to full-width can cause a lot of issues. Would it possible to just have the option of a full-width background image instead? Whenever we want to make a normal paragraph with a full-width background image, we always have to create a Paragraph Container with a single paragraph inside it. But I suppose it would still cause the same sort of issues when rendering inside a Paragraph Container.

I looked into the alternative you suggested and while it's a good way to do it, it requires customizations to the Item Type and the Rapido templates, which we like to avoid doing.

I understand the struggle of wanting to have all the posible features in Rapido while at the same time not making it overly complicated, but I think having a full width image with a paragraph/module on top of it is a rather common request and should be supported out of the box in Rapido.

 

You must be logged in to post in the forum