Merge branch 'features' into 'master'

Features

See merge request !2

assets/css/screen.css

@@ -595,7 +595,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 /* ---------------------------------------------------------- */
 
 .posts {
-    overflow-x: hidden;
+    /*overflow-x: hidden;*/
 }
 
 .post-feed {
@@ -612,7 +612,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     flex: 1 1 301px;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    /*overflow: hidden;*/
     margin: 0 0 40px;
     padding: 0 20px 40px;
     min-height: 220px;
@@ -639,6 +639,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     position: relative;
     display: block;
     color: var(--darkgrey);
+    padding: 10px;
 }
 
 .post-card-content-link:hover {
@@ -680,6 +681,39 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     flex-grow: 1;
     display: flex;
     flex-direction: column;
+    visibility: hidden;
+    opacity: 0;
+    width: 350px;
+    height: auto;
+    min-height: 160px;
+    z-index: 3;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background-color: #fff;
+    border-radius: 10px;
+    transition: width 1s, height 2s, background-color 2s, transform 2s;
+    border: 1px solid #e31f26;
+}
+
+.post-card-content::before{
+    content: "";
+    display: block;
+    position: relative;
+    width: 30px;
+    height: 30px;
+    background-color: #fff;
+    border-left: 1px solid #e31f26;
+    border-top: 1px solid #e31f26;
+    top: -16px;
+    left: 45%;
+    transform: rotate(45deg);
+}
+
+.post-card:hover .post-card-content {
+    transform: translate3d(0, -10%, 0);
+    visibility: visible;
+    opacity: 1;
 }
 
 .post-card-excerpt {
@@ -696,6 +730,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     display: flex;
     align-items: flex-start;
     padding: 0;
+    margin-top: auto;
 }
 
 .author-profile-image,
@@ -735,7 +770,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     margin: 0 0 0 -6px;
     width: 34px;
     height: 34px;
-    border: #fff 2px solid;
+    border: #000000 2px solid;
     border-radius: 100%;
 }
 
@@ -745,7 +780,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     z-index: 999;
     display: block;
     padding: 2px 8px;
-    color: white;
+    color: black;
     font-size: 1.2rem;
     letter-spacing: 0.2px;
     white-space: nowrap;
@@ -792,7 +827,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .post-card-byline-date {
-    font-size: 1.2rem;
+    font-size: 0.8rem;
 }
 
 .post-card-byline-date .bull {
@@ -1869,12 +1904,12 @@ Usage (In Ghost editor):
 }
 
 .read-next .post-card-primary-tag {
-    color: #fff;
+    color: #000000;
     opacity: 0.6;
 }
 
 .read-next .post-card-title {
-    color: #fff;
+    color: #000000;
     opacity: 0.8;
     transition: all 0.2s ease-in-out;
 }
