WordPress eStore and NextGen Gallery Integration to Create Digital Photo Store

Categories: Blog Setup, Wordpress Plugin

WordPress eStore and WordPress Paypal Shopping Cart Plugins can now be integrated with the NextGen Gallery Plugin to create a Digital photo store similar to the demo given below:

[View with PicLens]

Blue Tenticle
Price:1.00

Ice
Price:1.00

Urban
Price:1.00

Arcane Circle1
Price:1.00

Arcane Circle2
Price:1.50

Retro Blue
Price:1.50

Space Infinity
Price:2.00

Retro Pink
Price:1.00

Purple Twillight
Price:2.00

Retro Blude
Price:2.00

Space
Price:2.00

Teal Twilight
Price:2.00

The Shopping cart will appear below this line when you add an item to the cart. The shopping cart can also be found on the sidebar.

The images have been resized to 800×600 resolution using the NextGen Gallery resize utility. An watermark has also been applied to the image using the NextGen Gallery ‘Effect’ option to prevent stealing. Once the purchase is complete the encrypted download link for the original image (1920×1200 resolution and no watermark) is emailed to the buyer.

Just to clarify… You don’t necessarily have to sell digital photos to use the gallery. You could be selling anything and still use the Gallery as a means of displaying the products where each thumbnail is the icon of the product you are selling.

How to Integrate NextGen Gallery and WordPress eStore Plugins

What Plugins do you need?

You will need the WordPress eStore v1.4 or above and NextGen Gallary Plugins. This guide assumes that you have used NextGen Gallery Plugin and know how to use it. If you don’t know how to use NextGen Gallery then I suggest you read the ‘Readme.txt’ file that comes with the NexGen Gallery plugin or try the NextGen Gallery forum

What NextGen Gallery Modification is needed?

We are going to use a custom template file for the NextGen Gallery to display the shop:

Download the WP eStore template file for NextGen Gallery from here.
Unzip and upload the ‘gallery-wp-eStore.php’ file to the ‘view’ folder of the NextGen gallery plugin directory (nextgen-gallery/view/gallery-wp-eStore.php).

Displaying the Gallery

Use the following tag to display the Gallery in a post or page.

Given the gallery id is 1. Using the ‘template=wp-eStore’ option will show captions underneath each thumbnail image where you can display the ‘Add to Cart’ button and a little bit of other details/description of the image.

Adding the ‘Add to Cart’ Buttons below the Image Thumbnails

1. Go to ‘Manage Gallery’ from the NextGen Gallery settings menu and choose the Gallery that you want to turn into a shop.

2. Now in the ‘Alt & Title Text / Description’ field of every image enter the Image details (name, price etc) and the trigger text for the ‘Add to Cart’ button of that image. It should look similar to the following example:

nextgen_wp_estore_integrate_desc_field

In the above example the Product id of the Photo is 4 which I have configured from the ‘Add/Edit Products’ menu of the WordPress eStore plugin. “<br />” is a HTML code to insert a line break so the name, price and the button doesn’t come in one line.

3. Do the same for all the images in the gallery.

4. Save the Changes to the Gallery and Now your Gallery will look similar to the demo shown at the start of this Page.

What Happens When You Upgrade the NextGen Gallery Plugin?

After you upgrade the NextGen Gallery, you need to put the WP eStore Template file back in the ‘view’ directory (nextgen-gallery/view) and all done.

This is because, when upgrading, WordPress completely deletes the folder of the plugin that is being upgraded then downloads the new version. So the previously uploaded WP eStore template file gets deleted in the process.

The WordPress eStore Plugin can be found in the WordPress eStore Plugin Page. All WP eStore related documentation can be found on the WP eStore Documentation Site.

Tags: Blog Setup, NextGen Gallery, WordPress eStore, Wordpress Plugin

Similar posts that you may like

#1 by Alex on March 30, 2009 - 10:28 am

Hello Admin,

You re the best !!!.
Best,

Alex

