Recent Topics

inline images - accommodate custom size value?

started by on Oct 20, 2013 – Last touched: Jul 04, 2017

Oct 20, 2013 20:24    

v5.0.6

in http://b2evolution.net/news/2013/09/17/your-feedback-matters I suggested that for a future release b2evolution should accommodate specifying custom image size for inline images. This way the user can specify inline image size individually instead of it being all the same...

Below is the function found in [_item.class.php] which I customized to accommodate this function.

When the user insert the image it normally inserts when there is no $title specified. With a title specified it inserts
, however, with the added lines of code the user can customize the inline image size by adding ":fit-400x320" or ":fit-520x390" or what ever sizes ($thumbnail_sizes) are available in _advanced.php. eg

the lines of code added:

PHP

// CHANGED regular expression to accommodate image size 
preg_match_all'/\[image:(\d+)(:?)([^\]|\:]*)(:?)([^\]]*)\]/i'$content$images );
 
 
        if( !empty( $images[0] ) )
        {    // There are image inline tags in the content
            foreach( $images[0] as $i => $current_link_tag )
            {
                $current_link_ID = (int)$images[1][$i];
                $current_link_caption = empty( $images[2][$i] ) ? '#' $images[3][$i];
 
// ADDED START
 
                $current_link_ID = (int)$images[1][$i];
                if( empty( $images[3][$i] )) $images[3][$i] = '#';
                if( empty( $images[5][$i] )) $images[5][$i] = '#';
                $current_link_caption = empty( $images[2][$i] ) ? '#' $images[3][$i];
                $current_image_size = empty( $images[4][$i] )  ? '#' $images[5][$i];
 
                if($current_image_size !== '#' )
                {    // see if the image size specified exist in $thumbnail_sizes 
 
                    load_funcs'files/model/_image.funcs.php' );
 
                    if( in_array($current_image_sizeget_available_thumb_sizes()) )
                    {// the size specified is ok,, use it.
 
                    $params['image_size'] = $current_image_size;
 
                    }
                }
 
// ADDED END
 
// ... rest of code ect...

here is the complete function render_inline_images( $content, $params = array() ) after changed:

PHP

/**
     * Convert inline image tags like [image:123:abc:title] into HTML img tags
     *
     * @param string Source content
     * @param array Params
     * @return string Content
     */
    function render_inline_images$content$params array() )
    {
            if( isset( $params['check_code_block'] ) && $params['check_code_block'] && ( ( stristr$content'<code' ) !== false ) || ( stristr$content'<pre' ) !== false ) ) )
            { // Call $this->render_inline_images() on everything outside code/pre:
                $params['check_code_block'] = false;
                $content callback_on_non_matching_blocks$content,
                    '~<(code|pre)[^>]*>.*?</\1>~is',
                    array$this'render_inline_images' ), array$params ) );
                return $content;
            }
     
            // No code/pre blocks, replace on the whole thing
     
            $params array_mergearray(
                    'before'              => '<div>',
                    'before_image'        => '<div class="image_block">',
                    'before_image_legend' => '<div class="image_legend">',
                    'after_image_legend'  => '</div>',
                    'after_image'         => '</div>',
                    'after'               => '</div>',
                    'image_size'          => 'fit-400x320',
                    'image_link_to'       => 'original'// Can be 'orginal' (image) or 'single' (this post)
                    'limit'               => 1000// Max # of images displayed
                ), $params );
     
            // Find all matches with image inline tags
    //'/\[image:(\d+)(:?)([^\]]*)\]/i
    preg_match_all'/\[image:(\d+)(:?)([^\]|\:]*)(:?)([^\]]*)\]/i'$content$images );
     
     
            if( !empty( $images[0] ) )
            {    // There are image inline tags in the content
                foreach( $images[0] as $i => $current_link_tag )
                {
                    
                    $current_link_ID = (int)$images[1][$i];
                    if( empty( $images[3][$i] )) $images[3][$i] = '#';
                    if( empty( $images[5][$i] )) $images[5][$i] = '#';
                    $current_link_caption = empty( $images[2][$i] ) ? '#' $images[3][$i];
                    $current_image_size = empty( $images[4][$i] )  ? '#' $images[5][$i];
     
    
     
                    if($current_image_size !== '#' )
                    {    // see if the image size specified exist in $thumbnail_sizes 
     
                        load_funcs'files/model/_image.funcs.php' );
     
                        if( in_array($current_image_sizeget_available_thumb_sizes()) )
                        {// the size specified is ok, use it.
     
                        $params['image_size'] = $current_image_size;
     
                        }
    
                    }
 
                    
                    if( empty( $current_link_ID ) )
                    {    // Invalid link ID, Go to next match
                        continue;
                    }
     
                    if( !isset( $FileList ) )
                    {    // Get list of attached files only first time
                        $LinkOnwer = new LinkItem$this );
                        $FileList $LinkOnwer->get_attachment_FileList$params['limit'], 'inline' );
                        if( empty( $FileList ) )
                        {    // This Item has not the inline attached files, Exit here
                            break;
                        }
                    }
     
                    if( $File = & $FileList->get_by_field'link_ID'$current_link_ID ) )
                    {    // File is found by link ID
                        if( !$File->exists() )
                        {
                            global $Debuglog;
                            $Debuglog->add(sprintf('File linked to item #%d does not exist (%s)!'$this->ID$File->get_full_path()), array('error''files'));
                            break;
                        }
                        elseif( $File->is_image() )
                        { // Generate the IMG tag with all the alt, title and desc if available
                            $image_tag $this->get_attached_image_tag$File$params );
     
                            // Replace inline image tag with HTML img tag
                            $content str_replace$current_link_tag$image_tag$content );
                        }
                        else
                        {    // Display error if file is not an image
                            $content str_replace$current_link_tag'<div class="error">'.sprintfT_('This file cannot be included here because it is not an image: %s'), $current_link_tag ).'</div>'$content );
                        }
                    }
                }
            }
     
            return $content;
        }

