编辑文件 - image.php

✏️ 正在编辑: image.php

路径: /home/qyel0117/public_html/wp-content/themes/semplice7/editor/modules/image.php
提示: 您可以编辑任何文件（包括二进制文件），但请注意不当修改可能导致文件损坏。

<?php

// namespace
namespace Semplice\Editor\Modules;

// use
use Semplice\Editor;
use Semplice\Editor\Placeholder;
use Semplice\Helper\Basic;
use Semplice\Helper\Image;
use Semplice\Helper\Get;

// -----------------------------------------
// module
// -----------------------------------------

class ImageModule extends Editor {

public $module;

// -----------------------------------------
	// constructor
	// -----------------------------------------

public function __construct() {
		$this->module = array(
			'html' => '',
			'css'  => '',
		);
	}

// -----------------------------------------
	// output editor
	// -----------------------------------------

public function editor($id, $values) {
		// get content
		$image_id = $values['content']['xl'];
		// extract options
		extract( shortcode_atts(
			array(
				'width'				=> 'original',
				'custom_width'		=> '600px',
				'align'				=> 'left',
				'lightbox'			=> 'no',
				'scaling'			=> 'no',
				'image_link' 		=> '',
				'image_link_type'	=> 'url',
				'image_link_page'	=> '',
				'image_link_project'=> '',
				'image_link_post'	=> '',
				'image_link_target' => '_blank',
			), $values['options'] )
		);
		// get image
		$image = Image::get($image_id, 'full');
		// get image
		if($image) {
			// lightbox item
			$lightbox_item = ($lightbox == 'yes') ? ' lightbox-item' : '';
			// image hover
			$hover = $this->hover($id, $values['options']);
			// image html
			$image_html = '<div class="is-content"><img class="' . $lightbox_item . '" ' . $this->attributes($image) . ' data-scaling="' . $scaling . '">' . $hover['html'] . '</div>';
			// add custom width to cs
			$css = (!self::$is_editor && $width == 'custom') ? $this->custom_width($id, $values['options']) : '';
			// add hover to css
			$css .= ($hover['css']) ? $hover['css'] : '';
			// image link
			$image_link = array(
				'type'		=> $image_link_type,
				'url'		=> $image_link,
				'page'		=> $image_link_page,
				'project'  	=> $image_link_project,
				'post'		=> $image_link_post
			);
			// output css
			$this->module['css'] = $css;
			// output html
			$this->module['html'] = '<div class="smp-image" data-align="' . $align . '" data-width="' . $width . '">' . $this->wrap_hyperlink($image_html, $lightbox, $image_link, $image_link_target) . '</div>';
		} else {
			// is admin and has no images?
			$this->module['html'] = Placeholder::get('image', $id, true, self::$is_editor, false);
		}
		// output
		return $this->module;
	}

// -----------------------------------------
	// output frontend
	// -----------------------------------------

public function frontend($id, $values) {
		// same as editor
		return $this->editor($id, $values);
	}

// -----------------------------------------
	// get image atts
	// -----------------------------------------

public function attributes($attributes) {
		// output
		$output = '';
		// unset sizes
		unset($attributes['sizes']);
		// iterate img
		foreach ($attributes as $attribute => $value) {
			if(!is_numeric($value) || $value > 0) {
				$output .= ' ' . $attribute . '="' . $value . '"';
			}
		}
		// return
		return $output;
	}

// -----------------------------------------
	// wrap hyperlink
	// -----------------------------------------

public function wrap_hyperlink($image, $lightbox, $link, $target) {
		if(!self::$is_editor) {
			if($lightbox == 'yes') {
				$wrap = '<a class="semplice-lightbox">' . $image . '</a>';
			} else if($link['type'] == 'url' && !empty($link['url'])) {
				$wrap = '<a class="image-link" href="' . $link['url'] . '" target="' . $target . '">' . $image . '</a>';
			} else if($link['type'] == 'home') {
				$wrap = '<a class="image-link" href="' . home_url() . '" target="' . $target . '">' . $image . '</a>';
			} else if($link['type'] != 'url') {
				if(!empty($link[$link['type']])) {
					$wrap = '<a class="image-link" href="' . get_permalink($link[$link['type']]) . '" target="' . $target . '">' . $image . '</a>';
				}
			}
		}
		// return
		return (isset($wrap)) ? $wrap : $image;
	}

// -----------------------------------------
	// get custom width
	// -----------------------------------------

public function custom_width($id, $options) {
		// add default
		$options['custom_width'] = (isset($options['custom_width'])) ? $options['custom_width'] : '600px';
		// output css
		$output_css = '';
		// get breakpoints
		$breakpoints = Get::breakpoints(false);
		// add with for xl
		if(isset($options['custom_width'])) {
			$output_css .= '#' . $id . ' .is-content img { width: ' . $options['custom_width'] . '; }';
		}
		// iterate breakpoints
		foreach ($breakpoints as $breakpoint => $width) {
			// css
			$css = '';
			$bp = '_' . $breakpoint;
			// font size
			if(isset($options['custom_width' . $bp])) {
				$css .= '[data-breakpoint="##breakpoint##"] #' . $id . ' .is-content img { width: ' . $options['custom_width' . $bp] . '; }';
			}
			// add to css output
			if(!empty($css)) {
				if(self::$is_editor) {
					$output_css .= str_replace('##breakpoint##', $breakpoint, $css);
				} else {
					$output_css .= '@media screen' . $width['min'] . $width['max'] . ' { ' . str_replace('[data-breakpoint="##breakpoint##"] ', '', $css) . '}';
				}
			}
		}
		// return
		return $output_css;
	}

// -----------------------------------------
	// image hover
	// -----------------------------------------

public function hover($id, $styles) {
		// mobile detect
		$mobile_detect = Basic::mobile_detect();
		// make sure its not mobile
		if(self::$is_editor || !$mobile_detect->isMobile()) {
			// vars
			$type = (isset($styles['background_type'])) ? $styles['background_type'] : 'img';
			$classes = '';
			$output = array(
				'css'  => false,
				'html' => ''
			);
			// has bg set?
			if($type == 'img' && isset($styles['background-image'])) {
				// img
				$img = Image::get($styles['background-image'], 'full');
				// add bg to css
				$output['css'] = 'background-image: url(' . $img['src'] . ');';
				// define bg atts
				$bg_atts = array('background-size', 'background-position', 'background-repeat');
				// terate bg atts
				foreach($bg_atts as $bg_attr) {
					if(isset($styles[$bg_attr])) {
						$output['css'] .= $bg_attr . ': ' . $styles[$bg_attr] . ';';
					}
				}
				// output
				$output['html'] = '<div class="image-hover"></div>';
			} else if($type == 'vid' && isset($styles['bg_video']) || $type == 'vid' && isset($styles['bg_video_url']) && !empty($styles['bg_video_url'])) {
				if(isset($styles['bg_video']) && $styles['bg_video'] != 'default') {
					$video = wp_get_attachment_url($styles['bg_video']);
				} else {
					$video = $styles['bg_video_url'];
				}
				// wrap
				$video = '
					<smp-bg-video>
						<video webkit-playsinline playsinline loop muted data-object-fit="cover">
							<source src="' . $video . '" type="video/mp4">
						</video>
					</smp-bg-video>
				';
				// add class
				$classes = ' video-hover';
				// output
				$output['html'] = '<div class="image-hover video-hover">' . $video . '</div>';
			} else if(self::$is_editor) {
				$output['html'] = '<div class="image-hover"></div>';
			}
			// wrap css
			$output['css'] = ($output['css']) ? '#' . $id . ' .image-hover {' . $output['css'] . '}' : false; 
			// return
			return $output;
		} else if($mobile_detect->isMobile()) {
			return array(
				'html' => '',
				'css' => false
			);
		}
	}
}

// instance
Editor::$modules['image'] = new ImageModule;
?>

← 返回文件管理器