Javascript expert

JavaScript
1

Hello!

I bought this plugin for my wordpress site:

http://fancyproductdesigner.com/product/poster/?start_customizing=yes

and I want to round pictures. I mean, if friends upload a photo or use
facebook to add photos, those photos should be round like here:

I dont know how to add this code to the plugin. I’m only familiar with
HTML/ CSS. I thought I may search for “img” tags and add a css code
but It doesnt work for me.

Please if you are an expert have a look !

I cant upload files here, but I found a website which uses the plugin and where you can find the related file: kooga.co.nz/wordpress/wp-content/plugins/fancy-product-designer/js/

2

Have you considered just using CSS border-radius?

3

I tried but I really dont know where. The plugin developer told me to work with the “add element” method but I dont know how to do this.

4

It’s as simple as this:

You could do that to every image, or add a special class to the images it needs to apply to and target that class.

5

@ralphm
thanks! :smile: I’m good in html/css but I really dont know how to combine it with javascript how can I apply that and target that class - thats the problem I have.

What I want is just, when people upload an image or add an image via facebook those images should be round.

and sorry for my english.

6

Ralph just showed you an example using one line of HTML and one line of CSS without any JavaScript at all. You can’t get any simpler than that.

To apply it to more images just give those images the same class.

1 Like
7

There will need to be something unique about the Facebook images so that you can easily target them in CSS. If they had a particular class, that would make it really easy. But if not, there are other options. For example, if the image URLs include the word “facebook”, for example, you could target that with CSS.

So, what do the relevant img elements look like? Can you show some examples?

8

hello felgall,

thanks for the support! It seems to be easy but I still dont know how to do it. Maybe I couldnt explain exactly what I want.

  1. The Plugin for Woocomerce I purchased is this one:
    fancyproductdesigner.com/product/t-shirt/
    http://fancyproductdesigner.com/product/iphone-case/?start_customizing=yes

It is a product designer. People can add own pictures (either upload it or use facebook).

  1. I’m using the Plugin just to create a collage
    But the pictures uploaded should be round! Like here:
    http://www.alchemyandice.com/images/T/25mm-Circle-Collage-I-b.jpg

I hope now you know what I mean. And maybe you can tell me what you mean by “To apply it to more images just give those images the same class.” I’m really new to javascript!

9

What I am trying to say is get a shovel, dig a hole, throw JavaScript in there and fill in the hole. You don’t need JavaScript for this.

People will upload images to you site. They will look something like this:

<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">

If you want them to look round, just add one simple line to your CSS file. (No JS needed!)

Now, you may not want all images on your site to look round, so in that case, you’ll have to target just the uploaded images. How? You could do it just with CSS (no JS!—remember, it’s in a hole). But you need a way to target just those images. If they have a unique class, that would be great—but we don’t know if they do, because you won’t tell us. Or maybe they have something unique in their URL. Again, we need to know to be able to help with the CSS.

10

where the hell are those html-tags :smiley: :smiley: :smiley:
If I use firebug and try to catch the uploaded image I get something with canvas!

11

Ah, if canvas is involved, then that’s a different situation. Personally, I’d look for a backend uploading system that added the images to your HTML, but I guess that’s up to you.

Perhaps post a demo to a page that has the images in place. Then perhaps the JS guys can suggest what to do next. :slight_smile:

12

Its not possible to have the images in place. You have to upload them on your own :smiley:

So where are the JS guys! I lost my shovel :smiley:

13

Is there no way to use CSS to target the <canvas> tag?

14

It’s more about targeting what’s in it, which you can’t do with CSS.

@hello2—I see the first link you posted in your original post links to the plugin page, which is effectively a demo. It’s a pity it doesn’t come with any documentation.

Have you looked for other WP add-ons that don’t involve canvas? I think it would give you a lot more options.

15

Ralphm if you look at what that plugin does it is an interactive product customizer heavily reliant on JavaScript for behavior. Using canvas is a very smart option for what it does. Behind the scenes fabric.js is used which appears to be well known canvas manipulation api. Fabric js seems perfectly suited for this.

16

Yeah, I’ve been looking at the JS. I had originally pictured users just uploading images, but clearly there’s a more elaborate need here. Just wasn’t quite clear from the beginning. It certainly would need to JS customization to set the images to look round.

Maybe the likes of @Paul_Wilkins @felgall @James_Hibbard have some suggestions here.

1 Like
17

difficult now? :confused:

18

I’m not familiar with that plugin nor fabric but from what I gather the event system in fabric could be used to do this. When the canvas is created you would add an event listener for object:added that applies rounded corners to images. The practicality of this approach would also be dependent on how/if the wp plugin itself provides a means of intercepting fabric when a new instance is created. Perhaps you could ask the plugin author whether there is an event that allows you to modify fabric canvas when it is instantiated within the wp plugin js code. There might also be a better means of doing this via the wp plugin itself rather than interacting with fabric js. Though I can only go off the documentation that is freely available to the public. Does that plugin have any documentation in terms of internal events or how it interacts with fabric?

20

I dont know how javascript or fabric.js works. Maybe this helps:
http://fancyproductdesigner.com/faqs/

21

I took a gander at the source code for the plugin js. I found an event that gets triggered from the plugin itself when an element is added.

$elem.trigger(‘elementAdded’, [fabricImage]);

So the next step is to figure out what $elem represents and if you can apply your own custom event listener to apply the rounded corners when an image from facebook is loaded.