[Ciaran Lyons]

I’m looking to get the template to output image code as follows:

<img width="330" height="220" src="http://ourlittlegreendot.com/wp-content/uploads/2014/08/flowers-330x220.jpg" />

This is to get it to integrate with a template I am using.

However, the getImage() function outputs multiple spans that are throwing off my CSS, as well as the inline-block style which I need to override.

<span class="cn-image-style" style="display: inline-block;"><span class="cn-image cn-image-loading" style="height: 330px; width: 220px;"><img width="330" height="220" action="display" class="photo" alt="Photo of Katharos Organics" title="Photo of Katharos Organics" src="http://ourlittlegreendot.com/marketplace/wp-content/plugins/connections/vendor/timthumb/timthumb.php?src=wp-content/blogs.dir/2/connection_images/katharos-organics_original.jpg&h=140&w=200&zc=1" style="visibility: visible; opacity: 1;"></span></span>

Is there any way to just get the raw URL of the image and output it directly without all the extra cruft?

Thanks,
Ciaran

[Steven Zahm]

@ Ciaran

This is actually a very difficult question to answer because any answer I give you will break your template with the next version release of Connections because all of the image code is changing substantially and using the getImage() function will ensure backward compatibility while updating any “legacy” images to use he new processes.

Right now, you can do this for the image source:

$image = getimagesize( CN_IMAGE_PATH . $entry->getImageNameOriginal() );
$src = CN_IMAGE_BASE_URL . $entry->getImageNameOriginal();
echo "<img width='{image[0]}' height='{image[1]}' src='$src' />";

But this will completely break next release because image file locations are being changed. The constants CN_IMAGE_PATH and CN_IMAGE_BASE_URL still point to the old locations and are only being kept around in order to facilitate the backward compatibility logic which moves the the images from the legacy location to the new location [file/folder structure] auto-magically.

I can give you the new way quite yet because I have at least three core functions to write, which actually will make doing this dead simple.

As for the span tags in the current output, that has to hang around but I’ll have a filter or two that can be hooked into so the output can be changed to anything one could want. That inline style is gone though, moved to the CSS file where it should be.

The purpose of this rewrite is to clean up the ugly image handling/logic code, get rid of dependence on TimThumb and class.upload.php using core WP wherever possible and implement true responsive image support.

I’m about 95% complete with this rewrite. The code is in much, much better shape that it is in now!

[Steven Zahm]

@ Ciaran

Ok, the next release, here are a few examples on how you can get the image meta so you can build your own image tags:

/*
 * Setup the $atts for the type of image you want.
 */

// To get the logo as originally uploaded.
$atts = array( 'type' => 'logo', 'size' => 'original' );

// To get the logo scaled to the size set in the settings.
$atts = array( 'type' => 'logo', 'size' => 'scaled' );

// To get the photo as originally uploaded.
$atts = array( 'type' => 'photo', 'size' => 'original' );

// To get the various image sizes as set in the settings.
$atts = array( 'type' => 'photo', 'size' => 'thumbnail' );
$atts = array( 'type' => 'photo', 'size' => 'medium' );
$atts = array( 'type' => 'photo', 'size' => 'large' );

// To get any random custom size (in pixels).
$atts = array( 'type' => 'photo', 'size' => 'custom', 'width' => 300, 'height' => 150 );

// Pass the $atts to the new getImageMeta() function.
$image = $entry->getImageMeta( $atts );

// Echo out the image tag.
echo "<img {$image['size']} src='{$image['url']}' />";

[Ciaran Lyons]

Hi Steven,

Thanks for the feedback and looking forward to the next release.

I’m okay working with the code snippet you’ve supplied until then – thanks for that.

The next release looks great and much cleaner. If the inline styles are moved and images are responsive that will be a huge win!

Thanks,
Ciaran

[Steven Zahm]

@ Ciaran

For the next version … I do recommend simply using the getImage() function because that’ll output responsive ready as well as retina ready code which I just added yesterday. The code output will be something like this (I don’t expect it to change much before release):

<span class="cn-image-style"><img height="125" width="250" class="cn-image logo" alt="Logo for 08-11 00-test" title="Logo for 08-11 00-test" srcset="http://sandbox.connections-pro.com/wp-content/uploads/connections-images/08-11-00-test/lighthouse-c1ff70f6e405c037dd6401594c87b076.jpg 1x, http://sandbox.connections-pro.com/cn-image?src=http://sandbox.connections-pro.com/wp-content/uploads/connections-images/08-11-00-test/lighthouse.jpg&w=500&h=250&zc=2 2x" sizes="100vw"/></span>

The size is, of course, dependent on what is set on the Connections : Settings admin page under the Images tab.

Another major enhancement is now images will be rescaled anytime the settings are changed. Presently, you have to re-upload an image for the new settings to be applied.

Also, the Crop Modes (presently Ratio) have been improved and they have much, much better descriptors of how each will work. A new crop mode has been introduced as well … a highly requested one … presently, white borders will be added, if needed to ensure the image is scaled to the set dimensions or scaled and cropped to meet the set dimension. The new crop mode allows the image to be scaled, proportionally, down to fit within the set dimension without added any white margin.

[Author]

Posts