4

Is there any way to use fotorama slider in CMS pages?

Slider:

<div id="fotorama_test" class="fotorama">
  <img src="https://s.fotorama.io/1.jpg">
  <img src="https://s.fotorama.io/2.jpg">
</div>
Improve this question
1
  • Note: To solve this problem, first look at the answer of @Prince and then at the answer of "Pritam Info 24"
    – Black
    Commented Dec 20, 2019 at 14:29

2 Answers 2

Reset to default
3

CSS:

app/design/frontend/{Vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/fotorama.css" />
    </head>
</page>

JS:

app/design/frontend/{Vendor}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            fotorama: 'js/fotorama'
        }
    }
};

app/design/frontend/{Vendor}/{theme}/web/js/fotorama.js

define(['jquery'], function($){
   "use strict"; // <-- this might cause some problems which you need to resolve, otherwise the code won't work. You can also just remove it.
       return function fotorama()
       {
           alert('load fotorama OK');
           //put the fotorama.js content here (you get it from your library)
       }
});

app/design/frontend/{Vendor}/{theme}/Magento_Theme/templates/fotorama_slider.phtml

<script type="text/javascript">
    require(['jquery', 'fotorama'], function($, fotorama) {
        fotorama();
    });
</script>

and finaly you load your fotorama slider (fotorama_slider.phtml) into your cms page like this :

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

Info: don't forget to :

  • clean the cache

  • clean var/view_preprocessed content

  • clean pub/static content

  • deploy the static content = php bin/magento setup:static-content:deploy -f

Improve this answer
10
  • 1
    Not working, please can you able to post fotoram_slider.phtml content as well.
    – Mage2 Developer
    Commented Sep 22, 2019 at 16:32
  • fotoram_slider.phtml is already posted : <script type="text/javascript"> require(['jquery', 'fotorama'], function($, fotorama) { fotorama(); }); </script>
    – PЯINCƎ
    Commented Sep 23, 2019 at 9:43
  • 1
    thanks for the reply but it's not working
    – Mage2 Developer
    Commented Sep 23, 2019 at 13:23
  • Look if you have some js error
    – PЯINCƎ
    Commented Sep 23, 2019 at 23:14
  • @PЯINCƏ, I also tried it, I get Error filtering template: Invalid template file: 'mytheme/base::fotorama_slider.phtml' in module: '' block's name: 'magento\framework\view\element\template_0'
    – Black
    Commented Dec 18, 2019 at 11:31
2
+50

Yes. CMS page content is very straight forward as describe here

Note : I put my fotorama CMS page content in ans section for better readability. I am not giving the full ans of your queation as @PЯINCƏ already answered it.

1) My fotorama CMS page content :

    <center>
    <div class="fotorama"  data-allowfullscreen="native"  data-transition="crossfade" data-nav="thumbs"  data-width="700" data-ratio="700/467" data-max-width="100%">
<img src="{{media url="wysiwyg/1-lo.jpg"}}" /> 
    <img src="{{media url="wysiwyg/2-lo.jpg"}}" /> 
    <img src="{{media url="wysiwyg/5-lo.jpg"}}" /> 
    <img src="{{media url="wysiwyg/6-lo.jpg"}}" /> 
    <img src="{{media url="wysiwyg/9-lo.jpg"}}" />
    </div>
    </center>
    <p>{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::fotorama_slider.phtml"}}
    </p>

2) My app/design/frontend/{Vendor}/{theme}/requirejs-config.js

var config = {
    "map": {
        '*' : {              
               'fotorama': 'js/fotorama'
             }
    }    
};

3) My app/design/frontend/{Vendor}/{theme}/web/js/fotorama.js

Note : I have downloaded fotorama.js from https://fotorama.io/ and put the fotorama.js lib code in that file (app/design/frontend/{Vendor}/{theme}/web/js/fotorama.js) just below the line //put the fotorama.js content here (you get it from your library)

/*!
 * Fotorama 4.6.4 | http://fotorama.io/license/
 */
define(['jquery'], function($){
   "use strict";
       return function fotorama()
       {
           //alert('load fotorama OK');

           var fotoramaVersion;
           //put the fotorama.js content here (you get it from your library)
           fotoramaVersion="4.6.4",function(a,b,c,d,e){"use strict";function f......
           ........................
       }
})

At Fronted it look ilks:

enter image description here

Improve this answer
2
  • It finally works now after using your app/design/frontend/{Vendor}/{theme}/web/js/fotorama.js) code! :) I even attempted it before myself...but I put the var directly at the fotoramaVersion and not like you did... bruh. If you remove use strict; then it works too. Thanks :)
    – Black
    Commented Dec 20, 2019 at 14:19
  • 1
    Good to know that it works finally. Thank you.
    – Pritam Biswas
    Commented Dec 20, 2019 at 14:24

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.