appscms-tools-theme 3.4.3 → 3.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 946ad3b9a1ec7c764a668b70a6e4c5c41984fffb16303ef2945184da9d3084c5
-  data.tar.gz: 277f58778de1c0cc10b6a53d804a7cb909e52063a266514741bc6bf8f57dbe6d
+  metadata.gz: f99e66f517bc2717c6943c3b166fa99949b01915761fe40e550ddef9d8679faf
+  data.tar.gz: d328e1bc1c33e3c3946c5af2728ef62d17bda144280ec081d84d9a1104a14d26
 SHA512:
-  metadata.gz: 598c22717153a373807d4a5789fa20452e3c1731044775af3c8a88ba68cb803b96b53e0f8122fe0c54ecec2b225ea723f22762efe530ef1bbf0ede244004c2d0
-  data.tar.gz: 59a164fe5a1e40916264dfee6549056c1de3032ca2b95c3214ed1e1083dd8e3bfc125ac2830cf3f28720fd11e322a86f7a363eac8def40a4fbd9a322bfa773f4
+  metadata.gz: 20340595d61fa6f33f8e0567b767f040b2907937c05eba2ce01e2acf0148554a812c48024690f79029351a47c7d8a164d52d9aa7b0cebdd61984292e2f3b6283
+  data.tar.gz: 537f966d39d0200e098b6840e06807c25141e7c08fb3376b2a066a4ae13a5a9c2bc7e27070ce19ffde9cb2e5ac3f3ce5ac2c20b9f8775a7aa8f1cd20d6d28fee

data/_data/feature/en/compress-pdf.json

