✏️ 正在编辑: splitscreen.php
路径:
/home/qyel0117/public_html/wp-content/themes/semplice7/editor/apg-grids/splitscreen.php
提示:
您可以编辑任何文件（包括二进制文件），但请注意不当修改可能导致文件损坏。
<?php // use use Semplice\Helper\Color; // output $output = array( 'html' => '', 'css' => '', ); // content editable $editable = ''; // attributes extract(shortcode_atts( array( 'splitscreen_layout' => 'left', 'splitscreen_object_fit' => 'cover', 'splitscreen_object_position' => 'top-center', 'splitscreen_title_position' => 'middle-left', 'splitscreen_transition' => 'disabled', 'splitscreen_column_width' => '40', 'splitscreen_column_bg' => '#ffffff', 'splitscreen_image_bg' => '#dddddd', 'splitscreen_scroll_reveal' => 'apg-reveal', 'splitscreen_parallax' => 'subtle', 'splitscreen_title_padding' => '4rem', 'splitscreen_title_offset' => '0rem', 'splitscreen_title_visibility' => 'both', 'splitscreen_title_color' => '#000000', 'splitscreen_title_font_family' => 'bold', 'splitscreen_title_fontsize' => '2rem', 'splitscreen_title_letter_spacing' => '0rem', 'splitscreen_title_line_height' => '120', 'splitscreen_title_text_transform' => 'none', 'splitscreen_type_color' => '#aaaaaa', 'splitscreen_type_font_family' => 'regúlar', 'splitscreen_type_fontsize' => '2rem', 'splitscreen_type_line_height' => '120', 'splitscreen_type_text_transform' => 'none', 'splitscreen_type_padding_top' => '2rem', 'splitscreen_details_label' => 'View Project', 'splitscreen_details_visibility' => 'visible', 'splitscreen_details_type' => 'button', 'splitscreen_details_bg_color' => '#efefef', 'splitscreen_details_border' => 0, 'splitscreen_details_border_color' => '#000000', 'splitscreen_details_border_radius' => 0, 'splitscreen_details_color' => '#000000', 'splitscreen_details_font_family' => 'regúlar', 'splitscreen_details_fontsize' => '0.7223rem', 'splitscreen_details_text_transform'=> 'uppercase', 'splitscreen_details_letter_spacing'=> '0.1111rem', 'splitscreen_details_padding_top' => '2rem', 'splitscreen_details_padding_hor' => '1.6667rem', 'splitscreen_details_padding_ver' => '0.8888rem', 'splitscreen_details_mouseover_background_color' => '#000000', 'splitscreen_details_mouseover_color' => '#ffffff', 'splitscreen_details_mouseover_border_color' => '#000000', ), $content['options']) ); // apg open $output['html'] .= '<div class="apg apg-splitscreen" data-layout="' . $splitscreen_layout . '" data-object-fit="' . $splitscreen_object_fit . '" data-title-align="' . $splitscreen_title_position . '" data-title-visibility="' . $splitscreen_title_visibility . '" data-details-visibility="' . $splitscreen_details_visibility . '" data-details-type="' . $splitscreen_details_type . '" data-parallax="' . $splitscreen_parallax . '">'; // selector $selector = '#' . $id . ' .apg-splitscreen'; // custom transition if($splitscreen_transition == 'enabled') { $custom_transition = ' data-custom-transition="splitscreen"'; } else { $custom_transition = ''; } // count $index = 1; // iterate posts foreach ($posts as $key => $post) { // is even/odd? if($index % 2 == 0) { $even_odd = 'even'; } else { $even_odd = 'odd'; } // options $values = $this->custom_options($post['post_id'], $post['thumbnail']['src'], $content['options']); // edtiable if(self::$is_editor) { $editable = ' data-apg-editable="editable" data-content-id="' . $id . '" data-post-id="' . $post['post_id'] . '" contenteditable="true"'; } // post title $post_title = $post['post_title']; if(isset($values['title']) && $values['title']) { $post_title = $values['title']; } // custom transition $transition_id = ' data-transition-element="' . 'transition_' . substr(md5(rand()), 0, 9) . '"'; // css output for background color $thumbnail_bg_color = ''; if(isset($values['background-color']) && $values['background-color']) { $thumbnail_bg_color = ' data-thumb-bg-color="' . $values['background-color'] . '" '; $output['css'] .= $selector . ' .post-' . $post['post_id'] . ' .apg-post-thumbnail { ' . Color::bg_css($values['background-color'], self::$is_editor, false) . ' }'; } // text gradient $text_link_gradient = Color::has_gradient($splitscreen_details_color, ''); if(!self::$is_editor) { if(false !== strpos($splitscreen_details_color, 'gradient') || false !== strpos($splitscreen_details_mouseover_color, 'gradient')) { $text_link_gradient = 'data-has-gradient="true"'; } } $output['html'] .= ' <div class="post-' . $post['post_id'] . ' apg-post apg-post-splitscreen ' . $splitscreen_scroll_reveal . $values['custom_class'] . '" data-post-id="' . $post['post_id'] . '" data-apg-object-position="' . $splitscreen_object_position . '"> ' . $this->custom_styles($id, 'splitscreen', $post, $values) . ' <div class="splitscreen-half apg-post-meta ' . $even_odd . '"> <div class="apg-post-title"> <div class="title" data-font="' . $splitscreen_title_font_family . '"' . $editable . '>' . $post_title . '</div> <div class="description" data-font="' . $splitscreen_type_font_family . '"' . $editable . '>' . $values['description'] . '</div> <div class="details"><a class="apg-details-link" data-font="' . $splitscreen_details_font_family . '" href="' . $post['permalink'] . '"' . $custom_transition . $transition_id . ' ' . $text_link_gradient . '"><span>' . $splitscreen_details_label . '</span></a></div> </div> </div> <div class="splitscreen-half apg-post-thumbnail"' . $thumbnail_bg_color . '> <a href="' . $post['permalink'] . '"' . $custom_transition . $transition_id . '> <div class="post-thumbnail"> ' . $this->thumbnail($values['thumbnail'], 'splitscreen', $id, $post) . ' </div> </a> </div> </div> '; // inc index $index++; } // close apg $output['html'] .= '</div>'; // css $selector = '#' . $id . ' .apg-splitscreen'; // border $border_css = 'border-width: 0rem 0rem ' . $splitscreen_details_border . ' 0rem;'; if($splitscreen_details_type == 'button') { $border_css = 'border-width: ' . $splitscreen_details_border . ';'; } // ausgleich letter spacing $neg_margin = ''; if(!self::$is_editor) { if(strpos($splitscreen_details_letter_spacing, '-') === false) { $neg_margin = 'margin-right: -' . $splitscreen_details_letter_spacing . ';'; } else { $neg_margin = 'margin-right: ' . str_replace('-', '', $splitscreen_details_letter_spacing) . ';'; } } $output['css'] .= ' ' . $selector . ' .apg-post { ' . Color::bg_css($splitscreen_image_bg, self::$is_editor, false) . '} ' . $selector . ' .apg-post-meta { width: ' . $splitscreen_column_width . '%; ' . Color::bg_css($splitscreen_column_bg, self::$is_editor, false) . ' } ' . $selector . ' .apg-post-thumbnail { width: ' . (100 - $splitscreen_column_width) . '%; } ' . $selector . ' .apg-post-title { padding: 0rem ' . $splitscreen_title_padding . '; } ' . $selector . ' .apg-post-title { margin: ' . $splitscreen_title_offset . ' 0rem; } ' . $selector . ' .apg-post-title .title { font-size: ' . $splitscreen_title_fontsize . '; color: ' . $splitscreen_title_color . '; letter-spacing: ' . $splitscreen_title_letter_spacing . '; line-height: ' . $splitscreen_title_line_height . '%; text-transform: ' . $splitscreen_title_text_transform . '; } ' . $selector . ' .apg-post-title .description { font-size: ' . $splitscreen_type_fontsize . '; color: ' . $splitscreen_type_color . '; line-height: ' . $splitscreen_type_line_height . '%; text-transform: ' . $splitscreen_type_text_transform . '; padding-top: ' . $splitscreen_type_padding_top . ' } ' . $selector . ' .apg-post-title .details { margin-top: ' . $splitscreen_details_padding_top . '; border-color: ' . $splitscreen_details_border_color . '; border-radius: ' . $splitscreen_details_border_radius . '; ' . Color::bg_css($splitscreen_details_bg_color, self::$is_editor, false) . ' ' . $border_css . '; transition: border-color .3s ease-out, ' . Color::gradient_vars('.75', '--ease-out-expo') . '; } ' . $selector . ' .apg-post-title .details a { font-size: ' . $splitscreen_details_fontsize . '; text-transform: ' . $splitscreen_details_text_transform . '; letter-spacing: ' . $splitscreen_details_letter_spacing. '; padding: ' . $splitscreen_details_padding_ver . ' ' . $splitscreen_details_padding_hor . '; ' . $neg_margin . ' } ' . $selector . ' .apg-post-title .details a span { ' . Color::css($splitscreen_details_color, self::$is_editor) . '; transition: ' . Color::gradient_vars('.75', '--ease-out-expo') . '; } '; // responsive css, hovers, onscroll if(!self::$is_editor) { // adding button hover only for the frontend $output['css'] .= ' ' . $selector . ' .apg-post-title .details:hover { border-color: ' . $splitscreen_details_mouseover_border_color . '; ' . Color::bg_css($splitscreen_details_mouseover_background_color, self::$is_editor, false) . ' } ' . $selector . ' .apg-post-title .details:hover a span { ' . Color::css($splitscreen_details_mouseover_color, self::$is_editor) . ' } '; // add background color if button if($splitscreen_details_type == 'button') { $output['css'] .= Color::gradient_mouseover('#content-holder #' . $id . ' .apg .apg-post-title .details', $splitscreen_details_bg_color, $splitscreen_details_mouseover_background_color, false); } // details text $output['css'] .= Color::gradient_mouseover('#content-holder #' . $id . ' .apg .apg-post-title .details a span', $splitscreen_details_color, $splitscreen_details_mouseover_color, false); // responsive css $output['css'] .= $this->breakpoints_css($id, 'splitscreen', $content['options'], false); // onscroll $output['html'] .= ' <script> (function($) { $(document).ready(function () { var screenHeight = $(window).height(); var parallax = $("#' . $id . '").find(".apg").attr("data-parallax"); var isFirst = $(".apg-post").first().addClass("first-apg-post"); $(window).on("scroll", function() { $("#' . $id . '").find(".apg-post").each(function(index) { if($(this).isOnScreen(0.4, 0.4) && $(this).hasClass("apg-reveal")) { $(this).removeClass("apg-reveal"); // fade in image gsap.to($(this).find(".post-thumbnail"), 1.5, { opacity: 1, scale: 1, ease: "Circ.easeOut", }); // fade in text elements $(this).find(".title, .description, .details").each(function(index) { gsap.to($(this), .6, { y: 0, opacity: 1, delay: .25 * index, ease: "Circ.easeOut", }); }); } // parallax if(parallax != "off") { var intensity = { subtle: 10, medium: 6, intense: 2 }; var alreadyScrolled = $(this).offset().top; var yPos = ($(window).scrollTop() - alreadyScrolled) / intensity[parallax]; $(this).find(".post-thumbnail img").css({ "transform" : "translate3d(0px, " + yPos + "px, 0px)" }); } }); }); $(window).scroll(); }); })(jQuery); </script> '; } // ret return $output; ?>
💾 保存文件
← 返回文件管理器