{"id":1975,"date":"2025-07-01T12:39:50","date_gmt":"2025-07-01T09:39:50","guid":{"rendered":"https:\/\/www.peuratrail.fi\/?page_id=1975"},"modified":"2025-07-02T23:13:45","modified_gmt":"2025-07-02T20:13:45","slug":"social-media-photo","status":"publish","type":"page","link":"https:\/\/www.peuratrail.fi\/en\/social-media-photo\/","title":{"rendered":"Social media photo"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1975\" class=\"elementor elementor-1975\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0db6bc e-flex e-con-boxed e-con e-parent\" data-id=\"a0db6bc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4abb38e e-con-full e-flex e-con e-child\" data-id=\"4abb38e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51ef458 elementor-widget elementor-widget-html\" data-id=\"51ef458\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"preview-wrapper\">  \n  <div class=\"preview-container\">\n    <div id=\"preview\" class=\"preview\">\n      <div class=\"bib\">\n        <div class=\"logo\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/somekuva\/logo.png\" \/><\/div>\n        <div class=\"distance\"><\/div>\n        <span class=\"number\">101<\/span>\n        <div class=\"name\"><\/div>\n        <div class=\"sponsor\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/somekuva\/sponsori.png\" \/><\/div>\n      <\/div>\n      <div class=\"logo-bottom\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5c07092 e-con-full e-flex e-con e-child\" data-id=\"5c07092\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73602af elementor-widget elementor-widget-heading\" data-id=\"73602af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add your title text here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a7d5bc elementor-widget elementor-widget-heading\" data-id=\"5a7d5bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Take a picture and share it on social media!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd3ee40 elementor-widget elementor-widget-text-editor\" data-id=\"fd3ee40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Share information about your participation on social media. Use the hashtag #peuratrail and tag @3kreisia.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-142eca7 elementor-widget elementor-widget-html\" data-id=\"142eca7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.min.js\"><\/script>\n <style>\n    .controls { margin-bottom: 20px; }\n    .controls label { display: block; margin: 8px 0 4px; }\n\n .preview-wrapper {\n      width: 100%;\n      max-width: 1080px;\n      margin: auto;\n      overflow: hidden;\n    }\n    .preview-container {\n      position: relative;\n      width: 100%;\n    }\n    .preview {\n      position: relative;\n      overflow: hidden;\n      background-size: cover;\n      background-position: center;\n      width: 100%;\n      aspect-ratio: 9\/16;\n      \/* skaalauskerroin; asetetaan JS:ll\u00e4 *\/\n      --scale: 1;\n    }\n    .bib {;\n      position: absolute;\n      left: 50%;\n      top: 25%;\n      transform: translateX(-50%) rotate(-3deg);\n      width: 80%;\n      \/* aspect-ratio: 2 \/ 1; *\/\n      background: #d35400;\n      color: #fff;\n    }\n    .bib .logo {\n      position: absolute;\n      left: 3%;\n      top: 5%;\n      width:38%;\n    }\n    .bib .logo img {\n      display:block;\n      width:100%;\n    }\n    .bib .distance {\n      position: absolute;\n      transform: translateX(-50%);\n      text-align: center;\n      left: 70%;\n      top: 5%;\n      font-size: calc(30px * var(--scale));\n    }\n    .bib .distance .dist-line1 { }\n    .bib .distance .dist-line2 { white-space: nowrap;}\n    .bib .number {\n      display: block;\n      text-align: center;\n      font-size: calc(350px * var(--scale));\n      line-height: 0.65;\n      margin:19% 0 0;\n      font-weight: 800;\n    }\n    .bib .name {\n      text-align: center;\n      font-family: Neuzon;\n      font-size: calc(85px * var(--scale));\n      line-height:1.4;\n      letter-spacing: calc(2px * var(--scale));\n      text-transform:uppercase;\n    }\n    .bib .sponsor {\n        background:#fff;\n        width:100%;\n        padding:1% 10% 2%;\n    }\n    .bib .sponsor img {\n      display:block;\n      width:100%;\n    }\n    .logo-bottom {\n      position: absolute;\n      top: 8%;\n      left: 50%;\n      transform: translateX(-50%);\n      font-size: calc(120px * var(--scale));\n      font-family:\"Londrina Solid\";\n      color: #fff;\n      white-space: nowrap;\n      text-shadow: 0px 0px calc(40px * var(--scale)) #00000063;\n    }\n    .download-btn { margin-top: 10px; }\n  <\/style>\n  \n   <div class=\"controls\">\n    <label for=\"bgSelect\">Choose a wallpaper:<\/label>\n    <select id=\"bgSelect\">\n        <option value=\"\/wp-content\/uploads\/somekuva\/bg1.jpg\">1<\/option>\n        <option value=\"\/wp-content\/uploads\/somekuva\/bg2.jpg\">2<\/option>\n        <option value=\"\/wp-content\/uploads\/somekuva\/bg3.jpg\">3<\/option>\n        <option value=\"\/wp-content\/uploads\/somekuva\/bg4.jpg\">4<\/option>\n        <option value=\"\/wp-content\/uploads\/somekuva\/bg5.jpg\">5<\/option>\n        <option value=\"\/wp-content\/uploads\/somekuva\/bg6.jpg\">6<\/option>\n    <\/select>\n\n    <label for=\"sizeSelect\">Choose size:<\/label>\n    <select id=\"sizeSelect\">\n      <option value=\"1080x1920\">Story (1080\u00d71920)<\/option>\n      <option value=\"1080x1350\">Publication (1080\u00d71350)<\/option>\n    <\/select>\n\n    <label for=\"nameInput\">Name:<\/label>\n    <input type=\"text\" id=\"nameInput\" placeholder=\"Enter your name\" \/>\n\n    <label for=\"distanceSelect\">Choose a trip:<\/label>\n    <select id=\"distanceSelect\">\n        <option value=\"6 km\">6 km<\/option>\n        <option value=\"13 km\">13 km<\/option>\n        <option value=\"23 km\">23 km<\/option>\n        <option value=\"37 km\">37 km<\/option>\n        <option value=\"51 km\">51 km<\/option>\n        <option value=\"13\u201317 km\">Deer Hiking<\/option>\n    <\/select>\n\n    <label for=\"bottomTextSelect\">Select text:<\/label>\n    <select id=\"bottomTextSelect\">\n      <option value=\"Kohta menn\u00e4\u00e4n!\">Let&#039;s go!<\/option>\n      <option value=\"Taas menn\u00e4\u00e4n!\">Here we go again!<\/option>\n      <option value=\"Olen mukana:\">I am involved in:<\/option>\n      <option value=\"\">(No text)<\/option>\n    <\/select>\n\n    <button id=\"downloadBtn\" class=\"download-btn\">Upload image<\/button>\n  <\/div>\n\n <script>\n    jQuery(function($) {\n        function updateScaleAndHeight(size) {\n        var previewEl = document.getElementById('preview');\n        var pw = previewEl.offsetWidth;\n        var aspect = size[1] \/ size[0];\n        var ph = pw * aspect;\n        previewEl.style.height = ph + 'px';\n        var scale = pw \/ 1080;\n        previewEl.style.setProperty('--scale', scale);\n      }\n      \n      function updatePreview() {\n        var bg = $('#bgSelect').val();\n        $('#preview').css('background-image', 'url(\"' + bg + '\")');\n        \n        var size = $('#sizeSelect').val().split('x').map(Number);\n        \/\/ set explicit height + scale\n        updateScaleAndHeight(size);\n\n        var nameVal = $('#nameInput').val() || 'Nimi';\n        $('#preview .name').text(nameVal);\n\n        var sel = $('#distanceSelect').val();\n        var routeMap = {\n          '6 km': 'Mukava Musta',\n          '13 km': 'Kiinnostava Kirvesheikki',\n          '23 km': 'Posketon Poskeinen',\n          '37 km': 'Hurja Harjuntakanen',\n          '51 km': 'Suunnaton Suurij\u00e4rvi',\n          '13\u201317 km': 'Peuran Vaellus',\n        };\n        var routeName = routeMap[sel] || '';\n        var distHtml = '<div class=\"dist-line1\">5.7.2025 | <strong>' + sel + '<\/strong><\/div>';\n        if (routeName) distHtml += '<div class=\"dist-line2\">' + routeName + '<\/div>';\n        $('#preview .distance').html(distHtml);\n\n        var bibMap = { '6 km': '601', '13 km': '101', '23 km': '201', '37 km': '301','51 km': '501', '13\u201317 km': '901'};\n        $('#preview .number').text(bibMap[sel] || '000');\n\n        $('#preview .logo-bottom').text($('#bottomTextSelect').val());\n\n        \/\/ P\u00e4ivit\u00e4 skaalaus fontteihin ja muihin\n        var previewEl = document.getElementById('preview');\n        var pw = previewEl.offsetWidth;\n        var scale = pw \/ 1080;\n        previewEl.style.setProperty('--scale', scale);\n        \n        updateScaleAndHeight(size);\n      }\n\n      updatePreview();\n      $('#bgSelect, #sizeSelect, #nameInput, #distanceSelect, #bottomTextSelect').on('change keyup', updatePreview);\n     $(window).on('resize', function() {\n        var size = $('#sizeSelect').val().split('x').map(Number);\n        updateScaleAndHeight(size);\n      });\n\n      $('#downloadBtn').click(function() {\n        var previewEl = document.getElementById('preview');\n        var pw = previewEl.offsetWidth;\n        var ph = previewEl.offsetHeight;\n        var scale = 1080 \/ pw;\n        html2canvas(previewEl, { scale: scale, width: pw, height: ph, allowTaint: true, useCORS: true })\n          .then(function(canvas) {\n            canvas.toBlob(function(blob) {\n              var link = document.createElement('a');\n              link.download = 'peuratrail-konfiguroitu.png';\n              link.href = URL.createObjectURL(blob);\n              link.click();\n              URL.revokeObjectURL(link.href);\n            });\n          });\n      });\n    });\n  <\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>101 Lis\u00e4\u00e4 otsikkotekstisi t\u00e4h\u00e4n Tee kuva ja jaa somessa! Jaa tietoa osallistumisestasi somessa. K\u00e4yt\u00e4 tunnistetta #peuratrail ja t\u00e4g\u00e4\u00e4 @3kreisia. Valitse taustakuva: 123456 Valitse koko: Tarina (1080\u00d71920)Julkaisu (1080\u00d71350) Nimi: Valitse matka: 6 km13 km23 km37 km51 kmPeuran Vaellus Valitse teksti: Kohta menn\u00e4\u00e4n!Taas menn\u00e4\u00e4n!Olen mukana:(Ei teksti\u00e4) Lataa kuva<\/p>","protected":false},"author":1,"featured_media":2082,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1975","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.peuratrail.fi\/en\/wp-json\/wp\/v2\/pages\/1975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.peuratrail.fi\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.peuratrail.fi\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.peuratrail.fi\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.peuratrail.fi\/en\/wp-json\/wp\/v2\/comments?post=1975"}],"version-history":[{"count":106,"href":"https:\/\/www.peuratrail.fi\/en\/wp-json\/wp\/v2\/pages\/1975\/revisions"}],"predecessor-version":[{"id":2125,"href":"https:\/\/www.peuratrail.fi\/en\/wp-json\/wp\/v2\/pages\/1975\/revisions\/2125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.peuratrail.fi\/en\/wp-json\/wp\/v2\/media\/2082"}],"wp:attachment":[{"href":"https:\/\/www.peuratrail.fi\/en\/wp-json\/wp\/v2\/media?parent=1975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}