Gantry 5 background image
-
-
- Dina
- Newbie
- Posts: 3
- Thanks: 0
-
Hi! I want to make the background image in Callisto as it is written in
docs.gantry.org/gantry5/advanced/customizing-theme-files
instructions. I have made changes to the files, respectively, but in the administrative panel does not have any change. For the experiment for the modified core files, without copying to catalog custom. Maybe I'm doing something wrong, tell me, please. Here are my files with the changes. And what action is still needed to solve my problem?
"section.yaml"
name: Section
description: Layout section.
type: section
form:
fields:
boxed:
type: select.selectize
label: Layout
description: Select the Layout container behavior. 'Inherit' refers to Page Settings.
isset: true
selectize:
allowEmptyOption: true
options:
'': Inherit from Page Settings
0: Fullwidth (Boxed Content)
2: Fullwidth (Flushed Content)
1: Boxed
3: Remove Container
class:
type: input.selectize
label: CSS Classes
description: Enter CSS class names.
default:
extra:
type: collection.keyvalue
label: Tag Attributes
description: Extra Tag attributes.
key_placeholder: Key (data-*, style, ...)
value_placeholder: Value
exclude:
_inherit:
type: gantry.inherit
background:
type: input.imagepicker
label: Background
"section.html.twig"
{% set tag_type = segment.subtype|default('section') %}
{% set attr_id = segment.attributes.id ?: 'g-' ~ segment.id %}
{% set attr_class = segment.attributes.class %}
{% set attr_background = segment.attributes.background %}
{% set attr_extra = '' %}
{% set boxed = segment.attributes.boxed %}
{% if boxed is not null %}
{% set boxed = boxed|trim == '' ? gantry.config.page.body.layout.sections : boxed %}
{% endif %}
{% if segment.attributes.extra %}
{% for attributes in segment.attributes.extra %}
{% for key, value in attributes %}
{% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
{% endfor %}
{% endfor %}
{% endif %}
{% set html %}
{% if segment.children %}
{% for segment in segments %}
{% include '@nucleus/layout/' ~ segment.type ~ '.html.twig' with { 'segments':segment.children } %}
{% endfor %}
{% endif %}
{% endset %}
{% if segment.attributes.sticky or html|trim %}
{% if boxed is not null and (boxed == 0 or boxed == 2) %}
{% set html %}
<div class="g-container">{{ html|raw }}</div>
{% endset %}
{% endif %}
{% set html %}
{% if boxed == 2 %}{% set attr_class = attr_class ~ ' g-flushed' %}{% endif %}
{% set attr_class = attr_class ? ' class="' ~ attr_class|trim ~ '"' %}
<{{ tag_type }} id="{{ attr_id }}"{{ attr_class|raw }}{{ attr_extra|raw }}>
{% if attr_background %}<div class="section-background" style="background-image: url({{ url(attr_background) }})">{% endif %}
{{ html|raw }}
{% if attr_background %}</div>{% endif %}
</{{ tag_type }}>
{% endset %}
{% if boxed == 1 %}
<div class="g-container">{{ html|raw }}</div>
{% else %}
{{ html|raw }}
{% endif %}
{% endif %}
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You don't need to be doing any of that just to add a background image? Just do it with CSS...
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .#g-page-surround { background-image: url("yourimageurlgoeshere"); }
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Dina
- Newbie
- Posts: 3
- Thanks: 0
-
Thank you very much for your answer. Now I need to add a background image in this topic
www.rockettheme.com/forum/gantry5-for-jo...5-background-pattern
.
But I also will come in handy solution with the addition of the field. Therefore, such a question.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You still don't need to go to those lengths to achieve this... it's way over the top to be adding that field and then having to maintain the override in line with gantry and template updates. Just do it all in custom CSS. You can add the other attributes required to make the repeating image.
#g-page-surround { background-image: url("yourimageurlgoeshere"); background-repeat: repeat; background-size: auto; }
If you are having trouble with that - post a link to your site and I can check the CSS.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.036 seconds