imgix-wordpress / images-via-imgix Goto Github PK

View Code? Open in Web Editor NEW

54.0 4.0 14.0 111 KB

imgix WordPress plugin

Home Page: https://wordpress.org/plugins/images-via-imgix/

License: BSD 2-Clause "Simplified" License

PHP 100.00%

wordpress wordpress-plugin imgix imgix-plugin

images-via-imgix's Introduction

Images via imgix

A community powered WordPress plugin to automatically load all your existing (and future) WordPress images via the imgix service for smaller, faster, and better looking images.

Features
Getting Started
History
Testing

Features

Your images behind a CDN.
Automatically smaller and faster images with the Auto Format option.
Automatically better looking images with the Auto Enhance option.
Use arbitrary imgix API params when editing <img> tags in "Text mode" and they will pass through.
No lock in! Disable the plugin and your images will be served as they were before installation.

Getting Started

If you don't already have an imgix account then sign up at imgix.com.
Create a Web Folder imgix source with the Base URL set to your WordPress root URL (without the wp-content part). For example, if your WordPress instance is at http://example.com and an example image is http://example.com/wp-content/uploads/2017/01/image.jpg then your source's Base URL would be just http://example.com/.
Download the imgix WordPress plugin imgix_plugin.zip and install on your WordPress instance. In the WordPress admin, click "Plugins" on the right and then "Add New". This will take you to a page to upload the imgix_plugin.zip file. Alternatively, you can extract the contents of imgix_plugin.zip into the wp-content/plugins directory of your WordPress instance.
Return to the "Plugins" page and ensure the "imgix plugin" is activated. Once activated, click the "settings" link and populate the "imgix Host" field (e.g., http://yourcompany.imgix.net). This is the full host of the imgix source you created in step #1. Optionally, you can also turn on Auto Format or Auto Enhance. Finally, click "Save Options" when you're done.
Go to a post on your WordPress blog and ensure your images are now serving through imgix.

History

Originally this plugin was hosted as part of the official imgix organisation. It was depreciated as they focused their efforts on the PHP library.

This plugin is maintained and managed by the community. Imgix have kindly permitted the use of their name here but it should be noted that there is no official support available for this plugin. If you've got any problems submit an issue on this repo.

Testing

This plugin uses phpunit to run its tests. You will need to set up a local test database to run these tests. You can do that using the bootstrap script:

$ bin/install-wp-tests.sh imgix_wordpress_tests <YOUR MYSQL USERNAME> <YOUR MYSQL PASSWORD>

Then running the tests is as simple as:

$ phpunit

Testing with Docker

This plugin uses phpunit to run its tests. You can use Docker if you don't want to set up the test database locally.

Start the database:

$ docker-compose up -d mysql

Then running the tests is as simple as:

$ docker-compose up phpunit

images-via-imgix's People

Contributors

Stargazers

Watchers

Forkers

vitaligent raisinli typicalpixel nathanielks christhompsontldr eightam mhayward89 sbuckpesch webdeveric gregicit craigpearson isotopsweden joshbour

images-via-imgix's Issues

Images within the administration panel

Does it make sense to replace images within the administration panel?

For example, other plugins that does verify filetype (like ACF Pro) are incompatible with images-via-imgix.

Of course, the images are in JPG but the imgix parameters somehow block the correct filetype recognition.

Add image check against domain

When adding/updating the imgix.net source, before saving it attempt to load an image via this URL.

If an error state is returned then don't save domain/ or prevent filters being run on the imagery.

Is this project dead?

Hello!

I was wondering if there are any plans for this project to be updated.

Since there isn't really any other plugin (that I have found, at least) that offers the same functionality, it's really necessary in order to use imgix with the web folder option.

If it's discontinued, I guess I will fork it and continue maintaining it by myself.

Thanks,
Josh

Restrict imgix to specific filetype

On numerous project we use animated-gif within Wordpress.

The plugin currently replace every images (despite the filetype) with Imgix instance.

Knowing that animated gif support is still a beta feature of Imgix, it would be awesome to have some sort of filetype restriction within the administration panel.

Right now, we hacked our way into the plugin to avoid any disturbance.

Publish this repo to packagist

It would be great if this plugin was added to packagist to enable support for installation via composer.

Not working for me on WordPress 4.9.8

I've tried to install the plug-in.

When viewing the source I can see:

<link rel="dns-prefetch" href="//xxxx.imgix.net"/>

In the head, but the images are still being served directly from WordPress.

Any ideas?

add_retina() is replacing strings inside JSON encoded AJAX responses

The output buffer should have an wp_doing_ajax() check to prevent injecting lazy load tags into json encoded AJAX responses.

Plugin won't install

Hey, @wladston. I'm having issues installing this Plugin. I downloaded the .zip and uploaded it to my WordPress build but I get the following Error:

I also unzipped the .zip and placed the folder in /wp-content/plugins/ but the plugin does not show up in the Admin screen.

I am using WordPress version 4.7

Setup travis ci

🙃

Crop setting is detected in get_all_defined_sizes() but not used.

Would be an easy fix.
After line 138, add:
if($size['crop']) { $params['fit'] = 'crop'; }

Missing images on imgix dashboard

Hi, We have a problem with our website.

We signed the package properly and have an account but there are images which are missing on the dashboard but we have all images in the folder which we setup.

The plugin is active.
Question: how we send all images or rebuild new images to imgix dashboard, I can't find this anywhere.

We have about 30k images In the folder, but on the dashboard, there are about 9364 images

Please advise the next step.
Thanks

Plugin triggers multiple PHP warnings on activation due to include statements for scripts that don't exist

For example:
Warning: include(includes/compability.php): failed to open stream: No such file or directory in wp-content/plugins/images-via-imgix/imgix.php on line 19

and
Warning: include(includes/class-images-via-imgix.php): failed to open stream: No such file or directory in wp-content/plugins/images-via-imgix/imgix.php on line 20

It looks like the version of this plugin on Github is a bit out of sync with what exists on SVN and the WP plugins directory, since I see this compability.php file when I clone the repo, but not in the plugin that I have installed through WP.

Support for SVG images

Has anyone been able to support SVG images? imgix does support SVGs but when SVGs are uploaded to WP the path is not updated as it does with JPGs and PNGs.

Incorrect tag / release

When installing the plugin via composer there is a version mismatch which creates an update notice in the dashboard.

https://github.com/imgix-wordpress/images-via-imgix/tree/1.3.2

In github this is tagged as version 1.3.2 and therefore in packigist is tagged as 1.3.2. However in imgix.php the version is referenced as 1.3.0

Ref:

images-via-imgix/imgix.php

Lines 11 to 17 in c67a6e5

    
            * Plugin Name: Images via imgix 
        
            * Plugin URI:  https://github.com/imgix-wordpress/images-via-imgix 
        
            * Description: A WordPress plugin to automatically use your existing (and future) WordPress images from <a href="http://www.imgix.com" target="_blank">imgix</a> for smaller, faster, and better looking images. <a href="https://github.com/imgix-wordpress/images-via-imgix" target="_blank">Learn more</a>. 
        
            * Version:     1.3.0 
        
            * Author:      wladston 
        
            * Author URI:  http://github.com/imgix-wordpress 
        
            */

Get this plugin listed on WordPress' directory

Mangled src URLs

I've just installed via a repo .zip download (024a9379310e6ef848bc4fe78fcfefddfc49a306)...

All images in my templates work as expected. Unfortunately, the images in my posts are being mangled.

Without the plugin enabled, the img element is being modified by WP to include a srcset attribute.

This seems to be being parsed incorrectly once the imgix plugin is enabled.

I'm hoping somebody has seen this before???

Post "source":

<img class="alignnone size-full wp-image-1483" src="https://getstream.io/blog/wp-content/uploads/2016/11/image01.png" alt="Imgix - CDN" width="640" height="320" />

HTML page source with imgix plugin disabled:

<img src="https://getstream.io/blog/wp-content/uploads/2016/11/image01.png" alt="Imgix - CDN" width="640" height="320" class="alignnone size-full wp-image-1483" srcset="https://getstream.io/blog/wp-content/uploads/2016/11/image01.png 640w, https://getstream.io/blog/wp-content/uploads/2016/11/image01-300x150.png 300w, https://getstream.io/blog/wp-content/uploads/2016/11/image01-610x305.png 610w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 640px" />

HTML page source with imgix plugin enabled:

Not all image URLs being rewritten

Hi guys,

First of all, this is a great plugin for a great image CDN. So, thank you.

Some URLs aren't being rewritten in parts of Woocommerce. Example below - I've obscured the domain but happy to provide via private message.

It seems to only occur on the shop & category pages. I know this is unlikely to be an issue with the plugin and more a theme issue, however hoping you may still be able to point me in the right direction. I suspect other themes have been implemented in similar ways.

Here's the content-product.php file for the theme.

<?php
	/**
	 * The template for displaying product content within loops.
	 *
	 * Override this template by copying it to yourtheme/woocommerce/content-product.php
	 *
	 * @author 		WooThemes
	 * @package 	WooCommerce/Templates
	 * @version     3.0.0
	 */

	if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

	global $woocommerce, $post, $product, $woocommerce_loop, $sf_options, $sf_catalog_mode, $sf_product_multimasonry, $sf_product_display_type, $sf_product_display_layout;

	// Store loop count we're currently on
	if ( empty( $woocommerce_loop['loop'] ) )
		$woocommerce_loop['loop'] = 0;

	// Store column count for displaying the grid
	if ( is_shop() || is_product_category() || is_product_tag() ) {
		$product_display_columns = $sf_options['product_display_columns'];

		// COLUMNS GET VARIABLE
		if (isset($_GET['product_columns'])) {
			$product_display_columns = $_GET['product_columns'];
		}

		$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', $product_display_columns );
	}
	
	if ( empty( $woocommerce_loop['columns'] ) ) {
		$product_display_columns = $sf_options['product_display_columns'];

		// COLUMNS GET VARIABLE
		if (isset($_GET['product_columns'])) {
			$product_display_columns = $_GET['product_columns'];
		}

		$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', $product_display_columns );
	}

	// Ensure visibility
	if ( ! $product || ! $product->is_visible() )
		return;

	// Increase loop count
	$woocommerce_loop['loop']++;

	// Extra post classes
	$classes = array();
	if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 == $woocommerce_loop['columns'] )
		$classes[] = 'first';
	if ( 0 == $woocommerce_loop['loop'] % $woocommerce_loop['columns'] )
		$classes[] = 'last';

	$width = $thumb_width = $thumb_height = "";

	$product_display_type = $sf_options['product_display_type'];
	$product_display_gutters = $sf_options['product_display_gutters'];
	$product_qv_hover = $sf_options['product_qv_hover'];
	$product_buybtn = $sf_options['product_buybtn'];
	$product_rating = $sf_options['product_rating'];
	$product_details_alignment = $sf_options['product_details_alignment'];
	$disable_product_transition = false;
	if ( isset( $sf_options['disable_product_transition'] ) ) {
		$disable_product_transition = $sf_options['disable_product_transition'];
	}
		
	if ( $sf_product_display_type ) {
		$product_display_type = $sf_product_display_type;
	}

	// GET VARIABLES
	if ( isset($_GET['product_display']) ) {
		$product_display_type = $_GET['product_display'];
	}
	if ( isset($woocommerce_loop['style-override']) && $woocommerce_loop['style-override'] != "" ) {
		$product_display_type = $woocommerce_loop['style-override'];
	}

	if ( isset($_GET['product_gutters']) ) {
		$product_display_gutters = $_GET['product_gutters'];
	}

	$product_layout = "";
	if ( $sf_product_multimasonry ) {
		$product_display_type = "gallery";
	} else {
		if ( isset($sf_options['product_display_layout']) ) {
			$product_layout = $sf_options['product_display_layout'];
		}
	}
	
	if ( $sf_product_display_layout != "" ) {
		$product_layout = $sf_product_display_layout;
	}

	if ( $product_qv_hover ) {
		$classes[] = 'qv-hover';
	}

	$figure_class = 'animated-overlay';
	
	$sidebar_config = $sf_options['woo_sidebar_config'];
	if (isset($_GET['sidebar'])) {
		$sidebar_config = $_GET['sidebar'];
	}

	if (isset($_GET['layout'])) {
		$product_layout = $_GET['layout'];
	}

	if ( !$disable_product_transition && $product_display_type != "preview-slider" ) {
		if ( $product_display_type == "standard" ) {
			$figure_class .= ' product-transition-fade';
		} else {
			$figure_class .= ' product-transition-zoom';
		}
	} else {
		$figure_class .= ' product-transition-disabled';
	}

	$classes[] = 'product-display-'.$product_display_type;

	if (!$product_display_gutters && ($product_display_type == "gallery" || $sf_product_multimasonry) ) {
		$classes[] = 'no-gutters';
	}

	if ($product_buybtn && $product_display_type == "standard") {
		$classes[] = 'buy-btn-visible';
	}
	if ($product_rating && $product_display_type == "standard") {
		$classes[] = 'rating-visible';
	}

	$classes[] = 'product-layout-'.$product_layout;
	$classes[] = 'details-align-'.$product_details_alignment;


	// Get the product description
	$product_description = sf_get_post_meta($post->ID, 'sf_product_short_description', true);
	if ($product_description == "") {
		$product_description = $post->post_excerpt;
	}
	
	// Get variations for variable products
	if ( $product->is_type( 'variable' ) && $product_display_type == "preview-slider" ) {
		$available_variations = $product->get_available_variations();
	}
	
	
	// Width, Height parameters
	if ( $sf_product_multimasonry ) {

		$masonry_thumb_size = sf_get_post_meta( get_the_ID(), 'sf_masonry_thumb_size', true );

		if ( $masonry_thumb_size == "large" ) {
		    $classes[] = 'col-sm-6 size-large';
		    $width = 'col-sm-6';
		    $thumb_width = 800;
		    $thumb_height = 650;
		} else if ( $masonry_thumb_size == "tall" ) {
		    $classes[] = 'col-sm-3 size-tall';
		    $width = 'col-sm-3';
		    $thumb_width = 400;
		    $thumb_height = 800;
		} else {
			$classes[] = 'col-sm-3 size-standard';
			$width = 'col-sm-3';
			$thumb_width = 400;
			$thumb_height = 320;
		}

	} else {
		
		if ( $product_layout == "grid" ) {
			if ( $sidebar_config == "no-sidebars" ) {
				$classes[] = 'col-sm-sf-5';
				$width = 'col-sm-sf-5';
			} else {
				$classes[] = 'col-sm-3';
				$width = 'col-sm-3';
			}
		} else if ($woocommerce_loop['columns'] == 4) {
			$classes[] = 'col-sm-3';
			$width = 'col-sm-3';
		} else if ($woocommerce_loop['columns'] == 5) {
			$classes[] = 'col-sm-sf-5';
			$width = 'col-sm-sf-5';
		} else if ($woocommerce_loop['columns'] == 3) {
			$classes[] = 'col-sm-4';
			$width = 'col-sm-4';
		} else if ($woocommerce_loop['columns'] == 2) {
			$classes[] = 'col-sm-6';
			$width = 'col-sm-6';
		} else if ($woocommerce_loop['columns'] == 1) {
			$classes[] = 'col-sm-12';
			$width = 'col-sm-12';
		} else if ($woocommerce_loop['columns'] == 6) {
			$classes[] = 'col-sm-2';
			$width = 'col-sm-2';
		}
		
	}
