[Plugin: ReciPress] Insert image not working

I had the same problem. I think there’s a jQuery error going on in the back.js file, but after a few hours of fiddling the code I managed to get it working.

Replace your js/back.js file in plugin directory with the full code added here: https://pastebin.com/5cbKakpb and it should work

Are you getting this with the recipe image upload, or the instruction upload? I’m not able to reproduce the error.

The images for instruction step. Running latest WP. It was giving errors around line 21 of back.js – wasnt able to grab the img elements from the HTML data string. Fixed with:

var data = jQuery(html).filter(‘img’);
imgurl = data.attr(“src”);
classes = data.attr(“class”);

I’m now able to upload images, but i had to put concatenate_scripts to ‘false’ in wp-config.php to make it working.

however, some bugs still remains: recipress embeds the full-size image even if i ask to put on the thumbnail and it doesn’t work if i try to embed a file from an external url rather than from media gallery.

that’s particularly very annoying to me, since i have a multisite wp installation for italian and english version of my blog (https://www.cookspot.it and https://www.cookspot.it/en). I have to upload the same images twice

reagrding the fullsize image problem, i fixed that using the following css (adjust for your sizes obviously)

/* Change to the width of your post section, this refers to the step pictures */
#recipress_recipe.recipress-recipress img {
width: 450px ;
height: auto ;
margin: 10px 0 ;
}
/* Assume thumbnail size of 150px for first image in recipe */
#recipress_recipe.recipress-recipress img.wp-post-image{
width: 150px;
height: auto;
margin: 10px 0;
}

Interesting solution with the concatenate_scripts thing. Never heard of that.

@jamesbruce,

your css workaround is great, i’ll apply asap!

btw, it’s just, as i said, a workaround, since the full-size image will still be loaded, with poor performance, and css resize gives poor results, i’m afraid.

@tammy,
imho it’s a highest priority fix to handle ^^

kind regards,
gabriele

The initial image loaded is the full size, but when you return to the page, it loads the medium version. Medium is used instead of thumbnail so that it renders the same proportion.

I haven’t considered other fies for this, but I’m putting it on my to-do list.

Thanks for the help, guys, that js error was eluding me somehow, but your solution worked great. I’m including these fixes in my 1.9 commit now:

= 1.9 (Janury 31, 20120) =
* fixed image uploader js
* added $type to recipress_terms()
* fixed widget constructors
* fixed get_term_link
* added de_DE lang
* fixed load_plugin_textdomain
* fixed meta box Ingredients description to use sprintf

Awesome! That fixed the image upload problem, however I’m still having an issue with image size when embedded with a step in the instructions. Please see the image attached to step 2 in this post for an example: https://norecipes.com/blog/2012/01/22/beef-rendang-recipe/

I selected “medium (200 x 301)”, as the size, but instead it’s showing the full sized 600×902 image.

Also, the “Add Media” dialog box in WordPress usually has a “gallery” tab that shows only the images associated to that post. The dialog that shows up when I click “upload image” in ReciPress only has “From Computer”, “From URL” and “Media Library”. It’s not a big deal for recent posts since the most recent images show up first in the Media Library, but I’m planning on going though and retrofitting about 500 posts with ReciPressed recipes. This means I’ll either need to go dig up the original photos for older posts and re-upload them (a waste of disk space), or I’ll have to go through hundreds of pages of images in the Media Library to find the ones for that post.

Yeh, me too. Tammy, it’s definitely not using medium right now. I had this problem on another site though, when trying to pull medium size image, so I dont think theres anything wrong with your coding as such. It might be best to eventually add a custom resizing method, and the images used inside the recipe may be smaller than user set medium size anyway. CSS workaround is fine for now, I think, though inefficient.

Tammy, it’s great to see you’re so pro-active as a developer here. Can’t wait to see the pro version! By the way, I’ve written up an article highlighting the plugin at MakeUseOf.com – it’ll be published in a week or so I think. Once it’s a tiny bit more developed, I’d be happy to add it to our Best of WordPress Plugins page too, and the pro version of course.

@marc: Oh, I see what you mean now. I thought you were referring to the image in the meta box, but you’re talking about the actual recipe output. The way the media uploader works, I’m purposely saving the ID of the image instead of the url, so changing the size when you upload the image won’t affect the image that is saved. But In the 1.9.1 update I just sent out, I’ve added an option to the options page to select whether to output thumbnail, medium, large, or full size photos with ingredients.

@james: Thanks for the mention and the compliments!

Thanks for the quick update Tammy! After updating to 1.9.1. the gallery did indeed show up, but when I try to insert the image into instructions or as the post image, the dialog box goes blank (same problem as before). I tried applying James’ fix, which fixes the insertion problem but then the gallery change gets reverted.

Marc,

I’m really not sure what to say, because it works in all my testing. Have you checked console to see if you’re getting any javascript errors? perhaps there’s a conflict somewhere. Here’s a screencast of it working for me:

https://screencast.com/t/C5btLP4cztX

Hi Tammy, here’s the javascript error I’m getting in console:

Uncaught TypeError: Cannot call method ‘replace’ of undefined
jQuery.click.window.send_to_editorback.js:25
(anonymous function)

Marc, in back.js try changing line 22 from this:
img = jQuery('img',html);

to this:
var img = jQuery(html).filter('img');

And let me know if anything changes.

Thanks for the quick response Tammy! That fixed the the problem with the dialog box going blank. When I try and add an image to a step though and select a smaller size (such as thumbnail or medium), it seems to respect my choice in the admin interface (the thumbnail shows up as a 1:1 ratio image if I select “thumbnail”), however in the post itself, it’s showing up full size.