#2 by Chris on March 31, 2009 - 2:37 pm

Hi, any chance of automating the part where you have to fill out the details for each images? So you could tell it to make those changes to a folder of images? Thanks

#3 by admin on March 31, 2009 - 4:45 pm

Hello Chris, Yes I am in the process of implementing some automation… but you won’t get that until I finish the work and release the next version.

#4 by Superfist Funk on April 1, 2009 - 9:03 am

You number 1 – “the best” is not enough

#5 by admin on April 1, 2009 - 6:13 pm

LoL… I am flattered

#6 by Alex Rabe on April 2, 2009 - 2:49 am

You can also add a custom column via your plugin, where you can enter the price. If you need help, contact me by mail

#7 by admin on April 2, 2009 - 3:21 am

Hi Alex Rabe, Thanks for the suggestion… it would be really nice if I could add a custom column via my plugin. I will do a bit of Googling around to see if I can find something on “how to add custom column in NextGen Gallery” before I knock on your door. You created quite a nice plugin so there are a lot of help around

#8 by Nazmul on April 7, 2009 - 9:07 am

Admin, do you have any idea when you are likely to have the latest version ready?

Nazmul

#9 by admin on April 7, 2009 - 6:20 pm

Hi Nazmul, What do you mean by the latest version? I will always be adding more features to the plugin as time permits and releasing new versions. So there is always a latest version

#10 by Pyro Chue on April 13, 2009 - 4:49 am

hi admin, what is the php code for this –> [nggallery id=1 template=wp-eStore]?

#11 by admin on April 13, 2009 - 5:01 am

There is no php code for [nggallery id=1 template=wp-eStore]

That’s a trigger text to show the NextGen gallery in your posts and pages. If you tell me what you are trying to achieve then I might be able to give you some pointers.

#12 by Govi on April 15, 2009 - 12:34 pm

Is the nextgen plug in free?
How much time it may take to integrate nextgen?

#13 by admin on April 15, 2009 - 8:11 pm

Hi Govi, Yes the NextGen Gallery Plugin is free. The integration doesn’t take extra time… you just put the trigger text for the ‘Add to Cart’ button when you setup your Gallery in the NextGen plugin then just show the gallery from your post or pages using the tag described in the “How to Integrate NextGen Gallery” section of this post.

#14 by Dana on April 25, 2009 - 11:31 am

Hi – Do you know how to remove the white picture borders from the NextGen eStore template? – Thanks!

#15 by admin on April 25, 2009 - 9:15 pm

@Dana, The style of how the picture appears is controlled by the NextGen gallery CSS not the eStore template file. For example, you can open the ‘nggallery.css’ file (nggallery->css) and modify the ‘ngg-gallery-thumbnail’ div definition to change how the thumbnails appear.

#16 by Dana on April 27, 2009 - 12:52 pm

Thank you for your help in locating that, much appreciated!

#17 by nonu on April 30, 2009 - 9:15 am

Hi i have integrated wordpress plugins nextgen and wp-estore. As shown in the link http://64.34.170.31/~a1pro/bride/ of the front page , and when we click on the add to cart button it is possible or not to redirect the image with its description and price on a another page with add to cart button when user clicks the add to cart button on the redirected page the product will we added to the cart

Thanks and regards:
Nonu_Ind

#18 by satish on April 30, 2009 - 1:23 pm

Hi,
I am facing a problem in my project,i am creating a wordpress based shopping cart.For this i have pluged wp-estore plugin and nextgen gallery plugin,i also integrated both the plugins. gallery imgages are being displaying on the post and shopping cart also displaying on the sidebar with paypal.
The problem is that ,i want when user click on the image displayed on the post area , then that image should display on the next page with add to cart button and then that transfer to cart if user want to purchase it.please help me to solve this problem.

#19 by admin on April 30, 2009 - 9:43 pm

@Nonu & Satish, I cannot find your email address in my database showing that you have paid for the WP eStore plugin. I have a feeling you are using my Simple PayPal Shopping cart plugin. If that’s the case then please leave comment on the PayPal shopping cart plugin post.