@@ -35,63 +35,19 @@
   ],
   "infographics": [
     {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
-      "description": "this is image description"
-    },
-    {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
+      "image": "https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80",
       "description": "this is image description"
     },
     {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
+      "image": "https://images.unsplash.com/photo-1619266465172-02a857c3556d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031&q=80",
       "description": "this is image description"
     },
     {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
+      "image": "https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80",
       "description": "this is image description"
     },
     {
-      "image": "https://cdn-infographic.pressidium.com/wp-content/uploads/2022/11/The-Changing-Ages-Of-The-Workforce-480x460.png",
+      "image": "https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80",
       "description": "this is image description"
     },
     {
@@ -139,7 +95,7 @@
   ],
   "HOW_TO_CONTENT": {
     "logoImageUrl": "/assets/idea.svg",
-    "YoutubeVideoUrl": "_gvnsTZn9OA",
+    "YoutubeVideoUrl": "https://www.youtube.com/watch?v=Fh3H50OGE_c&ab_channel=safeimagekit",
     "heading": "How to generate the ASCII art from our image.",
     "steps": [
       "Upload the image or Click on the drop down arrow and select Dropbox/Google Drive",

data/_includes/infographics/infographics.html

@@ -1,22 +1,71 @@
-<style>
-     .infographics_section {
-        width: 100%;
-        padding: 50px 0px 50px 0px;
-        border-top: 1px solid rgb(224, 224, 224);
-    }
-</style>
 <div class="infographics_section">
-    <div class="row">
-        <div class="col-md-9 mx-auto">
-            <div id="carousel">
-                <ul class="flip-items">
+    <h3 class="text-center w-100 mb-3"><b>Infographics Section</b></h3>
+    <div class="slider">
+        <div class="row">
+            <div class="col-md-12 mx-auto">
+                <div id="carousel">
                     {%- for item in featureData.infographics -%}
-                    <li data-flip-title="Red">
-                        <img width="300" height="300" src="{{item.image}}">
-                    </li>
+                    <div class="slide">
+                        <img src="{{item.image}}" alt="Photo1" />
+                        <p class="infographics-desc">{{item.description | capitalize }}</p>
+                    </div>
                     {%- endfor -%}
-                </ul>
+                </div>
             </div>
         </div>
+        <button class="btn-slide prev"><i class="fas fa-3x fa-chevron-circle-left"></i></button>
+        <button class="btn-slide next"><i class="fas fa-3x fa-chevron-circle-right"></i></button>
     </div>
-</div>
+    <div class=" dots-container">
+        {%- for item in featureData.infographics -%}
+        <span class="dot active" data-slide="{{ forloop.index0 }}"></span>
+        {%- endfor -%}
+    </div>
+</div>
+
+<script>
+    function Slider() {
+        const carouselSlides = document.querySelectorAll('.slide');
+        const btnPrev = document.querySelector('.prev');
+        const btnNext = document.querySelector('.next');
+        const dotsSlide = document.querySelector('.dots-container');
+        let currentSlide = 0;
+
+        const activeDot = function (slide) {
+            document.querySelectorAll('.dot').forEach(dot => dot.classList.remove('active'));
+            document.querySelector(`.dot[data-slide="${slide}"]`).classList.add('active');
+        };
+        activeDot(currentSlide);
+
+        const changeSlide = function (slides) {
+            carouselSlides.forEach((slide, index) => (slide.style.transform = `translateX(${100 * (index - slides)}%)`));
+        };
+        changeSlide(currentSlide);
+
+        btnNext.addEventListener('click', function () {
+            currentSlide++;
+            if (carouselSlides.length - 1 < currentSlide) {
+                currentSlide = 0;
+            };
+            changeSlide(currentSlide);
+            activeDot(currentSlide);
+        });
+        btnPrev.addEventListener('click', function () {
+            currentSlide--;
+            if (0 >= currentSlide) {
+                currentSlide = 0;
+            };
+            changeSlide(currentSlide);
+            activeDot(currentSlide);
+        });
+
+        dotsSlide.addEventListener('click', function (e) {
+            if (e.target.classList.contains('dot')) {
+                const slide = e.target.dataset.slide;
+                changeSlide(slide);
+                activeDot(slide);
+            }
+        });
+    };
+    Slider();
+</script>

data/_layouts/feature.html

@@ -257,10 +257,24 @@
           <div class="row">
             {%- endif -%}
             <div class="col-md-6 order-0">
-              {%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl -%}
+              {%- if featureData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
               <div class="how-to-video-wrapper">
-                <iframe width="500" height="315" src="https://www.youtube.com/embed/{{featureData.HOW_TO_CONTENT.YoutubeVideoUrl}}?autoplay=1&mute=1">
+                {% assign video_url = featureData.HOW_TO_CONTENT.YoutubeVideoUrl %}
+                {% assign params = video_url | split: "?" | last | split: "&" %}
+                {% for param in params %}
+                {% if param contains "v=" %}
+                {% assign video_id = param | split: "=" | last %}
+                {% endif %}
+                {% endfor %}
+
+                {%- if site.monumetricId -%}
+                <iframe class="mb-5" width="400" height="315" src="https://www.youtube.com/embed/{{video_id}}?autoplay=1&mute=1" allowfullscreen>
+                </iframe>
+                {%- else -%}
+                <iframe class="mb-5" width="500" height="315" src="https://www.youtube.com/embed/{{video_id}}?autoplay=1&mute=1" allowfullscreen>
                 </iframe>
+                {%- endif -%}
+              
               </div>
               {%- else -%}
               <div class="how-to-img-wrapper">
@@ -331,8 +345,8 @@
       </div>
     </div>
   </section>
-  {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%} 
-  {%- include Rating/rating.html -%} 
+  {%- endif -%} {%- endif -%} {%- include share/socialshare.html -%}
+  {%- include Rating/rating.html -%}
   {%- if featureData.infographics.size > 0 -%}
   {%- include infographics/infographics.html -%}
   {%- endif -%}

data/assets/css/tools.css

@@ -1594,3 +1594,89 @@ ol li::marker {
   transition: all 0.3s ease;
   border-radius: 5px;
 }
+/* infographics csss */
+.infographics_section {
+  width: 100%;
+  padding: 50px 0px 50px 0px;
+  border-top: 1px solid rgb(224, 224, 224);
+}
+
+.infographics_section .infographics-desc {
+  position: absolute;
+  color: #fff;
+  bottom: 30px;
+}
+
+.infographics_section .slider {
+  position: relative;
+  max-width: 40rem;
+  height: 26.625rem;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.infographics_section  .slide {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 26.625rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 1s;
+}
+
+.infographics_section  .slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.infographics_section button {
+  background: none;
+  border: none;
+}
+
+.infographics_section button .fas {
+  color:#fff;
+}
+
+.infographics_section .btn-slide {
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+
+  height: 5.5rem;
+  width: 5.5rem;
+  cursor: pointer;
+}
+
+.infographics_section .prev {
+  left: 3rem;
+  transform: translate(-50%, -50%);
+}
+
+.infographics_section  .next {
+  right: 3rem;
+  transform: translate(50%, -50%);
+}
+
+.infographics_section .dots-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.infographics_section  .dot {
+  width: 25px;
+  height: 5px;
+  margin: 15px 5px;
+  border-radius: .5rem;
+  background: rgba(39, 39, 39, .5);
+  cursor: pointer;
+}
+
+.infographics_section  .dot.active {
+  background: #272727;
+}

data/assets/js/theme.js

@@ -98,3 +98,5 @@ navbarToggler.addEventListener('click',()=>{
   }
 })
 }
+
+

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 3.4.3
+  version: 3.4.4
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-05-03 00:00:00.000000000 Z
+date: 2023-05-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll