Join This Group

Patterns By Type

Created Jul 1, 2010

Patterns By Type

267

Colors

1,677

Palettes

4,866

Patterns

140

Conversations

573

Lovers

CL tutorials & Patterns templates by type

Keywords (for group search): tutorial, how to, how can, seamless, image, video, embed, pattern search, tip, trick, HTML, help, badge, where is, find, Tutorials, Beginner's guide

NB: Please do not submit stuff not related to this place - Your pattern templates - those you designed - are welcome - using the group checkbox (1 example is better for me!)

How to images to groups

Showing 1 - 8 of 8 Comments

ycc2106

Step by step how to post photocopa images to groups



On this page:
1 ) Go to the big image

2 ) Get the direct image URL

3 ) Paste the image link

4 ) make sure the image will not be bigger than the available space

5 ) Adding a border

4 ) Adding pattern previews

Video tutorial

Example:
Self_Slap_[APC]


Remember:
You can always edit or delete your comments and start over



Related:
>> More image tutorials
>> PHOTOCOPA
>> BASICS
>> How to get an unnamed photo into PHOTOCOPA
>> How To Edit PHOTOCOPA palettes

>>COPASO

>> BACK TO INDEX of TUTORIALS

ycc2106


4) To be sure the image won't be bigger than the available space, inside the img tag copy :


This means: shrink the image, only if it's larger than the available space (*)

or if you wish smaller, change the number 100% to 90%, 80% ...
(80% means: do not display the image bigger than 80% of the available space)

Result should look something like this


<img style="max-width:100%"
src="http://static.colourlovers.com/images/photocopa/9/97/97673/m.jpg" />



Example, image set to style="max-width:50%"


* style="width:50%", without the 'max', means display the image 50% of the available space, even if the original image is smaller - hence if the image is smaller it will be enlarged, losing resolution/quality.

ycc2106


5) To add a border, copy the below inside the img tag


This works only at CL, we're using CL's website's style

Result should look something like this


<img style="max-width:100%" class="photo-border"
src="http://static.colourlovers.com/images/photocopa/9/97/97673/m.jpg" />



Example, image set to style="max-width:50%" with border


This means: shrink the image, only if it's larger than the available space)

ycc2106


The above can also be used for adding pattern previews

Example:
1000cranes_For_Japan

I added


Code of the image looks like


<img style="max-width:30%;" class="photo-border"
src="http://colourlovers.com.s3.amazonaws.com/images/patterns/1436/1436931.png" />



Pattern preview image can be found in the sidebar of the pattern page


Group Members