WordPress.org

Plugin Directory

Changeset 1009359


Ignore:
Timestamp:
10/17/14 23:37:06 (3 years ago)
Author:
MartyThornley
Message:

Version 1.4

Location:
photoblog-image-fixer/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • photoblog-image-fixer/trunk/photoblog_image_fixer.php

    r311194 r1009359  
    44Plugin URI: http://photographyblogsites.com/resources/wordpress-plugins/photoblog-image-fixer 
    55Description: Allow better image sizing by removing inline sizes and adding a class name to the automatically generated p tags. 
    6 Version: 1.3.1 
     6Version: 1.4 
    77Author: Marty Thornley 
    88Author URI: http://martythornley.com 
    99*/ 
    1010 
    11 /*  Copyright 2009  Marty Thornley  (email : marty@martythornley.com) 
     11/*  Copyright 2009-2014  Marty Thornley  (email : marty@martythornley.com) 
    1212 
    1313    This program is free software; you can redistribute it and/or modify 
     
    2626*/ 
    2727 
    28 /********************************************************************* 
    29 / 
    30 /   USING THIS PLUGIN 
    31 /    
    32 /   Just install and activate. 
    33 /   It works automaticaly. No settings, no template tags or shortcodes needed. 
    34 / 
    35 /   It will add clas="image-fixer" to the p tag around all images, allowing you to style paragraphs containg images seperately from standard paragraphs. 
    36 / 
    37 /    
     28    add_action( 'wp_enqueue_scripts',       'image_fixer_enqueue_scripts' ); 
     29    add_action( 'wp_head',                  'image_fixer_add_max_width' ); 
     30     
     31    add_filter( 'the_content',              'image_fixer_add_wrapper' , 99 ); 
     32    add_filter( 'wp_footer',                'image_fixer_fix_with_spans' ); 
     33     
     34    function image_fixer_enqueue_scripts() { 
     35     
     36        wp_enqueue_script( 'jquery' ); 
     37     
     38    } 
    3839 
    39 By adding a class name to paragraphs that contain images, we can style them differently. 
    40  
    41     p                               { padding: 20px 40px; } 
    42     p.imagefixer                    { padding: 0px; margin: 0px; } 
    43  
    44 The CSS line added automatically is the following: 
    45  
    46     p.imagefixer img                { max-width: 100% }; 
     40    function image_fixer_add_wrapper( $content ) { 
    4741     
    48 Because the plugin also adds a class to the image, you can over-ride that if you want like this: 
    49  
    50     p.imagefixer img.imagesizer     { max-width: 800px; } 
     42        $content = '<span class="image-fixer-wrapper">' . $content . '</span>';  
     43         
     44        return $content; 
     45    } 
    5146     
    52 A class is also added to paragraphs around objects to help style embedded media. But no style is added by the plugin.  
    53 To target paragraphs containing embedded objects add the following to your css: 
    54  
    55     p.objectfixer                   {} 
    56  
    57 / 
    58 / 
    59 *********************************************************************/ 
    60  
    61  
    62 add_filter ('the_content', 'image_fixer_add_p_class'); 
    63  
    64 function image_fixer_add_p_class($content) { 
    65     $content = preg_replace('/<p(.*)<object(.*)p>/', '<p class="p.objectfixer"$1<object$2p>', $content); 
    66     $content = preg_replace('/<p(.*)<img(.*)p>/', '<p class="imagefixer"$1<img$2p>', $content); 
    67     $content = preg_replace('/<p class="imagefixer(.*)<img(.*)class="(.*)p>/', '<p class="imagefixer$1<img$2class="imagesizer $3p>', $content); 
    68     $content = preg_replace('/<p class="imagefixer(.*)<img(.*)height="(.*)"(.*)p>/', '<p class="imagefixer$1<img$2$4p>', $content); 
    69     return $content; 
    70 } 
    71  
    72 add_action('wp_head', 'image_fixer_add_max_width'); 
    73  
    74 function image_fixer_add_max_width() { 
    75     echo ' 
    76         <style type="text/css"> 
    77             p.imagefixer img    { max-width: 100%; width:auto !important; width:100%; height:auto; }; 
    78         </style>'; 
    79 } 
    80  
    81 ?> 
     47     
     48    function image_fixer_add_max_width() { 
     49        echo ' 
     50            <style type="text/css"> 
     51                span.image-fixer img    { max-width: 100%; width: expression(this.width > 100% ? 100%: true); height:auto; } 
     52                .wp-caption             { max-width: 100%; } 
     53            </style>'; 
     54    } 
     55     
     56    function image_fixer_fix_with_spans( $content ) { 
     57        ?> 
     58        <script type="text/javascript"> 
     59            //<![CDATA[ 
     60                jQuery(document).ready(function($) { 
     61                    $("span.image-fixer-wrapper img").not(".no-image-fix").removeAttr("height").addClass("image-sizer").wrap('<span class="image-fixer" />').css({height: "auto"}); 
     62                }); 
     63            //]]> 
     64        </script> 
     65        <?php 
     66    } 
  • photoblog-image-fixer/trunk/readme.txt

    r311192 r1009359  
    33Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=11225299 
    44Tags: photoblog, images, image p tags. autop 
    5 Tested up to: 3.0.1 
     5Tested up to: 3.8.1 
    66Stable tag: trunk 
    77 
     
    3333Just activate the plugin. No settings. No template tags or shortcodes to worry about. 
    3434 
    35 = How does the class name added to a paragraph fix images? = 
     35= How does the class name added fix images? = 
    3636 
    3737When images are inserted through the WordPress editor, they automatically get wrapped in paragraph tags, like this: 
     
    3939`<p><a href=".... <img src=""..... /></p>` 
    4040 
    41 The problem is that when you try to add padding or margins or any style to your paragraphs, this also effects the images, because they are inside of paragraphs. 
     41The problem is that when you try to add padding or margins or any style to your paragraphs, this also effects the images, because they are inside of paragraphs. So we added some styling to images by wrapping the content in classes and adding some fixing styles. 
    4242 
    43 By adding a class name to paragraphs that contain images, we can style them differently. 
     43You can also add your own using the added classes like described below. 
    4444 
    45     p                               { padding: 20px 40px; } 
    46     p.image-fixer                   { padding: 0px; margin: 0px; } 
     45Wraps all content in a wrapper - image-fixer-wrapper 
    4746 
    48 The CSS line added automatically is the following: 
     47    .image-fixer-wrapper            {} 
     48     
     49Wraps all images in a span called .image-fixer 
    4950 
    50     p.imagefixer img                { max-width: 100% }; 
     51    span.image-fixer                { padding: 0px; margin: 0px; } 
     52 
     53Adds a class to the image itself .image-sizer 
     54 
     55    img.image-sizer                 {} 
    5156     
    5257Because the plugin also adds a class to the image, you can over-ride that if you want like this: 
    5358 
    54     p.imagefixer img.imagesizer     { max-width: 800px; } 
     59    span.image-fixer img.image-sizer        { max-width: 800px; } 
     60     
     61You can also add a class .no-image-fix to any image you want to remain untouched. And then can style that in other ways. 
    5562 
    56 A class is also added to paragraphs around objects to help style embedded media. But no style is added by the plugin.  
    57 To target paragraphs containing embedded objects add the following to your css: 
    58  
    59     p.objectfixer                   {} 
     63    .no-image-fix                   {} 
    6064 
    6165== Changelog == 
     66 
     67= 1.4 = 
     68 
     69Now uses jQuery to wrap content and add classes. Much better method of finding images within content. 
     70You may need to revisit and update CSS if you used the classes added by previous versions. 
    6271 
    6372= 1.3.1 = 
Note: See TracChangeset for help on using the changeset viewer.