CODEWITHSUNDEEP
javascriptsymfonytwig
alisdairv
alisdairv

Reputation: 92

Style/scripts for included blocks

Ok, I'm not sure if I've missed a trick here. But I can't find anything in the docs or online with the solution. Basically I'm trying to include a big block of javascript with a template block but same goes for styles. I have template structure summarised:

{# base.html.twig %}
<html>
  <head>
    <title>{% block title %}Base template{% endblock %}</title>
    {% block stylesheets %}
      <link rel="stylesheet" href="{{ asset('bundles/thisBundle/css/theme.css') }}" type="text/css" media="all" />
    {% endblock %}
    {% block scripts %}{% endblock %}
  <head>
  <body>
    {% block content %}hello from base{% endblock %}
    {% block javascripts %}
    {% endblock %}
  </body>
</html>

{# index.html.twig #}
{% extends 'base.html.twig %}
{% block content %}
  {% include 'ThisBundleBundle::templatewithascript.html.twig' %}
  <p>Some content here<p>
  {% include 'ThisBundleBundle::anothertemplatewithascript.html.twig' %}
{% endblock %}

Now here's my problem. From this template I would like to add to the content of the javascripts/stylesheets block but my include is within the content block and I can't extend index.html.twig in templatewithascript.html.twig, basically I want this to work:

{# templatewithascript.html.twig #}
{% block stylesheets %}
  <link href="{{ asset('bundles/thisBundle/css/blockspecificstyle.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}
{% block body %}
  <p>Click here and something happens</p>
{% endblock %}
{% block javascripts %}
  <script type="text/javascript">
    $(document).ready(function(){
      $("p").click(function(){
        $(this).hide();
      });
    });
  </script>
{% endblock %}

Or is this just a limitation and I have to include the style/scripts in the template that includes the content? Thanks. Lu

Upvotes: 0

Views: 4158

Answers (2)

alisdairv
alisdairv

Reputation: 92

ok, answering my own question!

Importing macros is the answer I've come up with; ie:

{# index.html.twig #}
{% extends 'base.html.twig' %}
{% import 'ThisBundleBundle::templatewithascript.html.twig' as importedTemplate %}
{% block content %}
  {{ importedTemplate.content }}
{% endblock %}
{% block javascripts %}
  {{ importedTemplate.js }}
{% endblock %}

{# templatewithascript.html.twig #}
{% macro content %}
  <p>Click here and something happens</p>
{% endmacro %}
{% macro js %}
  <script type="text/javascript">
    $(document).ready(function(){
      $("p").click(function(){
        $(this).hide();
      });
    });
  </script>
{% endmacro %}

It seems to work, but not sure if I'm bending the rules a bit to get there.

And it also seems like there should be an easier way that allows me to do all this work from within templatewithascript.html.twig?

Upvotes: 1

solarc
solarc

Reputation: 5738

What you could do is turn index.html.twig into another extendable template, extend it from templatewithascript.html.twig and render that from your controller:

{# templatewithascript.html.twig #}
{% extends 'ThisBundleBundle::index.html.twig' %}
...


{# index.html.twig #}
{% extends 'base.html.twig %}
{% block content %}
  {% block body %}{% endblock body %}
{% endblock content %}

Upvotes: 0

Related Questions