Custom Image Size

[Anonymous]

Hi Franky,

I’ve added custom image sizes to my site using the WordPress add_image_size() function.

Is there a way to get these images without doing a regex on the result of the value returned from #_EVENTIMAGEURL which is only way I can think of doing it?

For example, the get_the_post_thumbnail( $post_id, $size, $attr ) function can be used to call any image according to the value of $size

I have post thumbnails but also a custom image size for event thumbnails and would like to access these somehow.

eg: get_the_post_thumbnail( $post_id, ‘event_thumbnail’);

Hope that makes sense?

Ref:

http://codex.wordpress.org/Function_Reference/add_image_size

http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

[Franky]

#_EVENTIMAGEURL is for specific images that really are there, not WP-resized versions of it. Those can be used inside the event details of course.

But, if you know the size of the image you want, you can just use that:

<img src="#_EVENTIMAGEURL" width=... height=...> (omit the height if you want it to be resized by the width value automatically)

Of course: wp-resized images are also stored on the site, so if you know the url: just use that, no?

[Anonymous]

I know about doing it that way, but I’ll often get people uploading images that may be > 1000 pixels wide and rectangular and all I want is a 75 x 75 or 100 x 100 pixel thumbnail. If I use the HTML attributes to resize it then it’s loading an un-necessarily large file which will often get distorted.

I’ll have a think and post the code back on here if I get it working…

[Franky]

In the add_image_size link you provided, there’s merntioning of a plugin called ‘simple image size’, maybe that can help you?

[Anonymous]

That’s not what I’m looking for.

Wordpress is already creating all the images for me.

What I’d like to be able to do is something similar to the following:

My WP functions.php has the following custom images set:

add_image_size(‘Home_Slide’, 615, 410, TRUE);

add_image_size(‘Home_Sub_Feat’, 300, 170, TRUE);

add_image_size(‘Thumb1’, 100, 100, TRUE);

add_image_size(‘Thumb2’, 150, 150, TRUE);

add_image_size(‘Home_Feat’, 147, 82, TRUE);

add_image_size(‘Square’, 110, 110, TRUE);

add_image_size(‘Mini Square’, 70, 70, TRUE);

add_image_size(‘Related’, 90, 70, true );

WordPress takes the original image, creates new ones and adds a suffix relating to the dimension such as:

Original file:

http://plainandsimple.tv/wp-content/uploads/2013/08/ableton-push-notes-and-chords-01.jpg

Resized files:

http://plainandsimple.tv/wp-content/uploads/2013/08/ableton-push-notes-and-chords-01-70×70.jpg

http://plainandsimple.tv/wp-content/uploads/2013/08/ableton-push-notes-and-chords-01-147×82.jpg

http://plainandsimple.tv/wp-content/uploads/2013/08/ableton-push-notes-and-chords-01-300×170.jpg

I’m thinking of taking the value of #_EVENTIMAGEURL and using a regex to change it to the appropriately re-sized image.

What would be much easier would be if I could use something like: #_EVENTIMAGEURL_Thumb1, #_EVENTIMAGEURL_Thumb2, etc.

Hope I made more sense this time.

Thanks

[Franky]

Ok, got it. But in the same add_image_size link, there’s also mentioning of how to integrate your custom sizes with the media library. if you do that, you should be able to select those, since the event iomage uses the media library as well.

[Anonymous]

Yeah I guess so.

I’m thinking of having a smaller thumbnail on the events page and then the larger image on the single event page.

I’ll see what I come up with and post on here…

[Anonymous]

Ok – I’ve hacked something together and come up with this:

<?php

// Setup Images

$thumb = "-100x100"; // 100 x 100 pixel thumbnail

$feat = "-300x170"; // 300 x 170 pixel featured image

$filename = "http://plainandsimple.tv/wp-content/uploads/2013/07/16thaugust-1374162395.jpg"; // Filename for testing purposes - should use #_EVENTIMAGEURL

$abs_filename = str_replace("http://plainandsimple.tv/", "/var/www/vhosts/plainandsimple.tv/httpdocs/", $filename); // Add path

$suffix = strrpos($filename, '.'); // Find position of the last dot to insert suffix before fit extension