#20 by Jason on May 7, 2009 - 2:44 pm

I must be a total tard because I can’t seem to find a plugin called “Wordpress eStore”

Ummmm can someone please point me in the right direction?

Thanks!

#21 by admin on May 7, 2009 - 9:38 pm

@Jason, Do a Google search with ‘Wordpress eStore’ and see what you get

There is a link to the WordPress eStore plugin page at the start of this post. I have also added another link at the bottom of the post too.

#22 by Hayzen on May 7, 2009 - 11:35 pm

Hello! I’ve done a lot of Google searching and found your plugin. I have to say that it looks very appealing. I’ve been considering moving to an eCommerce solution but I think you may have fulfilled what I need, however, I have a couple of questions. I take pictures for parents at their kid’s little league games. My goal is to put up something like the NextGen Gallery so that they can preview an image with a watermark BUT if they add it to the cart and purchase it, they get the full-res version without the watermark. Is this possible? Is there way to disable the right-click on the pictures so that they can not be saved locally? Also, (as an example) if parents purchase 250 pictures, will they receive 250 links or will they get a 1 link zip file? Finally, would I be able to sell different sizes of the pictures for different prices using a drop down menu of sorts. Unfortunately my knowledge of coding websites is not so advanced so I’m doing my best to find an “out of the box” solution. Thank you very much in advance!

#23 by admin on May 8, 2009 - 12:14 am

@Hayzen, You have a few good questions… I will try to answer as much as I can.

Q. My goal is to put up something like the NextGen Gallery so that they can preview an image with a watermark BUT if they add it to the cart and purchase it, they get the full-res version without the watermark. Is this possible?
A. Yes, this is possible. Please see the NextGen Gallery and Buy Now button integration article for details.

Q.Is there way to disable the right-click on the pictures so that they can not be saved locally?
A.Manipulation of the image is controlled by the NextGen Gallery so You will have to contact Alex Rabe (the author of NextGen Gallery) for that. But I don’t think it is a problem even if they can right-click and save the picture as the gallery pictures will have watermarks in them and they are also going to be of low resolution.

Q.Also, (as an example) if parents purchase 250 pictures, will they receive 250 links or will they get a 1 link zip file?
A. You can do both. In general the buyer will receive a link for every product they purchase but you can create a packaged product (eg. zip file with all the 250 or so images) then when someone buys that product they will receive one link for that zip file which contains all 250 or so images.

Q.Finally, would I be able to sell different sizes of the pictures for different prices using a drop down menu of sorts.
A. No, the WordPress eStore plugin doesn’t have built in variation control feature (drop down menu with different sizes). Some users have manually implemented this by modifying the code but I do not plan to implement this as digital products normally do not need variation control.

#24 by Shelly on June 4, 2009 - 4:59 pm

Hey! I have a question just like Nonu up there. I purchased the eStore for a client’s site (honestly, I don’t remember if I used this email address or theirs -so this email address may not be in your database. I can’t remember!). She’s wanting to have what Nonu describes. She wants to use the NextGen gallery widget in the sidebar (or if eStore has one to use that) and when you click on an image, it takes you to the “buy this print” page.

Right now, we’re using NextGen, but when you click the Gallery images, the slideshow pops up (and the [wp_eStore] stuff shows up in the description instead of a “buy now” button) – my client would just like to either click the image in question, *or* have the “buy it” button show up.

if you’d rather answer this question via email (and have me dig up confirmation that I did, indeed buy this) feel free to do so – but I’d love any help you could give in this area.

#25 by Steve_S on June 8, 2009 - 9:59 pm

Positng this again because it’s importanto. Trust me.

HEADS UP!

I’m using this fantastic piece of coding with NextGen Gallery as in WordPress eStore and NextGen Gallery Integration to Create Digital Photo Store. A few moments ago I upgraded NextGen Gallery to the latest of 1.3.1