?>
<li <?php post_class( $classes ); ?> data-width="<?php echo esc_attr($width); ?>">

	<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
	
	<?php if ( $product_display_type == "preview-slider" ) { ?>
	<div class="preview-slider-item-wrapper" data-permalink="<?php the_permalink(); ?>">
	<?php } ?>

	<figure class="<?php echo esc_attr($figure_class); ?>">

		<?php sf_woo_product_badge(); ?>

		<?php if ( $sf_product_multimasonry ) {
			$thumb_image    = get_post_thumbnail_id();
			$thumb_image_id = $thumb_image;
			$thumb_img_url  = wp_get_attachment_url( $thumb_image, 'full' );
			
			if ( $thumb_img_url == "" ) {
				$thumb_img_url = "default";
			}
			
			$image = sf_aq_resize( $thumb_img_url, $thumb_width, $thumb_height, true, false );
			$image_alt = esc_attr( sf_get_post_meta( $thumb_image_id, '_wp_attachment_image_alt', true ) );
			
			if ( $image_alt == "" ) {
				$image_alt = get_the_title();
			}

			if ( $image ) {
				echo '<div class="multi-masonry-img-wrap"><img src="' . $image[0] . '" width="' . $image[1] . '" height="' . $image[2] . '" alt="' . $image_alt . '" /></div>' . "\n";
			}
		} else if ( $product_display_type == "preview-slider" ) {
						
			if ( $product->is_type( 'variable' ) ) {
				
				echo '<div class="variable-image-wrapper is-variable">';
				$img_count = 0;			
				$available_variations = $product->get_available_variations();
				if ($available_variations && is_array($available_variations) ) {
					$available_variations = array_reverse($available_variations);
					foreach ( $available_variations as $variation ) {
						if ( $variation['variation_is_visible'] ) {
							$sale = false;
							if ( $variation['display_price'] != $variation['display_regular_price'] ) {
							$sale = true;
							}
											
							if ( $img_count == 0 ) {
							echo '<div class="img-wrap selected" data-sale="'.$sale.'">';
							} else if ( $img_count == 1 ) {
							echo '<div class="img-wrap move-right" data-sale="'.$sale.'">';
							} else {
							echo '<div class="img-wrap" data-sale="'.$sale.'">';
							}
							echo '<div class="variation-price">'.$variation["price_html"].'</div>';
							if ( isset($variation["image_src"]) ) {
								echo '<img src="'.$variation["image_src"].'" />';		
							} else if ( isset($variation["image"]["url"]) ) {
								echo '<img src="'.$variation["image"]["url"].'" />';		
							} else {
								echo '<img src="' . wc_placeholder_img_src() . '" />';
							}	
							echo '</div>';
							$img_count++;
						}
					}
				}
				echo '</div>';
				
			} else {
				
				echo '<div class="variable-image-wrapper">';
				echo '<div class="img-wrap selected">';
				woocommerce_template_loop_product_thumbnail();
				echo '</div>';
				echo '</div>';	
				
			}
			
		} else {
			echo '<div class="img-wrap first-image">';
			woocommerce_template_loop_product_thumbnail();
			echo '</div>';

			if ($product_display_type == "standard" && !$disable_product_transition) {
				
				$attachment_ids = '';
				if ( version_compare( WC_VERSION, '2.7', '>=' ) ) {
				$attachment_ids = $product->get_gallery_image_ids();
				} else {
				$attachment_ids = $product->get_gallery_attachment_ids();
				}
				
				$img_count = 0;

				if ($attachment_ids) {

					foreach ( $attachment_ids as $attachment_id ) {

						if ( sf_get_post_meta( $attachment_id, '_woocommerce_exclude_image', true ) )
							continue;
						
						echo '<div class="img-wrap second-image">'.wp_get_attachment_image( $attachment_id, 'shop_catalog' ).'</div>';

						$img_count++;

						if ($img_count == 1) break;

					}

				} else {
					echo '<div class="img-wrap second-image">';
					woocommerce_template_loop_product_thumbnail();
					echo '</div>';
				}
			}
		} ?>

		<div class="cart-overlay">
			<div class="shop-actions clearfix">
				<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
			</div>
		</div>
		
		<?php if ( !( $product_display_type == "preview-slider" && $product->is_type( 'variable' ) ) ) { ?>
		<a href="<?php the_permalink(); ?>"></a>
		<?php } ?>

		<div class="figcaption-wrap"></div>

		<?php if ($product_display_type != "standard") { ?>
			<figcaption>
				<div class="thumb-info">
					<?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?>
					<h4><?php the_title(); ?></h4>
					<?php
						if ( function_exists('wc_get_product_category_list') ) {
							$product_id = method_exists( $product, 'get_id' ) ? $product->get_id() : $product->id;
							echo wc_get_product_category_list( $product_id, ', ', '<span class="posted_in">', '</span>' ); 
						} else {
							echo $product->get_categories( ', ', '<span class="posted_in">', '</span>' );
						}
					?>
					<?php if ( class_exists( 'Woocommerce_German_Market' ) ) { ?>
						<div class="gm-hover-price-wrap">
						<?php
							/**
							 * woocommerce_after_shop_loop_item_title hook
							 *
							 * @hooked woocommerce_template_loop_price - 10
							 */
							do_action( 'woocommerce_after_shop_loop_item_title' );
						?>
						</div>				
					<?php } else { ?>
						<h6><?php woocommerce_template_loop_price(); ?></h6>
					<?php } ?>
				</div>
			</figcaption>

		<?php } ?>

	</figure>

	<div class="product-details">
		<?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?>
		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
		<?php
			if ( function_exists('wc_get_product_category_list') ) {
				$product_id = method_exists( $product, 'get_id' ) ? $product->get_id() : $product->id;
				echo wc_get_product_category_list( $product_id, ', ', '<span class="posted_in">', '</span>' ); 
			} else {
				echo $product->get_categories( ', ', '<span class="posted_in">', '</span>' );
			}
		?>

		<div class="product-desc">
			<?php echo $product_description; ?>
		</div>

		<?php
			/**
			 * woocommerce_after_shop_loop_item_title hook
			 *
			 * @hooked woocommerce_template_loop_price - 10
			 */
			do_action( 'woocommerce_after_shop_loop_item_title' );
		?>

	</div>

	<?php if ($product_display_type == "standard") { ?>
		<div class="clear"></div>
		<div class="product-actions">
			<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
		</div>
	<?php } ?>
	
	<?php if ( $product_display_type == "preview-slider" ) { ?>
	</div>
	<?php } ?>

</li>

When images are stored externally to WordPress, you should be able to add a custom URL

Hi i´ve installed this plugin and set up my domains correctly, my wordpress images are saving in https://img.noticiascol.com/2017 and images are being saved by imgix but i cant make this work, do i need to do something else? modify wordpress theme or something? images in imgix are serving ok.

https://img.noticiascol.com/2017/03/pasaporte-300x230.jpg
https://ncol.imgix.net/2017/03/pasaporte-300x230.jpg

	* Plugin Name: Images via imgix
	* Plugin URI: https://github.com/imgix-wordpress/images-via-imgix
	* Description: A WordPress plugin to automatically use your existing (and future) WordPress images from <a href="http://www.imgix.com" target="_blank">imgix</a> for smaller, faster, and better looking images. <a href="https://github.com/imgix-wordpress/images-via-imgix" target="_blank">Learn more</a>.
	* Version: 1.3.0
	* Author: wladston
	* Author URI: http://github.com/imgix-wordpress
	*/