modxcms / imageslim Goto Github PK

Hello,

First off, great plugin.

Secondly, I'm looking to do something slightly different than what I.S. does normally, and wanted to get your thoughts. What I'm wanting is to be able to upload images at 2X their display size (3200px wide), keep that natural width on retina devices (though only displaying at 1600), but then reduce the natural width dynamically to 1600px for non-retina devices.

Basically, I'm trying to avoid having to make two versions of every image, one 2X for retina and one at display size. Is this possible with I.S? Let me know!

When the MODX install is in a subdirectory, but images are inserted with that base url prepended, ImageSlim prepends the base path again causing issues with the image replacement.

Changing line 141 to this:

    $file = str_replace(MODX_BASE_PATH.ltrim(MODX_BASE_URL, '/'), MODX_BASE_PATH, $file);

sorts that problem and has no negative side effects that I know off.

When used as a output modifier in MODX Revolution 2.2.7-pl and the content contains a textarea (with styles) it breaks the tag syntax:

ex. [[_content:imageSlim]]
[[_content]] contains a textarea tag. Imageslim removes the end tag for textarea and adds />.

Lazyloading images can be done in a multitude of ways.

One common technique is to add the image path to a data-attribute and use a generic 1px transparent gif as source for all images. Utilizing js images are loaded at a later point.

Example:

<img data-original="http://artmetropol.tv/id/00000/0000/100/10/1/vorschau_111.jpg" alt="" class="lazy dfs" src="lazy.gif">

A nice lazy loading jquery plugin: http://www.appelsiini.net/projects/lazyload

It would be great, to tell imageSlim to use other attributes instead of the default src one.

Example:

[[imageSlim? &input=`[[*content]]` &source=`data-original`  &phpthumbof=`fltr[]=gray`]]

&source could default to "src" but allow any other attribute as well.

Regards,

pepebe

I couldn't spot anything in the README about this, but was wondering if there is a way to have imageSlim run on a [[*content]] area or similar, but once it has resized images based on inline style or width/height that it could remove the inline styles and/or width/height attributes?

This would help massively with responsive builds as currently you'd have to overwrite the inline width and set them to 100% width or max-width in CSS, but then you'd have the height issue forcing the image out of shape.

Is there something I've missed in the config?

At the moment I don't really use it =), but I just know of some servers disabling allow_url_fopen (had problems with my own code), so here's what I usually do:

1. check for cURL and use $modx functionality to fetch what i need
2. check for file_get_contents() working and do it that way...

you probably need to adapt the code a bit, but it could get you rid of that requirement =D

if (function_exists('curl_init')) {
    $modx->getService('getfile','rest.modRestCurlClient');
    $response = $modx->getfile->request($url);
} else if ( function_exists('file_get_contents') && ini_get('allow_url_fopen') ) {
    $response = @file_get_contents($url);
} else {
    $modx->log(modX::LOG_LEVEL_ERROR, 'Neither cURL nor file_get_contents() is available to fetch remote data...talk to your hoster or get a better one');
}

I started testing imageSlim and I had a small problem. It seems like imageSlim ignores a part of my filename. I have three files (p.e. image-1.png, image-2.png, image-3.png). imageSlim seems to ignore the '-#' part en outputs the first image three times

 Fatal error: Uncaught ArgumentCountError: parse_str() expects exactly 2 arguments, 1 given in /core/cache/includes/elements/modsnippet/30.include.cache.php:53 

Stack trace: 

#0 /core/cache/includes/elements/modsnippet/30.include.cache.php(53): parse_str() 
#1 /core/model/modx/modscript.class.php(76): include('...') 
#2 /core/model/modx/modx.class.php(1865): modScript->process() 
#3 /core/model/modx/filters/modoutputfilter.class.php(676): modX->runSnippet() 
#4 /core/model/modx/modparser.class.php(942): modOutputFilter->filter() 
#5 /core/components/pdotools/model/pdotools/pdoparser.class.php(305): modTag->filterOutput() 
#6 /core/components/pdotools/model/pdotools/pdoparser.class.php(261): pdoTag->process() 
#7 /core/model/modx/modparser.class.php(251): pdoParser->processTag() 
#8 /core/components/pdotools/model/pdotools/pdoparser.class.php(64): modParser->processElementTags() 
#9 /core/model/modx/modtemplate.class.php(126): pdoParser->processElementTags() 
#10 /core/model/modx/modresource.class.php(513): modTemplate->process() 
#11 /core/model/modx/modresource.class.php(494): modResource->process() 
#12 /core/model/modx/modresponse.class.php(62): modResource->prepare() 
#13 /core/model/modx/modrequest.class.php(138): modResponse->outputContent() 
#14 /core/model/modx/modrequest.class.php(122): modRequest->prepareResponse() 
#15 /core/model/modx/modx.class.php(1461): modRequest->handleRequest() 
#16 /index.php(54): modX->handleRequest() 
#17 {main} 

