_includes/wordgames/howto/howto.html in word-games-theme-2.6.2 vs _includes/wordgames/howto/howto.html in word-games-theme-2.6.3
- old
+ new
@@ -1,78 +1,65 @@
{%- if dataToShow.HOW_TO_CONTENT -%}
<div class="container">
- <div class="row">
- <div class="col-lg-4 col-md-6 my-3">
- <p class="howto mb-0">How to</p>
- </div>
- </div>
-</div>
-<section class="how-to-section mt-5">
- <div class="container">
- <div class="row pt-5 justify-content-center">
- {%- if site.ezoicAds -%}
- <div class="col-md-9 mx-auto">
- <div class="row">
- {%- endif -%}
- <div class="col-md-6 order-0 ">
- {%- if dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
- <div class="how-to-video-wrapper">
- {% assign video_url = dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl %}
- {% assign video_id = "" %}
- {% if video_url contains "youtu.be/" %}
- {% assign parts = video_url | split: "/" %}
- {% assign video_id = parts[3] %}
- {% elsif video_url contains "youtube.com/watch" %}
- {% assign params = video_url | split: "?" | last | split: "&" %}
- {% for param in params %}
- {% if param contains "v=" %}
- {% assign video_id = param | split: "=" | last %}
- {% endif %}
- {% endfor %}
- {% endif %}
-
- <div class="how-to-video" data-videoid="{{video_id}}">
- <img class="youtubeVideoPlayer mb-5" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
- <div class="youtube-play-btn-wrapper">
- <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
- </div>
+ <p class="howto mb-0">How to</p>
+ <div class="how-to-section mt-5 align-items-center row pt-5 justify-content-center">
+ {%- if site.ezoicAds -%}
+ <div class="col-md-9 mx-auto">
+ <div class="row">
+ {%- endif -%}
+ <div class="col-md-6 order-0 ">
+ {%- if dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
+ <div class="how-to-video-wrapper">
+ {% assign video_url = dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl %}
+ {% assign video_id = "" %}
+ {% if video_url contains "youtu.be/" %}
+ {% assign parts = video_url | split: "/" %}
+ {% assign video_id = parts[3] %}
+ {% elsif video_url contains "youtube.com/watch" %}
+ {% assign params = video_url | split: "?" | last | split: "&" %}
+ {% for param in params %}
+ {% if param contains "v=" %}
+ {% assign video_id = param | split: "=" | last %}
+ {% endif %}
+ {% endfor %}
+ {% endif %}
+
+ <div class="how-to-video" data-videoid="{{video_id}}">
+ <img class="youtubeVideoPlayer mb-5" width="100%" height="100%" id="thumbnail-img"
+ alt="thumbnail-img" />
+ <div class="youtube-play-btn-wrapper">
+ <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
</div>
+ </div>
-
- </div>
- {%- else -%}
- <div class="how-to-img-wrapper ">
- <img width="100%" height="100%" class="how-to-leftimg"
- src="{{dataToShow.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
- alt="{{dataToShow.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}">
- </div>
- {%- endif -%}
+
</div>
- <div class="col-md-6 order-1">
- <div class="how-to-right">
- <h3 class="how-to-title">{{dataToShow.HOW_TO_CONTENT.heading | replace: "$variable",
- page.value}}</h3>
- <ol class="how-to-list">
- {% for data in dataToShow.HOW_TO_CONTENT.steps %}
- <li id="step{{forloop.index}}" class="how-to-list-item">
- <span>{{forloop.index}}.</span>{{data |
- replace: "$variable",
- page.value}}
- </li>
- {% endfor %}
- </ol>
- </div>
+ {%- else -%}
+ <div class="how-to-img-wrapper ">
+ <img width="100%" height="100%" class="how-to-leftimg"
+ src="{{dataToShow.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
+ alt="{{dataToShow.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}">
</div>
- {%- if site.ezoicAds -%}
+ {%- endif -%}
</div>
+ <div class="col-md-6 order-1">
+ <h3 class="how-to-title">{{dataToShow.HOW_TO_CONTENT.heading | replace: "$variable",
+ page.value}}</h3>
+ {% for data in dataToShow.HOW_TO_CONTENT.steps %}
+ <div id="step{{forloop.index}}" class="how-to-list-item">
+ {{forloop.index}}. {{data | replace: "$variable", page.value}}
+ </div>
+ {% endfor %}
+ </div>
+ {%- if site.ezoicAds -%}
</div>
- {%- endif -%}
</div>
+ {%- endif -%}
</div>
-</section>
+</div>
{%- endif -%}
{%- if dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
<script>
\ No newline at end of file