Wordpress Integration
=====================

This is a general guide to integrate the gallery into your Wordpress site. Since the gallery is a client side Javascript application, 
it won't need any extra server side code to set it up properly. Only the path to each item asset are dynamic and the gallery needs 
correct references to those paths to retrieve the assets properly.


Step 1 
------

* Copy "examples" folder in download package to "wp-content/uploads" folder
* Rename "examples" to "cf3d"

::

 wp-content
  └── uploads
      └── cf3d
          ├── assets
          ├── css
          ├── js
          └── ...

Step 2 
------

* We'll use the Wordpress function "wp_upload_dir()" to retrieve the url of "uploads" dir and add the required scripts and styles. 
* Edit "functions.php" in current themes files located in "wp-content/themes/{selected_themes}" and add these code:

.. code-block:: php
   :linenos:

    /**
     * Register and enqueue styles.
     */
    function cf3d_styles() {

      $uploads = wp_upload_dir(); 
      wp_enqueue_style( 'opensans', "https://fonts.googleapis.com/css?family=Open+Sans:300,400");
      wp_enqueue_style( 'roboto', "https://fonts.googleapis.com/css?family=Roboto:300i&display=swap");
      wp_enqueue_style( 'cf3d', $uploads['baseurl'] . '/cf3d/css/video-js.css');
      wp_enqueue_style( 'cf3d', $uploads['baseurl'] . '/cf3d/css/cf3d.min.css');

      $custom_css = "

        // Add inline custom styles
        .rs-container {
          /*background:#eee;*/
        }
      ";
      wp_add_inline_style('cf3d', $custom_css);
    }
    add_action( 'wp_enqueue_scripts', 'cf3d_styles' );

    /**
     * Register and enqueue scripts.
     */
    function cf3d_scripts() {

      $uploads = wp_upload_dir(); 
      wp_enqueue_script( 'animejs', $uploads['baseurl'] . '/cf3d/js/anime.min.js');
      wp_enqueue_script( 'three', $uploads['baseurl'] . '/cf3d/js/three.min.js');
      wp_enqueue_script( 'videojs', $uploads['baseurl'] . '/cf3d/js/video.min.js');
      wp_enqueue_script( 'cf3d', $uploads['baseurl'] . '/cf3d/js/cf3d.min.js');
    }
    add_action( 'wp_enqueue_scripts', 'cf3d_scripts' );

Step 3
------

* If the gallery resides in a singe post, copy "single.php" and rename it to "cf3d.php"
* If the gallery resides in a singe page, copy "page.php" and rename it to "cf3d.php"
* Add custom template name in the beginning of "cf3d.php":

.. code-block:: php
   :linenos:

    <?php

    /**
     * Custom page template for CarouselFlow
     * Template Name: cf3d
     * Template Post Type: post, page
     */

    get_header();
    ?>


Step 4
------

* Retrieve the upload folder url then insert the gallery setup code into "cf3d.php":

.. code-block:: php
   :linenos:

    <?php
    /**
     * Custom page template for CarouselFlow
     * Template Name: cf3d
     * Template Post Type: post, page
     */

    get_header();
    ?>
    <main id="site-content" role="main">

      <?php
        $baseurl = wp_upload_dir()['baseurl'] . "/cf3d";
      ?>
          <div class="rs-container">
            <div class="rs-cf3d">
              <ul data-name="Art Gallery">
                <li> <a href="<?=$baseurl?>/assets/art/1.jpg" title="Item 1">Item 1</a>
                    <p>"It is not a lack of love, but a lack of friendship that makes unhappy marriages." – <em>Friedrich Nietzsche</em></p>
                  </li>
                  <li> <a href="<?=$baseurl?>/assets/art/2.jpg" title="Item 2">Item 2</a>
                    <p>"The secret of getting ahead is getting started. " - <em>Mark Twain</em></p>
                  </li>
              </ul>
            </div>
          </div>
      <?php

      if ( have_posts() ) {
        while ( have_posts() ) {
          the_post();
          get_template_part( 'template-parts/content', get_post_type() );
        }
      }

      ?>

    </main><!-- #site-content -->

    <script type="text/javascript">

      document.body.onload = function() {
      
        var el = document.querySelector('.rs-cf3d');
        var cf3d = new CarouselFlow(el, {

          containerZ:-1800,
          carouselRadius:1400,
          mode:'flip',
          centerShift:400,
          verticalShift:-150,
          categoryMenu:{
            horizontal:true
          }
        });
        window.cf3d = cf3d;
      }
    </script>

    <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
    <?php get_footer(); ?>

Step 5
------

* In the Wordpress admin page, edit or create a new post/page. Select "cf3d" as the custom template for the post/page attribute.