$img_thumb = substr($filename, 0, $suffix) . $thumb . substr($filename, $suffix); // Add suffix to URL

$img_feat = substr($filename, 0, $suffix) . $feat . substr($filename, $suffix); // Add suffix to URL

$abs_suffix = strrpos($abs_filename, '.'); // Find position of the last dot to insert suffix before fit extension

$abs_img_thumb = substr($abs_filename, 0, $abs_suffix) . $thumb . substr($abs_filename, $abs_suffix); // Add suffix to Path

$abs_img_feat = substr($abs_filename, 0, $abs_suffix) . $feat . substr($abs_filename, $abs_suffix); // Add suffix to Path

if (file_exists($abs_img_thumb)) {

echo "<img src=" . $img_thumb . ">";

} else {

echo "<img src="http://plainandsimple.tv/wp-content/uploads/2013/07/Defected-in-the-House-@-Ministry-of-Sound-100x100.jpg">";

}

if (file_exists($abs_img_feat)) {

echo "<img src=" . $img_feat . ">";

} else {

echo "<img src=" . $filename . ">";

}

?>

Any suggestion on how to hook this into the plugin?

I’m assuming I add a new placeholder around line 1157 of events-manager.php

How could I make it future proof so that it works after upgrades, etc?

Thanks

[Anonymous]

BTW – that’s not how I would use it on the actual site.

I’ve just demonstrated that passing (what would be) the #_EVENTIMAGEURL value, I can get some of the custom image sizes that I have to get a thubmnail for the events_list page (with a fallback image) and also the featured image (custom size) or uploaded image for the single event page.

[Franky]

Sorry, this got lost a bit.

In stead of doing this, why not just integrate your custom sizes with the media library and then use one of those custom sizes for the event image?

[Anonymous]

I already am doing that, as I said earlier:

My WP functions.php has the following custom images set:

add_image_size(‘Home_Slide’, 615, 410, TRUE);

add_image_size(‘Home_Sub_Feat’, 300, 170, TRUE);

add_image_size(‘Thumb1’, 100, 100, TRUE);

add_image_size(‘Thumb2’, 150, 150, TRUE);

add_image_size(‘Home_Feat’, 147, 82, TRUE);

add_image_size(‘Square’, 110, 110, TRUE);

add_image_size(‘Mini Square’, 70, 70, TRUE);

add_image_size(‘Related’, 90, 70, true );

But I don’t see how I can pick the thumbnail for the events_list shortcode and a different size for the single event page.

[Franky]

Well, as said on http://codex.wordpress.org/Function_Reference/add_image_size there’s a topic that reads “Using the New Image Sizes”, subtopic “For Media Library Images (Admin)”.

If you do that, you should be able to just upoad your image and then choose from the media lib the image with the correct size (bot the featured image and the single event use the media lib for images). I still need to try this myself of course.

[Franky]

Hmmm … it doesn’t seem to be working as expected …

[Anonymous]

Sorry Franky – I think I’m completely missing something here so please let me know where I’m being stupid! 🙂

The featured image can be accessed using the following EME Placeholder: #_EVENTIMAGEURL or #_EVENTIMAGE

If I was using a wordpress post, I could use <?php the_post_thumbnail( $size, $attr ); ?> to get my custom sizes, but how do I associate the event with the media library.

This was why I assumed the only way would be to take the #_EVENTIMAGEURL placeholder and change it.

[Franky]

I was hoping that using the filter in the link I mentioned, it would add custom sizes to the images upon selecting them. But it doesn’t seem to be the case …

But I don’t see an easy way of implementing your stuff generically as well …

[Anonymous]

Hi Franky,

