springm
/
wp_twentytwentyone-child-spring2life


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
							<?php
/*
Template Name: Titlepage
 */
function catch_that_image() {
    // echo "<!-- catch_that_image! -->\n";
    $custom_query = new WP_Query( array( 'post_type' => 'post',
                                         'posts_per_page' => 1,
                                         'post_status' => 'publish',
    ) );
    if ( $custom_query->have_posts() ) {
        // echo "<!-- if have_posts -->\n";
        while ( $custom_query->have_posts() ) {
            // echo "<!-- while have_posts -->\n";
            $custom_query->the_post();
            $post = get_post();
            /*             echo "<!-- post: ", print_r($post, true), " -->\n"; */
            // $url = get_permalink($post->ID);
            $url = get_permalink();
            $title = get_the_title($post->ID);
            // echo "<!-- url: $url -->\n";
            $content =  wp_seo_get_description($post);
            // echo "<!-- content: $content -->\n";
            $keys = wp_seo_get_keywords($post);
            echo "<!-- keys: $keys -->\n";
            
            $image = false;
            if ( get_attached_media('image') ) {
                $image = array_shift(get_attached_media('image'));
                $image = $image->ID;
            }
            if (! $image) {
                $image = get_post_thumbnail_id();
            }
            if ( $image ) {
                $full =  wp_get_attachment_image_src($image,'full');
                return [$full, $url, $title, $content, $keys];
            }
        }
    }
    wp_reset_postdata();
    return [$image, $url, $title, $content, $keys];
}

