3

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>
  • Note: To solve this problem, first look at the answer of @Prince and then at the answer of "Pritam Info 24" – Black Dec 20 '19 at 14:29
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 | |
  • 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 Dec 20 '19 at 14:19
  • 1
    Good to know that it works finally. Thank you. – Pritam Info 24 Dec 20 '19 at 14:24
1

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 | |
  • 1
    Not working, please can you able to post fotoram_slider.phtml content as well. – Yogesh Sep 22 '19 at 16:32
  • fotoram_slider.phtml is already posted : <script type="text/javascript"> require(['jquery', 'fotorama'], function($, fotorama) { fotorama(); }); </script> – PЯINCƏ Sep 23 '19 at 9:43
  • 1
    thanks for the reply but it's not working – Yogesh Sep 23 '19 at 13:23
  • Look if you have some js error – PЯINCƏ Sep 23 '19 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 Dec 18 '19 at 11:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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