Picture Framing my images in WooCommerce/Wordpress

Question

I am a photographer and currently attempting to upgrade my site from a Portfolio of my images to a fully functional E-Commerce site.

I have gotten my head around most of the WooCommerce type things I need to do, and I have an idea of what I want. I feel like I can achieve pretty much what I want.

The big problem I'm having is dynamically picture framing my images for sale.

Some examples of what I want: https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto

https://kenduncan.com/product/docklands-melbourne-vic-vx2101/

Just the ability for me to make a .PNG frame, and have it dynamically added to the background of my images as the variations are selected.

I'm reasonably sure it's a simple coding thing, but I have 0 experience coding.

Any help would be awesome! I couldn't see a simple plugin to do what I want, and I couldn't really see any existing plugin or theme that would add this functionality.

Dan

Answer 1

You don't need to edit the images directly, and I don't recommend it because it requires a lot more work. CSS does the trick!

Since you said you are using woocommerce, I have targeted below the default woocommerce image in the gallery on the single product page.

This is a very basic picture frame - and you can make it a lot cooler if you want it to be (such as a matte)!

.woocommerce-product-gallery__image img { 
     border: 15px solid #666;
     padding: 10px;
}

Add this code to your theme's custom CSS field.

Answer 2

For something like this https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto

You will need some javascript.

1. Upload the frame png and all frame variations to your WordPress site.
2. Give your image class padding of variable size.
3. In the JavaScript code, replace the background image of your image element. Make sure your background is set to no-repeat.

Some CSS tweaking might be needed to get it to look exactly how you want.