/* get_header(); */
?>
<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <?php wp_head(); 
  [$image_url, $post_url, $post_title, $post_content, $post_keywords] = catch_that_image(); ?>
  <!-- after wp_head -->
  <meta name="description" content="<?php echo $post_content ?>">
  <meta name="keywords" content="<?php echo $post_keywords ?>">
  <!-- <meta name="robots" content="index,follow"> -->
  <title><?php echo $post_title ?> // Markus Spring Photography</title>
  <meta property="og:locale" content="en_GB" />
  <meta property='og:url' content='<?php echo get_site_url() ?>'>
  <meta property='og:type' content='article'> 
  <meta property='og:title' content='<?php echo $post_title ?>'> 
  <meta property='og:site_name' content='Markus Spring Photography // spring2life'> 
  <meta property='og:description' content='<?php echo $post_content ?>'>
  <meta property='og:image' content='<?php echo $image_url[0] ?>'> 
  <style>
   /* --------------------------------------------- animated burger menu --- */
   /* from  https://www.cssscript.com/morphing-side-menu-with-pure-css-css3/ */
   
   .menu {
     position:fixed;
     /* position: absolute; */
     top: 0;
     left: 0;
     z-index: 1000;
     height: 70px;
     width: 70px;
     overflow: hidden;
     pointer-events: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
   
   .menu * {
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
   }
   
   #menuTrigger:checked ~ .menu { pointer-events: auto; }
   
   #menuTrigger:checked ~ .menu h3 {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-transition-delay: 0.2s;
     transition-delay: 0.2s;
   }
   
   #menuTrigger:checked ~ header>.site-branding p {
     color: green !important;
     display: flex !important;
   }
   
   .menu ~ header {
     display: none !important;
   }
   
   #menuTrigger:checked ~ header {
     display: flex !important;
   }
   
   #menuTrigger:checked ~ #masthead {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-transition-delay: 0.2s;
     transition-delay: 0.2s;
   }
   
   
   .menu .trigger {
     position: absolute;
     z-index: 0;
     top: 10px;
     left: 10px;
     height: 56px;
     width: 56px;
     border-radius: 100%;
     cursor: pointer;
     pointer-events: auto;
     -webkit-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
     -webkit-transition-property: -webkit-transform, box-shadow;
     transition-property: transform, box-shadow;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     box-shadow: 0 0 0 0px #424242;
   }
   
   .menu .trigger:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     border-radius: inherit;
     overflow: hidden;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-transition: box-shadow 0.2s 0.4s ease-in-out;
     transition: box-shadow 0.2s 0.4s ease-in-out;
     box-shadow: 0 0 0 28px #424242 inset, 0 0 0 28px #FF5722 inset;
   }
   
   #menuTrigger:checked ~ .menu .trigger {
     /* -webkit-transform: translate3d(94px, 0, 0); */
     /* transform: translate3d(94px, 0, 0); */
     /* box-shadow: 0 0 0 370px #424242; */
   }
   
   #menuTrigger:checked ~ .menu .trigger:before {
     -webkit-transition-delay: 0s;
     transition-delay: 0s;
     box-shadow: 0 0 0 0 #424242 inset, 0 0 0 28px #FF5722 inset;
   }
   
   #menuTrigger:checked ~ .menu .trigger .line:nth-child(1) {
     -webkit-transform: translateY(0) translate3d(-50%, -50%, 0);
     transform: translateY(0) translate3d(-50%, -50%, 0);
   }
   
   #menuTrigger:checked ~ .menu .trigger .line:nth-child(3) {
     -webkit-transform: translateY(0) translate3d(-50%, -50%, 0);
     transform: translateY(0) translate3d(-50%, -50%, 0);
   }
   
   .menu .trigger .line {
     position: absolute;
     top: 50%;
     left: 50%;
     background: white;
     height: 2px;
     width: 18.66667px;
     -webkit-transform: translate3d(-50%, -50%, 0);
     transform: translate3d(-50%, -50%, 0);
     -webkit-transition: -webkit-transform 0.4s ease-in-out;
     transition: transform 0.4s ease-in-out;
   }
   
   .menu .trigger .line:nth-child(1) {
     -webkit-transform: translateY(-5px) translate3d(-50%, -50%, 0);
     transform: translateY(-5px) translate3d(-50%, -50%, 0);
   }
   
   .menu .trigger .line:nth-child(3) {
     -webkit-transform: translateY(5px) translate3d(-50%, -50%, 0);
     transform: translateY(5px) translate3d(-50%, -50%, 0);
   }
   
   #menuTrigger {
     position: fixed;
     top: 0;
     left: -60px;
   }
   /* ----------------------------------------- end animated burger menu --- */
   
   /* ------------------------------------------------------ hide footer --- */
   .site-info {
     display: none !important;
   }

   /* -------------------------------------------------- full size image --- */
   * {
     margin: 0;
     padding: 0;
   }
   .imgbox {
     display: grid;
     height: 100%;
     /* -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both; */
   }
   .center-fit {
     max-width: 100%;
     max-height: 100vh;
     /* max-width: 99%;
        max-height: 99vh; */
     margin: auto;
   }
   @media all and (device-width: 768px) and (device-height: 1024px) {
     .imgbox {
       /* height: 100vh;  */
       height: 100%;
       display: flex;
       /* background-color: red; */
     }
     .center-fit {
       position: relative;
       display:block;
       /* top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); */
       ;
     }

  </style>
  <!-- <link rel="stylesheet" href="/wp-content/themes/twentytwentyone-child-spring2life/titlepage.css.min"> -->
  <!-- <link rel="stylesheet" href="https://tobiasahlin.com/css/spinkit.css"> -->
</head>

<body <?php body_class(); ?>>
    <!-- <div class="cr cr-top cr-right cr-sticky cr-black">#SupportUkraine</div> -->
    
<div class="cr cr-top cr-right cr-sticky cr-black">Нет войне!</div>
    <?php wp_body_open(); ?>
  <div id="page" class="site" style="height: 100vh; ">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'twentytwentyone' ); ?></a>
    <?php /* [$image_url, $post_url, $post_title, $post_content, $post_keywords] = catch_that_image(); */
    get_template_part( 'template-parts/header/titlepage-header' ); ?>
    <a href='<?php echo $post_url ?>'>
      <div class="imgbox">
        <!-- <div class="sk-bounce skauto">
        <div class="sk-bounce-dot"></div>
        <div class="sk-bounce-dot"></div>
        </div> -->
        <img class="center-fit" src='<?php echo $image_url[0] ?>'>
      </div>
    </a>
  </div>
  <?php get_footer(); ?>
</body>