Join This Group

Patterns By Type

Created Jul 1, 2010

Patterns By Type

258

Colors

1,677

Palettes

4,857

Patterns

140

Conversations

572

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


1) click on the image below the palette:



This leads to the page with the big image



ycc2106


2) Get the direct link of the image


Right-click ON the image - Depending the browsers, the command names are slightly different:
> "copy image URL"
> "get image link"
> "open image in new tab"...




If you choose 'Open link in new tab' or if you paste the URL you copied in the address-bar, you should see a page with only the image.

Check that the URL ends with .jpg



To copy the link in the address-bar.
1) 1 click in the address-bar should select all (all the text should be highlighted), if your click isn't 'well clicked' use shortcut [Ctrl]+[A] to select all
(hold down the [Ctrl] key and press [A] once)
[Ctrl]+[A] is the shortcut for 'Edit > Select All' of your browser's menu.

2 ) then use the keyboard shortcut [Ctrl]+[C] to copy
(hold down the [Ctrl] key and press [C] once)
[Ctrl]+[C] is the shortcut for 'Edit > Copy' of your browser's menu.

ycc2106


3) Paste the image in the comment






Step by step explication:
... and click on 'Insert image
Image and video hosting by TinyPic


3) a popup box will appear - paste the image address (URL)
Image and video hosting by TinyPic
To paste either, use the paste function of your browser or the keyboardshortcut Ctrl+V

4) Click OK and you should see something like this
Image and video hosting by TinyPic

The image will be visible once you post your comment


PS: Don't worry if you make a mistake, remember that you can always edit your comments! (there's an 'Edit' button under your comments)

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


ycc2106

Here's a tutorial Molly made for posting images for a contest




Group Members