0

i have a static page which was created via cms -> page. I include a custom phtml template within the cms page

{{block class="Magento\Framework\View\Element\Template" name="test_file" template="Magento_Theme::test.phtml"}}

Now i want to include a masonry gallery for example (https://vodkabears.github.io/galereya/)

How can i include css, jss files from within the phtml file to the bottom of the theme where all the other assets like jquery, etc are?

I tried several ways, i do not want the library to include in the whole theme, but only on the specific page. When i include the js/css files within the phtml file it gets included too early, before any jquery was loaded.

I hope to find someone who can help me.

Thank you very much

Improve this question

2 Answers 2

Reset to default
0

You can add Layout Update XML update

GOTO ADMIN -> Content -> Pages -> Edit page -> Design -> Layout Update XML

Write below content

<head>
  <css src="Namespace_YourModule::css/styles.css"/>
  <script src="Namespace_YourModule::js/script.js" />
</head>

Save page.

clear cache.

Now you can see your css/js file is loaded only that cms page.

Improve this answer
0

Add below CSS file in Layout Update XML 

<head>
  <css src="https://vodkabears.github.io/galereya/css/jquery.galereya.css" src_type="url"  />
</head>

Add below code in the Content field

<div id="gallery">&nbsp;</div>
<script>window.galereya || document.write('<script src="https://vodkabears.github.io/galereya/js/jquery.galereya.min.js"><\/script>')</script>
<script>
require(['jquery','jquery/ui'], function ($) {
    $(document).ready(function () { 
        $('#gallery').galereya({
                load: function(next) {
                    $.getJSON('https://vodkabears.github.io/galereya/images.json', function(data) {
                        next(data);
                    });
                }
        }); 
    });
});
</script>

clear cache may require.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.