Heya,

Screenshot of bug

I'm using Foundation Interchange (https://foundation.zurb.com/sites/docs/interchange.html) in combination with the following code in my page's layout:

    {variable tab="Hero Banner" name="hero_xsmall" label="Background Image (phone < 480px; fallback if no other size present)" type="mediafinder"}{/variable}
    {variable tab="Hero Banner" name="hero_small" label="Background Image (phablet 480px ~ 767px)" type="mediafinder"}{/variable}
    {variable tab="Hero Banner" name="hero_medium" label="Background Image (tablet 768px ~ 1023px)" type="mediafinder"}{/variable}
    {variable tab="Hero Banner" name="hero_large" label="Background Image (netbook 1024px ~ 1399px)" type="mediafinder"}{/variable}
    {variable tab="Hero Banner" name="hero_xlarge" label="Background Image (laptop 1400px ~ 1799px)" type="mediafinder"}{/variable}
    {variable tab="Hero Banner" name="hero_xxlarge" label="Background Image (desktop > 1800px)" type="mediafinder"}{/variable}

    <section id="hero"
             {% if hero_xsmall is defined %}
             data-interchange='
                     {% if hero_xsmall is defined %}    ["{{ hero_xsmall|media }}", xsmall],  {% endif %}
                     {% if hero_small is defined %}     ["{{ hero_small|media }}", small],    {% endif %}
                     {% if hero_medium is defined %}    ["{{ hero_medium|media }}", medium],  {% endif %}
                     {% if hero_large is defined %}     ["{{ hero_large|media }}", large],    {% endif %}
                     {% if hero_xlarge is defined %}    ["{{ hero_xlarge|media }}", xlarge],  {% endif %}
                     {% if hero_xxlarge is defined %}   ["{{ hero_xxlarge|media }}", xxlarge] {% endif %}'
             {% endif %}
             class="grid-x align-bottom">
    ...
    </section>

The code works perfectly fine on the website itself.

It only breaks when visiting the static page generated by the plugin (I also tried opening the generated page without the iframe, with the same result).

It stops breaking once I remove the quotes encapsulating the respective media twig elements (but that will break the website when the customer uploads an image containing whitespaces in their names...).

The full request is http://dockerhost/backend/frozendo/pagepreview/preview/static-page/%22/storage/app/media/%22. It seems that something is wrong with the way the plugin generates/handles relative links. If it helps any, I tried switching the double quotes for single quotes, which caused the XHRs to request ' instead of %22.

Sorry to bother you with this - thanks in advance for your help!

-Harti

Hi,

I don't see why this wouldn't work. What is your October CMS build version ? What if you invert quotes and double quotes in your section ? (data-interchange="...['{{ hero_xsmall|media }}', xsmall]...">)

Can you give me the source code of the page loaded in the iframe please (the section data-interchange part) ?

frozendo said:

Hi,

I don't see why this wouldn't work. What is your October CMS build version ? What if you invert quotes and double quotes in your section ? (data-interchange="...['{{ hero_xsmall|media }}', xsmall]...">)

Same result, with the XHR requesting ' instead of %22, like I stated in the original post.

Can you give me the source code of the page loaded in the iframe please (the section data-interchange part) ?

This is how it comes out in the HTML (maybe the formatting is an issue too, idk)

 <section id="hero"
                     data-interchange="
                         ['/storage/app/media/cropped-images/gasteiger-170-1-326-616-1518979611.jpg', xsmall],                            ['/storage/app/media/cropped-images/gasteiger-150-1-520-616-1518979664.jpg', small],                             ['/storage/app/media/cropped-images/gasteiger-0-0-1012-617-1518979541.jpg', medium],                            ['/storage/app/media/cropped-images/gasteiger-0-0-1247-614-1518979521.jpg', large],                             ['/storage/app/media/cropped-images/gasteiger-0-0-1429-615-1518979500.jpg', xlarge],                       "
                     class="grid-x align-bottom">
                <div class="cell">
                    <div class="grid-container">
                        <div class="grid-x align-bottom">
                            <div class="cell" id="teaser">

                                                                <div class="line">Lorem Ipsum</div>
                                                            </div>
                        </div>
                    </div>
                </div>
            </section>

Last updated 6 years ago

I've tested with the octobercms theme "Blank Foundation 6" and downloaded the complete Foundation 6 code (js and css).

It works very well if I remove the quotes, even if the file name contains whitespaces. The image is automatically changed if I change the media size in the toolbar of the preview.

I changed section with img in order to see something (maybe due to my foundation configuration).

My layout code :

{variable tab="Hero Banner" name="hero_xsmall" label="Background Image (phone < 480px; fallback if no other size present)" type="mediafinder"}{/variable}
{variable tab="Hero Banner" name="hero_small" label="Background Image (phablet 480px ~ 767px)" type="mediafinder"}{/variable}
{variable tab="Hero Banner" name="hero_medium" label="Background Image (tablet 768px ~ 1023px)" type="mediafinder"}{/variable}
{variable tab="Hero Banner" name="hero_large" label="Background Image (netbook 1024px ~ 1399px)" type="mediafinder"}{/variable}
{variable tab="Hero Banner" name="hero_xlarge" label="Background Image (laptop 1400px ~ 1799px)" type="mediafinder"}{/variable}
{variable tab="Hero Banner" name="hero_xxlarge" label="Background Image (desktop > 1800px)" type="mediafinder"}{/variable}

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ this.page.title }}</title>
        {% styles %}
        <link href="{{ [
            'assets/css/app.css',
            'assets/css/foundation.min.css'
        ]|theme }}" rel="stylesheet">
    </head>
    <body class="page-{{ this.page.id }}">
        <img id="hero"
                 {% if hero_xsmall is defined %}
                 data-interchange="
                         {% if hero_xsmall is defined %}    [{{ hero_xsmall|media }}, xsmall],  {% endif %}
                         {% if hero_small is defined %}     [{{ hero_small|media }}, small],    {% endif %}
                         {% if hero_medium is defined %}    [{{ hero_medium|media }}, medium],  {% endif %}
                         {% if hero_large is defined %}     [{{ hero_large|media }}, large],    {% endif %}
                         {% if hero_xlarge is defined %}    [{{ hero_xlarge|media }}, xlarge],  {% endif %}
                         {% if hero_xxlarge is defined %}   [{{ hero_xxlarge|media }}, xxlarge] {% endif %}"
                 {% endif %}>

        <div class="row">
            <div class="large-12 columns">
                {% component 'staticPage' %}
            </div>
        </div>

        <script src="{{ [
            'assets/js/vendor/jquery.js',
            'assets/js/vendor/what-input.js',
            'assets/js/vendor/foundation.min.js',

            '@framework',
            '@framework.extras',

            'assets/js/app.js']|theme }}"></script>

        {% scripts %}
    </body>
</html>