Skip to content

Commit

Permalink
Finished Placeholder Image Finder and Generator
Browse files Browse the repository at this point in the history
  • Loading branch information
smallpaes committed Jun 14, 2019
0 parents commit 0fe8279
Show file tree
Hide file tree
Showing 14 changed files with 444 additions and 0 deletions.
Binary file added .DS_Store
Binary file not shown.
87 changes: 87 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
# Find Royalty Free & Placeholder Image

A functional Google Extension to help your "readily" generate placeholder image and find the right royalty free images with accessible links that you can use right away!

: Generate customized placeholder image, search for royalty free images directly via four popular websites, get a report of all

## Project First Look
![image](https://drive.google.com/uc?export=view&id=1cX46bDKf9HWkq-smsapD26UKMZGVqTbj)


## Features
| Functions |
| ------------------------------------------------------------ |
| Generate customized placeholder image |
| Search for royalty free image on four popular websites |
| Generate URL reports with all available size of the image |

## Installation
The following instructions will get you a copy of the project and all the setting needed to run it on your chrome.


### Prerequisites

- [Google Chrome](https://www.google.com/chrome/)

### Clone

Clone this repository to your local machine

```
$ git clone https://github.com/smallpaes/find-placeholder-image.git
```

### Setup

1. Open the Extension Management page in Chrome

```
chrome://extensions
```

2. Enable Developer Mode & Click on **LOAD UNPACKED**

```
Select the extension directory: find-placeholder-image
```

![image](https://drive.google.com/uc?export=view&id=1peOwDvpeI94OF11P2fK9EPOtXyQb3S0Y)

3. Find the Extension Box for successful installation

![image](https://drive.google.com/uc?export=view&id=1lQP83ILin-mz9qAqwWgXpomIrpyg0HlI)

## How To Use
### Generate customized placeholder image
1. Click on extension icon.
2. In **Generate Placeholder Image** section, input your need of your placeholder image.
3. Click on **Generate** button.
4. Click on **OPEN** button to open the image in a new tab / **COPY** button to copy the URL.


![image](https://drive.google.com/uc?export=view&id=168oWaaj-5HCyKiU66hWwUbBQPTZZuZmO)


### Search for royalty free image
1. Click on extension icon.
2. In **Search Royalty Free Image** section, input keyword to search.
3. Click on **Pixabay** / **Pexels** / **Unsplash** / **Picjumbo** to show search results on their website.
4. Click on **Search All** button to directly show search results of all four websites.


![image](https://drive.google.com/uc?export=view&id=16LbxA3X4ix05J5HgSXzgEDcnnpcKz0W2)


### Generate Image URL reports
1. Search any royalty free image.
2. Visit the image you'd like to access.
3. Right Click on the **image** to open the right-click menu.
4. Choose **ShowImageURL** to generate an URL report.
5. Click on **Search All** button to directly show search results of all four websites.
6. Choose the size you prefer and click on the URL to copy the link.


![image](https://drive.google.com/uc?export=view&id=1S1fbCiE9s81OWGZOC4d3NTKK_aToFgvT)

## Authors
[Mike Huang](https://github.com/smallpaes)
16 changes: 16 additions & 0 deletions background.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const contextMenuItems = {
"id": "showImageUrl",
"title": "ShowImageURL",
"contexts": ["image"],

}

chrome.contextMenus.create(contextMenuItems)
chrome.contextMenus.onClicked.addListener(function (info, tab) {
if (info.menuItemId === "showImageUrl") {
chrome.tabs.sendMessage(tab.id, "getUrl")
chrome.tabs.insertCSS({
file: 'content.css'
})
}
})
33 changes: 33 additions & 0 deletions content.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
th h3 {
margin-top: 0;
margin-bottom: 0;
font-size: 1.4em;
color: white;
font-weight: bold;
}

td,
th {
border: 1px solid #ddd;
padding: 8px;
color: gray;
}

td.url {
cursor: pointer;
}

td.url:hover {
color: #404040;
}

th {
padding: 12px 8px;
text-align: left;
background-color: #4CAF50;
color: white;
}

tr:nth-child(2n+1){
background-color: #f2f2f2;
}
58 changes: 58 additions & 0 deletions content.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
(function () {
let clickedImg = null

document.addEventListener('contextmenu', event => {
clickedImg = event.target
})

function copyUrl() {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(event.target);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
selection.removeAllRanges();
}

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
const images = !clickedImg.srcset ? clickedImg.src.split() : clickedImg.srcset.split(',')
let tbodyInnerHTML = ''

images.forEach(image => {
const url = image.split(' ')[0] ? image.split(' ')[0] : image.split(' ')[1]
const size = image.split(' ').length === 1 ? 'Single Size'
: image.split(' ')[0] ? image.split(' ')[1]
: image.split(' ')[2]

tbodyInnerHTML += `
<tr>
<td>${size}</td>
<td class='url'>
${url}
</td>
</tr>
`
})

document.querySelector('body').innerHTML = `
<table>
<thead>
<tr>
<th><h3>Size</h3></th>
<th><h3>Link</h3></th>
</tr>
<thead>
<tbody>
${tbodyInnerHTML}
</tbody>
</table>
`


document.querySelectorAll('.url').forEach(link => {
link.addEventListener('click', copyUrl)
})
})
})()

Binary file added images/.DS_Store
Binary file not shown.
Binary file added images/image128.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/image16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/image32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/image48.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 43 additions & 0 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"name": "Placeholder Image",
"version": "1.0",
"description": "Quickly find the right placeholder image for yourself!",
"permissions": [
"contextMenus",
"activeTab",
"declarativeContent",
"storage"
],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/image16.png",
"32": "images/image32.png",
"48": "images/image48.png",
"128": "images/image128.png"
}
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"icons": {
"16": "images/image16.png",
"32": "images/image32.png",
"48": "images/image48.png",
"128": "images/image128.png"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content.js"
]
}
],
"manifest_version": 2
}
37 changes: 37 additions & 0 deletions pop.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
html,
body {
width: 300px;
min-height: 200px;
margin: 0;
font-family: 'Cabin Sketch', cursive;
}

legend {
font-size: 1.2em;
font-weight: 700;
}

a,
a:hover {
text-decoration: none;
color: white;
font-size: .8em;
}

a:hover {
font-weight: 600;
}

.input-group-append .btn-info {
background: white;
color: #17a2b8;
}

#url-display {
cursor: default;
}

.buttons .btn-group-sm>.btn,
.buttons .btn-sm {
font-size: .72rem;
}
102 changes: 102 additions & 0 deletions popup.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Placeholder Image</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="pop.css">
<style>

</style>
</head>

<body>
<!--Generate Plain Placeholder Image-->
<section class="placeholder-image bg-secondary border rounded p-2">
<form id='generate-image'>
<legend class='text-white'>Generate Placeholder Image</legend>
<div class="form-row justify-content-between">
<div class="col">
<input type="number" min='0' class='form-control form-control-sm' id='width' placeholder="Width" required>
</div>
<div class="col">
<input type="number" min='0' class='form-control form-control-sm' id='height' placeholder="Height">
</div>
<div class="col">
<select id="format" class="form-control form-control-sm">
<option value=''>Format</option>
<option value='.png'>.png</option>
<option value='.jpg'>.jpg</option>
<option value='.jpeg'>.jpeg</option>
<option value='.gif'>.gif</option>
</select>
</div>
</div>
<!--Second row-->
<div class="form-row justify-content-center mt-2">
<div class="col-6">
<input type="text" class="form-control form-control-sm" id="display-text" placeholder="Text on image...">
</div>
<div class="col-2">
<input type="color" class="form-control form-control-sm" id="bg-color" value="#D3D3D3">
</div>
<div class="col-4">
<button class="btn btn-sm btn-info w-100" type="submit">Generate</button>
</div>
</div>
</form>
<div class="d-none flex-column" id='url-panel'>
<div class="input-group input-group-sm my-2 ">
<input type="text" class="form-control" aria-describedby="button-addon4" id='url-display'>
<div class="input-group-append">
<a href="#" class="btn btn-info" role="button" id='open-url' target='_blank'>Open</a>
<a href="#" class="btn btn-info" role="button" id='copy-url'>Copy</a>
</div>
</div>
</div>
</section>

<!--Find Royalty Free Image-->
<section class="bg-secondary border rounded p-2">
<form id='search-image'>
<legend class='text-white'>Search Royalty Free Image</legend>
<!--Second row-->
<div class="input-group input-group-sm my-2 ">
<input type="text" class="form-control form-control-sm" id="search-string" placeholder="Find an image" required>
<div class="input-group-append">
<button class="btn btn-info" type="submit" id='open-all'>Search All</button>
</div>
</div>
</form>
<div class="buttons">
<div class="form-row">
<div class="col-3">
<a href="https://pixabay.com/" class="btn btn-sm btn-info w-100 website" role="button" id='pixabay'
target='_blank'>Pixabay</a>
</div>
<div class="col-3">
<a href="https://www.pexels.com/" class="btn btn-sm btn-info w-100 website" role="button" id='pexels'
target='_blank'>Pexels</a>
</div>
<div class="col-3">
<a href="https://unsplash.com/" class="btn btn-sm btn-info w-100 website" role="button" id='unsplash'
target='_blank'>Unsplash</a>
</div>
<div class="col-3">
<a href="https://picjumbo.com/" class="btn btn-sm btn-info w-100 website" role="button" id='picjumbo'
target='_blank'>Picjumbo</a>
</div>
</div>
</div>
</section>

<script src="popup.js"></script>
</body>

</html>
Loading

0 comments on commit 0fe8279

Please sign in to comment.