I managed to achieve what I wanted to do by adding the following to line 1157 of events-manager.php:

} elseif (preg_match('/#_EVENTIMAGETHUMB$/', $result)) { // Add custom thumbnail filter

if($event != '') {

$pstv_thumb = preg_replace('/(.gif|.jpg|.png)$/', '-70x70$1', $event);

$replacement = "<img src='".$pstv_thumb."' alt='".eme_trans_sanitize_html($event)."'/>";

}

Unfortunately I’m having to hard-code in my image dimensions.

I’m trying to come up with a way to do this but I guess only if you can see it becoming an addition to the plugin, please?

In case it’s not clear, what I’m trying to achieve is to have a single image uploaded to each event and show a smaller thumbnail on the events list page and then the larger full size image on the single event page.

Similar to here: http://www.residentadvisor.net/events.aspx?ai=13&mn=9&yr=2013&dy=1&v=week

TIA

[Anonymous]

In fact, this would work:

http://codex.wordpress.org/Function_Reference/get_intermediate_image_sizes

function list_thumbnail_sizes(){

global $_wp_additional_image_sizes;

$sizes = array();

foreach( get_intermediate_image_sizes() as $s ){

$sizes[ $s ] = array( 0, 0 );

if( in_array( $s, array( 'thumbnail', 'medium', 'large' ) ) ){

$sizes[ $s ][0] = get_option( $s . '_size_w' );

$sizes[ $s ][1] = get_option( $s . '_size_h' );

}else{

if( isset( $_wp_additional_image_sizes ) && isset( $_wp_additional_image_sizes[ $s ] ) )

$sizes[ $s ] = array( $_wp_additional_image_sizes[ $s ], $_wp_additional_image_sizes[ $s ], );

}

}

foreach( $sizes as $size => $atts ){

echo $size . ' ' . implode( 'x', $atts ) . "n";

}

}

list_thumbnail_sizes();

// thumbnail 150x150

// medium 300x300

// large 1024x1024

[Franky]

Well, I could add this code:

} elseif (preg_match('/#_EVENTIMAGETHUMB$/', $result)) { // Add custom thumbnail filter

if($event['event_image_url'] != '') {

$pstv_thumb = preg_replace('/(.gif|.jpg|.png)$/', '-70x70$1', $event['event_image_url']);

$replacement = "<img src='".$pstv_thumb."' alt='".eme_trans_sanitize_html($event['event_name'])."'/>";

}

and add an extra setting to define the thumb dimension. How’s that?

[Anonymous]

That would work, however you would need to replace ‘-70×70$1’ with the setting value for the thumb dimension.

Also I would only suggest allowing a value that has already been defined using add_image_size()or the default wordpress sizes.

[Franky]

Like the list_thumbnail_sizes() function you posted above 🙂

I’ll try to incorporate it. Of course: I accept patches as well, so if you want to create a patch …

[Anonymous]

Ok I’ll have a go.

Like I’ve said before, I know enough about writing php to be dangerous!

Can you point me in the right direction for adding a setting field in the settings page and I’ll try and do the rest.

Thanks

[Franky]

See eme_settings.php:

– to register the new option when activating the plugin: add a default in eme_add_options(), and add it at the end of the list in eme_options_delete() to delete the option upon plugin removal.

– to update the changed value, add it to the correct “tab” in the function eme_options_register().

– to show (and change) the value in the admin, add it to the correct “tab” in the function eme_options_page(), use the function call eme_options_select() to create your dropdown.

[Franky]

Any luck on this? I would like to release the next version, but if your patch arrives on time I can still include it.

[Anonymous]

Hi Franky – unfortunately I’m on holiday at the moment so this will not be possible until later this month or early October.

Thanks

[Franky]

No worries, I already implemented it 🙂

[Franky]

Btw, it took a whole lot more coding that I thought, since the images can be cropped or not. So just adding the size to the name of the image doesn’t work as expected in most cases. Anyway, it’s done …

[Anonymous]

Hi Franky,

So now I can access the image and thumbnail defined in the settings.

Would it be possible to access other sizes? Something like:

#_EVENTIMAGE

As said previously, I use all the following sizes in certain parts of the website for posts and would like the same functionality for events:

add_image_size(‘Home_Slide’, 615, 410, TRUE);

add_image_size(‘Home_Sub_Feat’, 300, 170, TRUE);

add_image_size(‘Thumb1’, 100, 100, TRUE);

add_image_size(‘Thumb2’, 150, 150, TRUE);

add_image_size(‘Home_Feat’, 147, 82, TRUE);

add_image_size(‘Square’, 110, 110, TRUE);

add_image_size(‘Mini Square’, 70, 70, TRUE);

add_image_size(‘Related’, 90, 70, true );

Thanks

Tom

[Franky]

Sure, but open a new feature request for this.

[Author]

Posts