How to add custom frame to pictures?

Ask the community
,
1

Hello everyone,

I would like to add custom frames to my images.

Unfortunately, the editor only allows you to add borders, shadows, or preloaded textures or pins.

2

Hi Stefano,
Are you talking about using the htmlComponent element ?

3

Like —> JALNband <— already assumed, you won’t be able to achive such a functionality by using the wix-element → “IMAGE”.

You will have to use either a CUSTOM-ELEMENT or (a little bit easier way)—> a HTML-Component (iFrame), to be able to get your functionality.

You can’t do it directly by the usage of given wix-elements (at least i don’t see any way to do it so).

So —> YOUR SOLUTION —> HMTL-COMPONENT / CUSTOM-ELEMENT

Note: This will only work on PREMIUM-WIX-WEBSITES !!!

4

Thanks Velo-Ninja and JALNband, I’m trying to figure out what it is.

Yes, I have a premium wix site.

I’m a photographer and would like to add nice frames to my photos on my print sales pages. I have some custom frame png and would like to add them dynamically (my photos are stored in a database).

Thanks for your help.

5

I think I should use this if I understand correctly:

6

Yes… As @russian-dima said, This way is possible… And your project seems to be very specific…
You’ll have to built an outside html and css structure, javascript functions for dynamic part, to add this all using htmlComponent send and get messages…

A beautiful bet!!!

7

Paste this code into your HTML-Component save it and run the preview…

<body>

<style>
	html {
    height: 100%;
}
body {
    background-color: #543;
    background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
                                                    hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
    background-image:    -moz-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
                                                    hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
    background-image:     -ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
                                                    hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
    background-image:      -o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
                                                    hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
    background-image:         linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
                                                    hsla(0,0%,0%,.02) 50%, hsla(0,0%,0%,.02) 100%);
    background-position: 50% 50%;
    background-size: 20px 20px;
    box-shadow: inset 0 0 300px 30px hsla(0,0%,0%,.6);
    min-height: 100%;
    padding: 300px 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
a {
    display: block;
    height: 300px;
    margin: 0 auto;
    position: relative;
    width: 400px;
}
img {
    background: #a6a6a6;
    height: 300px;
    width: 400px;
}

/* Frame */

a {
    border: 1px solid #111;
    box-shadow: inset 0 2px 0 -1px hsla(0,0%,100%,.2),
                inset 0 50px 50px -30px hsla(0,0%,0%,.6),
                inset 0 150px 150px -30px hsla(0,0%,100%,.3),
                inset 0 0 5px hsla(0,0%,0%,.6),
                inset 0 0 0 9px #111,
                0 0 5px 1px hsla(0,0%,0%,.3),
                0 6px 6px -3px hsla(0,0%,0%,.3);
    padding: 9px;
}
img {
    box-shadow: 0 1px 0 hsla(0,0%,100%,.2),
                0 0 1px 1px hsla(0,0%,0%,.6);
}

/* Just for looks! */

a:after {
    background: #555;
    border-radius: 6px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.3),
                0 1px 2px hsla(0,0%,0%,.6);
    content: '';
    height: 6px;
    left: 50%;
    margin-left: -3px;
    position: absolute;
    top: -134px;
    width: 6px;
}
a:before {
    border: 1px solid #222;
    border-radius: 3px;
    box-shadow: inset 2px 2px 2px hsla(0,0%,0%,.3);
    content: '';
    height: 250px;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
    z-index: -1;
    -webkit-transform: rotate(45deg) translate(0px, -117px);
       -moz-transform: rotate(45deg) translate(0px, -117px);
        -ms-transform: rotate(45deg) translate(0px, -117px);
         -o-transform: rotate(45deg) translate(0px, -117px);
            transform: rotate(45deg) translate(0px, -117px);
}
</style>

<a href="javascript:void(0)"><img src="http://dribbble.com/system/users/40713/screenshots/307037/geomtetric_art.jpg?1320138176" alt="snap"></a>

</body>

Normaly you should get a code-generted Frame for a picture…
The code was not written by my own, i just show an example whats possible…

914×837 55 KB

You will need a bunch of code, to generate your wished function.