eZ Platform Discussions

[Assetic] + [Design]


#1

Bonjour,

I have a multisite composed of 5 sites where the design inherits a default design.

In fact, my 5 sites are just some swap-colors of the default design.

At first I did something horrible.

        {% stylesheets
            'bundles/my/lib/lightbox/css/lightbox.min.css'
            'bundles/my/css/*'
            filter='cssrewrite' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/my/css/site/' ~ ezpublish.siteaccess.name ~ '.css' ) }}">

Horrible certainty. But it works.

Only here are the integration teams arriving.

Is they want to use SASS.

        {% stylesheets
            'bundles/my/scss/site/' ~ ezpublish.siteaccess.name ~ '.scss'
            'bundles/my/scss/*.scss'
            filter='scssphp' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}

And it seems that this “hack” with the name of the siteaccess doesn’t work if you put it in {% stylesheets %}

Attempted to call an undefined method named “getFilename” of class “Twig_TokenStream”.

So I think it’s time to get serious and use DESIGN.
https://doc.ezplatform.com/en/2.1/guide/design_engine/

But I don’t see how to do that…


#2

asset() twig function with "ezdesign" does not seem reliable to me…

{{ asset("iwriteanything/swapcolor.css", "ezdesign") }} {# > /iwriteanything/swapcolor.css #}

#3

With @alongosz 's help I finally found a temporary solution to this problem.

/src/MyBundle/Resources/views/themes/site_1_theme/parts/styles.html.twig

    {% stylesheets 'bundles/edbpressepro3/scss/site/site_1.scss' filter='scssphp,cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

/src/MyBundle/Resources/views/themes/site_2_theme/parts/styles.html.twig

    {% stylesheets 'bundles/edbpressepro3/scss/site/site_2.scss' filter='scssphp,cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

/src/MyBundle/Resources/views/pagelayout.html.twig

    {% block stylesheets %}
    {{ include("@ezdesign/parts/styles.html.twig") }}{# Use Design to select the template depending on siteaccess #}
    {% endblock %}

ezplatform.yml

ezpublish:
  system:
    site_1:
        design: site_1_design
    site_2:
        design: site_2_design
ezdesign:
    design_list:
        site_1_design : [site_1_theme, site_theme]
        site_2_design : [site_2_theme, site_theme]

It’s a little silly as a solution, but it works…

Now I have a very similar problem with images…
(But it’s not about the themes this time.)

{% for social_network in ['twitter', 'facebook', 'linkedin', 'rss'] %}

  {% image "@MyBundle/Resources/public/images/pictos/twitter-white.svg" %}
    <img src="{{ asset_url }}" alt="" />
  {% endimage %}
  {# OK #}

  <img src="{{ asset( '@MyBundle/Resources/public/images/pictos/' ~ social_network ~ '-white.svg') }}"/>
  {# > /@MyBundle/Resources/public/images/pictos/twitter-white.svg #}

  {{ asset( 'images/pictos/' ~ social_network ~ '-white.svg') }}
  {# > /images/pictos/twitter-white.svg #}

  {% image "@MyBundle/Resources/public/images/pictos/"~social_network~"-white.svg" %}
    <img src="{{ asset_url }}" alt="" />
  {% endimage %}
  {# > Attempted to call an undefined method named "getFilename" of class "Twig_TokenStream". #}

{% endif %}

#4

I better understand how assetic works
But these syntaxes should work…

{{ asset( '@MyBundle/Resources/public/images/pictos/' ~ social_network ~ '-white.svg') }}
{{ asset( 'images/pictos/' ~ social_network ~ '-white.svg') }}

#5

All right. For my images I’ll just use this:
It’s simple, it works…

{% for social_network in ['twitter', 'facebook', 'linkedin', 'rss'] %}
    <img src="/bundles/my/images/pictos/{{ social_network }}-white.svg" alt="{{ social_network }} logo" />
{% endfor %}

It doesn’t go through assetics… But what would be the added value?