I was prepared with backups of the old version.

Imagine my surpirse when my cart disapeared. Toast. Gone. byby

looks like we have a conflict to resolve

Not to worry…here is how I fixed it:

Deactived 1.3.1 of gallery
FTP in and overwrote using my old version of 1.2.1 of gallery
Activated

done deal.

#26 by admin on June 9, 2009 - 2:02 am

@Steve_S, upgrading is a very simple actually… after you upgrade the NextGen Gallery, you just need to put the WP eStore Template file back in the ‘view’ directory (nextgen-gallery/view) and all done. You need to put the WP eStore template file again is because, WordPress completely deletes the folder then downloads the new version when upgrading. So the previously uploaded WP eStore template file gets deleted in the process. I will update this post to include this information so people don’t panic

#27 by Steve_S on June 9, 2009 - 2:12 pm

(blush) my appolagies. I forgot about that pesky /view/ folder.

Sorry

Works like a charm. No problem.

Continued best wishes

Steve

#28 by mitch on June 15, 2009 - 10:29 pm

Great job on this. I have a couple questions.

I am currently testing this. I want to get a different add to cart button.. using the above code gives me the default button.

http://www.idwtestrun.info/testing/

I also get the “view with PicLens” above the gallery. I’ve deactivated all the slide show options and plugin on nextgen gallery and wordpress.

any suggestions for both of these?

#29 by admin on June 16, 2009 - 8:54 am

@Mitch, Please Edit the product and enter the URL of the button image that you want to use in the “Button Image URL” field and save the product.

Do the following to remove the “PicLens”

Go to your NextGen Gallery’s options page:

Gallery->Options->General Options

Uncheck the ‘Activate PicLens/CoolIris support’ checkbox and save the settings. That should do the job.

#30 by Paul on June 19, 2009 - 12:03 am

I have a wordpress 2.8 blog with this plugin I just setup last night, the only other plugin setup is Nextgen, and it seams the new Nextgen 1.3.3 will not work with the add to cart option outlined above. It seams to put the code incorrectly as I have a ‘”>’ after the button printed on the webpage, and the button wont work. Anyone have an idea, I have followed the directions described above on a brand new installation.

#31 by admin on June 20, 2009 - 5:14 am

The NextGen 1.3.3 works fine with the WP eStore plugin (I have tested it myself). The problem is probably how you are using the tag. Can you please post a link to the page where you have the gallery so I can see the HTML code?

#32 by Paul on June 21, 2009 - 10:25 am

I have updated to WP 2.8.1 beta 1, and also changed my theme, it is now fixed. It wasn’t the theme change as I did that before the update, something with my WP 2.8 install wasn’t right I guess, as I made no other changes and now it works great, thank you.

#33 by Ramona on July 21, 2009 - 7:05 am

Do you have any idea what’s wrong here: http://www.exclusivtext.de/bluehendes-mallorca-im-januar#more-164. Die fotos are there but not visible in the list view.

#34 by Ramona on July 21, 2009 - 7:55 am

Maybe its a problem with memory limit (no thubs generated), I’ve made the thumbs by hand.

#35 by admin on July 21, 2009 - 4:59 pm

Hi Ramona, I had a quick look at the page you mentioned and looks like everything is working so I am guessing you have figured out the NextGen Gallery thumbnail generation part.

#36 by yoso tattoo on July 21, 2009 - 10:15 pm

on this page http://tattoo.yoso.eu/goodies/tattoo-flash/1001-stars-tattoo-flash-individual-designs-for-sales/

when trying to install it says. “Rendering of template gallery-wp-estore.php failed”

the gallery-wp-eStore.php is nextgen-gallery/view/

any clue?
yoso tattoo´s last blog ..Free affiliate program for Tattoo niche sites! Only for Tattoo lovers! We mean people who really love tattoos! Finally we did it!

#37 by yoso tattoo on July 21, 2009 - 10:17 pm

ok! I found the solution