Oct 21, 2013 01:12

Here is a live example of how the inline images are displayed in different sizes:
http://www.midnightstudios.co.za/gear

In the above sample the only downside, is that all images displayed inline inherit the size of the last specified inline image.

Oct 21, 2013 15:40

Hi @achillis,

We have a new feature with inline images but is just for make them float ( right or left ) instead of appearing centered by default. This will be included in future versions.

Your suggestion is being evaluated for the development team since you formulated at the Feedback survey, now we could add your contribution as a plus.

Thanks.

Dec 24, 2015 22:21

Any movement on this "feature" ?

Jan 09, 2016 12:18

@ppnsteve not really, the feature request was buried under a lot of other pending tasks.

I already gave a bump to it, so you will be notified if there is some progress.

Thank you.

Jan 09, 2016 20:13

So are you guys familiar with the users requests that asked for faster horses instead of asking for cars?

What I would really be interested is th end goal you want to reach.

For example, many people actually want to use only 2 or 3 sizes of images in a post:

  • content images
  • thumbnails
  • some other decorative image

It's much better to specify those with their function rather than their size.

The reason is Reponsive web design (RWD). You do NOT want the same pixel size for each of these on a phone or on a desktop. You do NOT want the same pixel size on a retina/HDPI screen and on a standard one. You don't want the same size in the REST API if you wan to display in a TV screen app.

We already have [image:] and [inline:] and we are adding [thumbnail:] for the purposes above.

If you need more, please describe precise use cases. Screenshots and/or URLs would be very useful.

Jan 09, 2016 21:36

If the images were desktop or max size-setable in [thumbnail:max-320] and scalable for mobile or retina then the few sizes or limits could be workable.

my big issue (somewhat noted in my other post) is that when adding "title screens" for an item in my post (usually in a paragraph) b2 wants to inline the full-screen image and not allow us to choose a smaller size that links to full image.

Jan 10, 2016 00:14

@fplanque wrote earlier:

Have you tried using [inline:] instead of [image:] ?

http://b2evolution.net/man/inline-short-tag

(It is not a perfect replacement for [thumbnail:] which we are going to develop but it may be a good temporary solution)

no I haven't really used it.. I just tried it that above example post and it does do just the img tag (not a correct one at that) but I need the resizing ability more than anything else.
I'd do the html entry before using that so as to have the image div and its associated stylings.. Though with some tweaking and allowing a size setting that could be a viable, simple solution until [thumbnail:] comes around.

Just a note: I also use WP on some of my other sites and they have a drop-down box to select the image size to include in the post - as well as alignment and a link-to selection - so easy and simple.


Form is loading...

multiblog platform – This forum is powered by b2evolution CMS, a complete engine for your website.