@@ -1884,7 +1919,7 @@ Usage (In Ghost editor):
 }
 
 .read-next .post-card-excerpt {
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(0, 0, 0, 0.6);
 }
 
 .read-next .static-avatar {
@@ -1892,11 +1927,11 @@ Usage (In Ghost editor):
 }
 
 .read-next .post-card-byline-content {
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(0, 0, 0, 0.6);
 }
 
 .read-next .post-card-byline-content a {
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(0, 0, 0, 0.8);
 }
 
 .read-next-card {
@@ -1921,7 +1956,7 @@ Usage (In Ghost editor):
 
 .read-next-card-header h3 {
     margin: 0;
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(0, 0, 0, 0.6);
     font-size: 1.2rem;
     line-height: 1em;
     font-weight: 300;
@@ -1930,7 +1965,7 @@ Usage (In Ghost editor):
 }
 
 .read-next-card-header h3 a {
-    color: #fff;
+    color: #000000;
     font-weight: 500;
     text-decoration: none;
     opacity: 0.8;
@@ -1975,7 +2010,7 @@ Usage (In Ghost editor):
 
 .read-next-card-content li a {
     display: block;
-    color: #fff;
+    color: #000000;
     opacity: 0.8;
 }
 
@@ -2000,7 +2035,7 @@ Usage (In Ghost editor):
 
 .read-next-card-meta p {
     margin: 0;
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(0, 0, 0, 0.6);
 }
 
 .read-next-card-footer {
@@ -2011,7 +2046,7 @@ Usage (In Ghost editor):
 .read-next-card-footer a {
     padding: 7px 12px 8px 14px;
     border: 1px solid rgba(255, 255, 255, 0.6);
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(0, 0, 0, 0.6);
     font-size: 1.3rem;
     border-radius: 999px;
     transition: all 0.35s ease-in-out;
@@ -2845,11 +2880,11 @@ Usage (In Ghost editor):
     }
 
     .post-card-byline-content a {
-        color: rgba(255, 255, 255, 0.75);
+        color: rgba(0, 0, 0, 0.75);
     }
 
     .post-card-byline-content a:hover {
-        color: #fff;
+        color: #000000;
     }
 
     .post-card-image {
@@ -2857,7 +2892,7 @@ Usage (In Ghost editor):
     }
 
     .post-card-title {
-        color: rgba(255, 255, 255, 0.85);
+        color: rgba(0, 0, 0, 0.85);
     }
 
     .post-card-excerpt {
@@ -2886,11 +2921,11 @@ Usage (In Ghost editor):
     }
 
     .post-full-byline-meta h4 a {
-        color: rgba(255, 255, 255, 0.75);
+        color: rgba(0, 0, 0, 0.75);
     }
 
     .post-full-byline-meta h4 a:hover {
-        color: #fff;
+        color: #000000;
     }
 
     .author-list-item .author-card {
@@ -2911,25 +2946,25 @@ Usage (In Ghost editor):
     .post-full-content h3,
     .post-full-content h4,
     .post-full-content h6 {
-        color: rgba(255, 255, 255, 0.9);
+        color: rgba(0, 0, 0, 0.9);
     }
 
     .post-full-content a {
-        color: #fff;
-        box-shadow: inset 0 -1px 0 #fff;
+        color: #000000;
+        box-shadow: inset 0 -1px 0 #000000;
     }
 
     .post-full-content strong {
-        color: #fff;
+        color: #000000;
     }
 
     .post-full-content em {
-        color: #fff;
+        color: #000000;
     }
 
     .post-full-content code {
-        color: #fff;
-        background: #000;
+        color: #000000;
+        background: #ffffff;
     }
 
     hr {
@@ -2937,7 +2972,7 @@ Usage (In Ghost editor):
     }
 
     .post-full-content figcaption {
-        color: rgba(255, 255, 255, 0.6);
+        color: rgba(0, 0, 0, 0.6);
     }
 
     .post-full-content table td:first-child {

assets/js/script.js

+const nav_hum = document.querySelector('.ham');
+const main_nav = document.querySelector('#main-nav');
 
-let nav_hum = document.querySelector('.ham');
-let main_nav = document.querySelector('#main-nav');
-function active(){
+const anchors = document.querySelectorAll('#main-nav a[href*="#"]');
+const langs = document.querySelectorAll('.main-lang a[href*="#"]');
+
+const numbers = document.querySelectorAll('.statistic-block span');
+let numberTop = document.querySelector('.statistic-block span');
+
+const engBlocks = document.querySelectorAll('.eng');
+const rusBlocks = document.querySelectorAll('.rus');
+const qazBlocks = document.querySelectorAll('.qaz');
+const navText = document.querySelectorAll('#main-nav a');
+
+const mainBtn = document.querySelector('.main--btn');
+const feedbackExpert = document.querySelector('.feedback-expert');
+const benefitsDemoBtn = document.querySelector('.benefits-demo--btn');
+
+const learnMore = document.querySelector('.cc-link');
+
+function active() {
     nav_hum.classList.toggle('active');
     main_nav.classList.toggle('active');
 }
+
 let navHeight = document.querySelector('#header').scrollHeight;
-const anchors = document.querySelectorAll('#main-nav a[href*="#"]');
 const yOffset = -navHeight + 30;
 for (let anchor of anchors) {
     anchor.addEventListener('click', function (e) {
@@ -15,7 +32,7 @@ for (let anchor of anchors) {
         anchor.classList.add('active');
         const blockID = anchor.getAttribute('href').substr(1);
         const yourElement = document.getElementById(blockID);
-        if (!yourElement){
+        if (!yourElement) {
             document.location.href = `/#${blockID}`;
         }
         const yCoordinate = yourElement.getBoundingClientRect().top + window.pageYOffset;
@@ -26,7 +43,7 @@ for (let anchor of anchors) {
     });
 }
 const hash = document.location.hash;
-if (hash){
+if (hash) {
     let topY = document.querySelector(hash).getBoundingClientRect().top + window.pageYOffset;
     window.scrollBy({
         top: topY + yOffset,
@@ -34,104 +51,101 @@ if (hash){
     });
 }
 
-const langs = document.querySelectorAll('.main-lang a[href*="#"]');
-for (let lang of langs){
+for (let lang of langs) {
     lang.addEventListener('click', function () {
         localStorage['lang'] = this.text;
-        if (this.text==='rus'){
+        if (this.text === 'rus') {
             window.location.replace("/");
-        }else {
-            window.location.replace("/"+this.text);
+        } else {
+            window.location.replace("/" + this.text);
         }
     })
 }
-const navText = document.querySelectorAll('#main-nav a');
-const engText = ['Video', 'Faceplate in numbers', 'Manufacturing challenges', 'Faceplate solutions', 'Faceplate advantages', 'For whom', 'How it works', 'Contact'];
-const qazText = ['Vıdeo', 'Faceplate sandarmen', 'Óndiris máseleleri', 'Faceplate sheshimderi', 'Faceplate artyqshylyǵy', 'Kim úshin arnalǵan', 'Qalaı jumys isteıdi', 'Baılanys málimetteri'];
-const engBlocks = document.querySelectorAll('.eng');
-const rusBlocks = document.querySelectorAll('.rus');
-const qazBlocks = document.querySelectorAll('.qaz');
+const engText = ['Video', 'Faceplate in numbers', 'Manufacturing challenges', 'Faceplate solutions', 'Faceplate advantages', 'For whom', 'How it works', 'Contact', 'Posts and news'];
+const qazText = ['Vıdeo', 'Faceplate sandarmen', 'Óndiris máseleleri', 'Faceplate sheshimderi', 'Faceplate artyqshylyǵy', 'Kim úshin arnalǵan', 'Qalaı jumys isteıdi', 'Baılanys málimetteri', 'Jańalyqtar jáne posttar'];
+
 
-if (localStorage['lang'] === 'eng'){
+if (localStorage['lang'] === 'eng') {
     changeLang(engBlocks);
     translate(engText);
-}else if (localStorage['lang'] === 'qaz'){
+} else if (localStorage['lang'] === 'qaz') {
     changeLang(qazBlocks);
     translate(qazText);
-}else {
+} else {
     changeLang(rusBlocks);
 }
 
 function changeLang(values) {
-    for (let value of values){
+    for (let value of values) {
         value.style = 'display:block';
     }
 }
-function translate(array){
-    for (let i=0; i<array.length; i++){
+
+function translate(array) {
+    for (let i = 0; i < array.length; i++) {
         navText[i].innerHTML = array[i];
     }
 }
 
-
-let numbers = document.querySelectorAll('.statistic-block span');
-let numberTop = document.querySelector('.statistic-block span').getBoundingClientRect().top;
-
-for (let number of numbers){
+numberTop = numberTop ? numberTop.getBoundingClientRect().top : 0;
+for (let number of numbers) {
     let start = +number.innerHTML,
         end = +number.dataset.max;
 
     window.addEventListener('scroll', function onScroll() {
-        if(window.pageYOffset > numberTop - window.innerHeight / 2 || window.pageYOffset < numberTop - window.innerHeight / 2) {
+        if (window.pageYOffset > numberTop - window.innerHeight / 2 || window.pageYOffset < numberTop - window.innerHeight / 2) {
             this.removeEventListener('scroll', onScroll);
-            let interval = setInterval(function() {
+            let interval = setInterval(function () {
                 number.innerHTML = ++start;
-                if(start === end) {
-                    number.innerHTML = end+'%';
+                if (start === end) {
+                    number.innerHTML = end + '%';
                     clearInterval(interval);
                 }
             }, 10);
         }
     });
 }
-function showModal(){
+
+function showModal() {
     document.body.style = "overflow:hidden";
     document.querySelector('.feedback-form').classList.toggle('active');
     document.querySelector('.feedback-form iframe').setAttribute('scrolling', 'auto');
 
 }
 
-function closeModal(value){
+function closeModal(value) {
     document.body.style = "overflow:inherit";
     document.querySelector(value).classList.toggle('active');
 }
 
 
-document.querySelector('.main--btn').addEventListener('click', showModal);
-
-document.querySelector('.feedback-expert').addEventListener('click', showModal);
+if (mainBtn) {
+    mainBtn.addEventListener('click', showModal);
+}
 
-document.querySelector('.benefits-demo--btn').addEventListener('click', showModal);
+if (feedbackExpert) {
+    feedbackExpert.addEventListener('click', showModal);
+}
 
-document.querySelector('.footer-btn--'+localStorage['lang']).addEventListener('click',function () {
-    document.body.style = "overflow:hidden";
-    document.querySelector('.private-police').classList.toggle('active');
-} );
+if (benefitsDemoBtn) {
+    benefitsDemoBtn.addEventListener('click', showModal);
+}
 
-const learnMore = document.querySelector('.cc-link');
-learnMore.removeAttribute('target');
-learnMore.addEventListener('click', function () {
+if (learnMore) {
+    learnMore.removeAttribute('target');
+    learnMore.addEventListener('click', function () {
         document.body.style = "overflow:hidden";
         document.querySelector('.cookie-modal').classList.toggle('active');
-});
+    });
+}
 
-if( window.innerWidth <= 425 ){
+if (window.innerWidth <= 425) {
     const usabilityCards = document.querySelectorAll('.usability-card');
     const usabilityTooltip = document.querySelectorAll('.usability-card--tooltip');
-    for (let usabilityCard of usabilityCards){
+    for (let usabilityCard of usabilityCards) {
         usabilityCard.addEventListener('click', function () {
-            if(!this.querySelector('.usability-card--tooltip').classList.contains('hover')){
-                usabilityTooltip.forEach(i => i.classList.remove('hover') );
+            if (!this.querySelector('.usability-card--tooltip').classList.contains('hover')) {
+                usabilityTooltip.forEach(i => i.classList.remove('hover'));
             }
             this.querySelector('.usability-card--tooltip').classList.toggle('hover');
         })

en.hbs

@@ -33,9 +33,12 @@
 </script>
 <main id="site-main">
     <div class="main-info">
+        <div>
             <p>
                 Improve your overall equipment effectiveness (OEE), <br/> reduce the cost per unit <br/>with real-time control
             </p>
+            <span>SCADA HMI II<b>o</b>T MES</span>
+        </div>
         <button class="main--btn">Contact us</button>
     </div>
     <!-------------  preview section start  ---------------------->
@@ -334,7 +337,7 @@
                 <object type="image/svg+xml" data="../assets/images/02.svg"></object>
                 <div>
                     <span>CONNECTIVITY</span>
-                    <p>sending data to cloud</p>
+                    <p>sending data</p>
                 </div>
             </div>
             <div class="howItWorks-schema--item schema-03">

index.hbs

@@ -35,9 +35,12 @@
 
 <main id="site-main">
     <div class="main-info">
+        <div>
             <p>
                 Увеличение общей эффективности производства, <br/>снижение затрат на единицу продукции, <br/>управление в режиме реального времени
             </p>
+            <span>SCADA HMI II<b>o</b>T MES</span>
+        </div>
         <button class="main--btn">связаться с нами</button>
     </div>
     <!-------------  preview section start  ---------------------->
@@ -339,7 +342,7 @@
                 <object type="image/svg+xml" data="assets/images/02.svg"></object>
                 <div>
                     <span>СОЕДИНЕНИЕ</span>
-                    <p>отправка данных в облако</p>
+                    <p>отправка данных</p>
                 </div>
             </div>
             <div class="howItWorks-schema--item schema-03">

kz.hbs

@@ -34,9 +34,12 @@
 </script>
 <main id="site-main">
     <div class="main-info">
+        <div>
             <p>
                 Óndiristiń jalpy tıimdiligin arttyrý ,<br/> óndiriletin ónim birligine shyǵyndaryn azaıtý, <br/>naqty ýaqyt rejıminde baqylaý
             </p>
+            <span>SCADA HMI II<b>o</b>T MES</span>
+        </div>
         <button class="main--btn">Bizben baılanysý</button>
     </div>
     <!-------------  preview section start  ---------------------->
@@ -335,7 +338,7 @@
                 <object type="image/svg+xml" data="../assets/images/02.svg"></object>
                 <div>
                     <span>QAÝİPSİZDİK</span>
-                    <p>óńdelgen aqparat bulttyq keńistigine jiberiledi</p>
+                    <p>óńdelgen aqparatty jiberu</p>
                 </div>
             </div>
             <div class="howItWorks-schema--item schema-03">

partials/header-background.hbs

+{{!--
+Wow what the hell is going on in here even?
+
+Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
+have a heavy impact on performance, so it's a good idea to make them responsive. Because we
+can only get the image dynamically using Handlebars, and we can only set the image to properly
+be a background image using CSS, we end up with a handful of inline styles.
+
+If the template in question has a background image, then we render responsive image styles
+for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
+with a `no-image` class so we can style it accordingly.
+--}}
+
+{{#if background}}
+
+<style type="text/css">
+    .responsive-header-img {
+        background-image: url({{img_url background size='xl'}});
+    }
+
+    @media(max-width: 1000px) {
+        .responsive-header-img {
+            background-image: url({{img_url background size='l'}});
+            background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
+                url({{img_url background size='xl'}}) 2x);
+            background-image: image-set(url({{img_url background size='l'}}) 1x,
+                url({{img_url background size='xl'}}) 2x);
+        }
+    }
+
+    @media(max-width: 600px) {
+        .responsive-header-img {
+            background-image: url({{img_url background size='m'}});
+            background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
+                url({{img_url background size='l'}}) 2x);
+            background-image: image-set(url({{img_url background size='m'}}) 1x,
+                url({{img_url background size='l'}}) 2x);
+        }
+    }
+</style>
+<div class="outer site-header-background responsive-header-img">
+
+{{else}}
+
+<div class="outer site-header-background no-image">
+
+{{/if}}
\ No newline at end of file

partials/icons/avatar.hbs

+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>

partials/icons/facebook.hbs

+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" /></svg>
\ No newline at end of file

partials/icons/loader.hbs

+<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+    y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+    <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
+    <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+C22.32,8.481,24.301,9.057,26.013,10.047z">
+        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
+            dur="0.5s" repeatCount="indefinite" />
+    </path>
+</svg>
\ No newline at end of file

partials/icons/rss.hbs

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>

partials/icons/twitter.hbs

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>

partials/post-card.hbs

+<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is "home"}}{{#has index="nth:6"}}post-card-large{{/has}}{{/is}}{{/unless}}">
+
+    {{#if feature_image}}
+    <a class="post-card-image-link" href="{{url}}">
+        {{!-- This is a responsive image, it loads different sizes depending on device
+        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+        <img class="post-card-image"
+            srcset="{{img_url feature_image size="s"}} 300w,