The template I downloaded from this page was named gallery-wp-Estore.php
with capital E. Simply changed it to gallery-wp-estore.php e in lower case! Working now!
yoso tattoo´s last blog ..Free affiliate program for Tattoo niche sites! Only for Tattoo lovers! We mean people who really love tattoos! Finally we did it!

#38 by yoso tattoo on July 21, 2009 - 10:30 pm

oh my god If I have to go through this process for 200 images! I’ll end up mad

Best if from the next gen gallery.
we could!

1- set the name
2- set the price
3- set the download link
4- set the button image url (ideally for the whole gallery, automatically inserted under each image) not for each image.

also ability to create product categories. I.e. A set of images, or a gallery, can be a product group or category. Let’s my 1001 starts includes 1001 images I can sell! Better to have all of them in a group!

Hope you can work out some of this in your next release

Thanks!
yoso tattoo´s last blog ..Free affiliate program for Tattoo niche sites! Only for Tattoo lovers! We mean people who really love tattoos! Finally we did it!

#39 by admin on July 21, 2009 - 10:34 pm

Hi Yoso, the “Rendering failed” error normally means that the template file you specified is not there or name is incorrect. I am just a little curious as to why the copy you downloaded has a capital ‘E’ cause it shouldn’t. Anyway, looks like you figured out the problem already so it’s all good.

#40 by Ramona on July 23, 2009 - 6:54 am

I’ve created thumbs by handwork. Now my provider has changed memory limit in general. Thanks and greetings!

#41 by Chris Gray on July 25, 2009 - 11:56 pm

Gday

A question before I purchase, the ‘dummies’ tutorial says that each item has to be manually uploaded and pointed to – does that apply when you’re using estore and nextgen together, or is it done automatically?

Having to upload it twice (once to nextgen and then for estore) is going to be too much of a hassle is all.

Thanks!
Chris Gray´s last blog ..Journalism is bipartisan, all else is propaganda.

#42 by admin on July 26, 2009 - 3:36 am

Hi Chris, You don’t necessarily have to upload the photos twice. You can just use the URL of the photo for the NextGen one as your download URL. The reason I mentioned uploading it twice is so you can have a preview version of the photos on the NextGen gallery and upload the real version to a secret folder so no one can rip it off from the NextGen gallery.

#43 by Lynne Robson on July 31, 2009 - 8:25 pm

I am at a loss…I had the nextgen gallery thingg working like a dream with the simple version of the plugin…

then I bought the digital download version and installed it…deactivated the simple version…

but now my add to cart buttons don’t work…

Help! Please…

#44 by admin on July 31, 2009 - 10:22 pm

Hi Lynne, Please keep in mind that the WP eStore and the Simple Shopping Cart uses different trigger text to show the ‘add to cart’ buttons so you will have to update those too. Please give me a little bit more details describing the problem so I can help you fix it (a URL to the page where you have the gallery would help too).

#45 by kevin on August 12, 2009 - 11:24 am

I am having problems with nggallery and estore when I use this embed opption the page thats this is being dissplayed show this Rendering of template gallery-wp-estore.php failed what is wrong im not sure I can use most of the other embeds but I get problems like 2 types of add to cart buttons showing up help pls been busting my brains for 2 days trying every code!

#46 by admin on August 12, 2009 - 5:44 pm

Hi Kevin, it’s because you didn’t put the WP eStore template file in the “view” directory of the NextGen Gallery. Please follow the instructions in the “What NextGen Gallery Modification is needed” section closely and let me know how you go.

#47 by DuzImage on August 13, 2009 - 8:55 am

hi there… love the plugin. I was wondering if it’s possible to create a page/post with different nextgen albums then when you click on one, the gallery opens with the possibility to buy individual items. is there a trigger text to insert in the post to display the albums instead of the gallery trigger: [nggallery id=1 template=wp-estore]
something like [album id=1 template=wp-estore]

thanka a lot
David
DuzImage´s last blog ..Roberto Vigiani – Incindenti in Montagna