thrown in /core/cache/includes/elements/modsnippet/30.include.cache.php on line 53

(30 is the imageSlim snippet)

There is one proposed patch in #14 however I don't think that's correct as we wouldn't want to return the array.

What I'd suggest is something like parse_str($options, $scriptProperties); and then adjusting the remainder of the snippet to read from the $scriptProperties array instead of the direct variables.

In Chrome I embedded a Google Map in my content and rendered the content with imageSlim. When it rewrote the DOM, it changed <iframe ...></iframe> to <iframe ... />, which meant the rest of the HTML was unparsed. If you do a view-source on it, you can see the rest of the document after <iframe ... /> is not syntax highlighted, because <iframe ... /> is not valid HTML. I may have workarounds for this, but if the snippet can prevent this illegal transformation, then no workaround would be needed. Thanks!

Not a problem, just a random wish-list item:
Add an optional step in slimming images that will push them through Yahoo!'s smush.it service, or directly call server executables of pngcrush, jpegtran, etc. to achieve the equivalent slimming effect. The WordPress plugin http://wordpress.org/plugins/wp-smushit/installation/ does this for that crowd, even though Yahoo! claims to not have an official API. It may be problematic to rely on server copies of pngcrush, jpegtran, etc., or it may be problematic to go off-server to the Yahoo! service. I just want to put the idea out there. I've occasionally seen huge reductions when I manually use the ImageOptim Mac application, which does the similar job, so this may have some value. Thanks again for your great work here and on pThumb.

Enhancement suggestion: Would it be too heavy to include https://github.com/Masterminds/html5-php or another HTML5 parser in order to avoid the deficiencies that arise from XML parsing the input? Perhaps giving the user the option of using the HTML5 parser instead of PHP's DOM extension?

I have six off-site hotlinked images in my [[*content]] , and I process it like this:

[[*content:imageSlim=`remoteImages=1&scale=1&maxWidth=970&debug=1`]]

I get a debug dump in an HTML comment:

i m a g e S l i m  [1.1.2-pl]
imgSrc:src  scale:1  convertThreshold:none
maxWidth:970  maxHeight:999999  q:
fixAspect:1  phpthumbof:
Remote images:1  Timeout:5  cURL: installed
Retrieved from cache: /foo/site/assets/components/imageslim/cache/www.sample.com-managed-qh1x.jpg
w:120  h:120  realw:120  realh:120  type:jpeg
...

but in the following HTML, the original off-site image is present in the img src= attribute, not the locally cached copy.

<img src="http://www.sample.com/managed/qh1x.jpg" alt="" width="120" height="120"/>

Oughtn't imageSlim rewrite the src attribute to refer to the locally cached copy in this case?

I'm using imageslim, but I want some images not to be processed. I've added a function to imageslim which doesn't process images who have the class 'skip'.

1. Add to tinymce a new class called 'skip' (system setting tiny.css_selectors)
2. In the snippet Imageslim around line 84 I added the following right after:

foreach ($dom->getElementsByTagName('img') as $node) { // for all our image

add:

// skip images with class 'skip'
$skip = $node->getAttribute('class'); if ( ($skip) && ($skip == 'skip') ) { continue; }

Now, just add the class to the image using tinymce.

Maybe you could add this function into imageslim.

Nice job. Thanks for sharing.

Calling imageSlim on a remote resource:

<img src="[[imageSlim? &input=`http://artmetropol.tv/id/00000/0000/000/10/5/vorschau_15.jpg` &remoteImages=`1` &phpthumbof=`w=400`]]" />

Has unexpected results:

<img src="<p>http://artmetropol.tv/id/00000/0000/000/10/5/vorschau_15.jpg</p>">

This happens on modxcloud (latest versions of modx and all relevant extensions). phpthumbof is installed, pThumb isn't.

phpthumb_nohotlink_valid_domains is set to "{http_host},artmetropol.tv"
phpthumb_nohotlink_enabled is set to "No"

Any idea why the image is not processed and how why paragraph tags wrap arround the path if imageSlim fails?

Regards,

pepebe