Skip to content

Commit 2c41bd2

Browse files
ArdakilicArdakilic
committed
Algolia search page, template work-in-progress
1 parent 06ce96f commit 2c41bd2

File tree

3 files changed

+103
-65
lines changed

3 files changed

+103
-65
lines changed

‎README.md

+10-6
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,10 @@ npm install -g gulp
9898
gulp
9999
```
100100

101-
* Now, (if not created already,) create an `.env` file and fill your database credentials. You can copy it from `.env.example` file as a template.
101+
* Now, (if not created already,) create an `.env` file and fill all of your credentials required for the service to run. You can copy it from `.env.example` file as a template.
102+
```
103+
cp .env.example .env
104+
```
102105

103106
* Now, install the database schema from migration, and seed the users table for the administrator user:
104107

@@ -123,19 +126,20 @@ php artisan db:seed
123126
This step will create the indice, and set the settings for Algolia.
124127

125128
* Now, simply run the application. You can create a new virtualhost either from Apache, or Nginx etc.
126-
129+
127130
**Note:** PHP's own web server (e.g. if you're running it with `php artisan serve`) will give 404 erros in administration panel, because Datatables's AJAX links are quite long, and it gives 404 errors on very long links unless you edit this setting.
128-
131+
129132
* Now you can login into your application.
130133

131134
Default username is `admin@whatthetag.com`
132135
The default password is `whatthetag`
133-
136+
134137
*Don't forget to change these after logging in!*
135138

136139
* Now, simply navigate through your app and enjoy! :smile:
137140

138141
##Digging the Code?
142+
139143
Well, you should do this!
140144

141145
Why you may ask. Because one of the reasons of this app is to make a sample application using Laravel 5.
@@ -165,7 +169,7 @@ This application covers:
165169
* Algolia implementation!
166170
* AWS S3 implementation!
167171
* All dependencies are updated
168-
* Rollback to gulp
172+
* Rollback to gulp for asset automation
169173

170174
####0.3.1
171175

@@ -202,5 +206,5 @@ This application covers:
202206

203207
##Thanks
204208

205-
* [Koding](https://koding.com/R/arda), all of the project is written on the cloud using Koding's service on their VMs and my machine directly from my browser. You must definitely try the service, also it's free!
209+
* [Koding](https://koding.com/R/arda), all of baby steps of the project is written on the cloud using Koding's service on their VMs and my machine directly from my browser. You must definitely try the service, also it's free!
206210
* [Burak Can](https://twitter.com/neoberg) and [Eser Özvataf](http://eser.ozvataf.com/) for their ideas especially while handling assets.

‎app/Photo.php

+5-3
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,14 @@ public function getAlgoliaRecord()
5858

5959
return array_merge($elements, [
6060
'img_src' => config('whatthetag.s3_storage_cdn_domain') . config('whatthetag.uploads_folder') . '/' . $this->image,
61-
'thumb_src' => Croppa::url('/'. config('whatthetag.uploads_folder') .'/'.$this->image, 400, 300),
61+
'thumb_src' => Croppa::url('/' . config('whatthetag.uploads_folder') . '/' . $this->image, 400, 300),
6262
'url' => config('app.url') . '/photo/detail/' . $this->slug,
6363
'user_name' => $this->user->name,
6464
'tags' => array_map(function ($data) {
65-
return $data['title'];
65+
return [
66+
'title' => $data['title'],
67+
'slug' => $data['slug'],
68+
];
6669
}, $this->tags->toArray())
6770
]);
6871
}
@@ -79,7 +82,6 @@ public function getAlgoliaRecord()
7982
'id',
8083
'title',
8184
'url',
82-
'image', //we may use this on croppa?
8385
'img_src',
8486
'thumb_src',
8587
'user_name',

‎resources/views/photos/search.blade.php

+88-56
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,13 @@
11
@extends('app')
22

33
@section('header_assets')
4+
{{--
5+
Since the search is an external service, It's better to use the official CDN
6+
This way, the app can take minor and patch versions without needing to re-compile all assets.
7+
--}}
48
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
59
@stop
610

7-
@section('footer_assets')
8-
<script src="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
9-
<script>
10-
var search = instantsearch({
11-
appId: '{{config('algolia.connections.'.config('algolia.default').'.id')}}',
12-
apiKey: '{{config('algolia.connections.'.config('algolia.default').'.search_key')}}',
13-
indexName: '{{config('algolia.connections.'.config('algolia.default').'.indice_name')}}',
14-
urlSync: true
15-
});
16-
17-
search.addWidget(
18-
instantsearch.widgets.searchBox({
19-
container: '#whatthetag-search-box',
20-
placeholder: 'Search for photos, tags, uploader...'
21-
})
22-
);
23-
24-
search.addWidget(
25-
instantsearch.widgets.hits({
26-
container: '#hits-container',
27-
templates: {
28-
item: '<div class="col-md-3">'
29-
+ '<div class="thumbnail list-thumbnail">'
30-
+ '<div class="caption list-caption">'
31-
+ '<h4><a rel="tooltip" data-placement="bottom" title="go to photo" href="/photo/detail/<?php echo '{{'; ?>slug<?php echo '}}'; ?>"><?php echo '{{'; ?>title<?php echo '}}'; ?></a></h4>'
32-
+ '<p><a href="#" data-link-type="list-modal" data-toggle="modal" data-target="#myModal" data-img-url="<?php echo '{{'; ?>img_src<?php echo '}}'; ?>" data-img-title="<?php echo '{{'; ?>title<?php echo '}}'; ?>" class="label label-danger" rel="tooltip index-modal" title="Zoom">Zoom</a></p>'
33-
+ '<p>'
34-
+ '<h5>Tags:</h5>'
35-
+ '<p class="tagsWrapper">'
36-
+ '<a class="label label-info" rel="tooltip" href="/photo/tagged/slug" title="Photos tagged with: slug">tagadi</a>'
37-
+ '</p>'
38-
+ '</p>'
39-
+ '</div>'
40-
+ '<img src="<?php echo '{{';?>thumb_src<?php echo '}}'; ?>" alt="<?php echo '{{'; ?>title<?php echo '}}'; ?>">'
41-
+ '</div>'
42-
+ '</div>'
43-
}
44-
})
45-
);
46-
47-
search.addWidget(
48-
instantsearch.widgets.pagination({
49-
container: '#pagination-container'
50-
})
51-
);
52-
53-
search.start();
54-
55-
search.on('render', triggerTooltips);
56-
</script>
57-
@stop
58-
5911
@section('content')
6012
<div class="container">
6113
<div class="row">
@@ -71,7 +23,9 @@
7123
<div class="col-md-6 col-md-offset-3">
7224
<div id="custom-search-input">
7325
<div class="input-group col-md-12">
74-
<input type="text" class="form-control input-lg" placeholder="Search for Photos, Tags, Uploader..." id="whatthetag-search-box" />
26+
<input type="text" class="form-control input-lg"
27+
placeholder="Search for Photos, Tags, Uploader..."
28+
id="whatthetag-search-box"/>
7529
<span class="input-group-btn">
7630
<button class="btn btn-info btn-lg" type="button">
7731
<i class="glyphicon glyphicon-search"></i>
@@ -89,6 +43,12 @@
8943
<div class="row">
9044
<div class="col-md-12" id="pagination-container"></div>
9145
</div>
46+
47+
<div class="row">
48+
<div class="col-md-12 text-right">
49+
<div class="branding">Search Powered by <img src="https://www.algolia.com/assets/algolia128x40.png" style="height:14px;" /></div>
50+
</div>
51+
</div>
9252
</div>
9353
</div>
9454
</div>
@@ -101,7 +61,8 @@
10161
<div class="modal-dialog">
10262
<div class="modal-content">
10363
<div class="modal-header">
104-
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
64+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
65+
aria-hidden="true">&times;</span></button>
10566
<h4 class="modal-title" id="myModalTitle">Modal title</h4>
10667
</div>
10768
<div class="modal-body">
@@ -114,7 +75,8 @@
11475
</div>
11576

11677
<div class="col-md-4">
117-
<a id="modalDownloadBtn" role="button" href="" class="btn btn-default" target="_blank" download>Download</a>
78+
<a id="modalDownloadBtn" role="button" href="" class="btn btn-default" target="_blank"
79+
download>Download</a>
11880
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
11981
</div>
12082
</div>
@@ -124,4 +86,74 @@
12486
</div>
12587
{{-- /Modal --}}
12688

127-
@endsection
89+
@endsection
90+
91+
92+
@section('footer_assets')
93+
{{-- These are here, because there are PHP variables in the config and template for the time being --}}
94+
95+
{{--
96+
Since the search is an external service, It's better to use the official CDN
97+
This way, the app can take minor and patch versions without needing to re-compile all assets.
98+
--}}
99+
{{--<script src="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>--}}
100+
<script src="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch-preact.min.js"></script>
101+
<script>
102+
var search = instantsearch({
103+
appId: '{{config('algolia.connections.'.config('algolia.default').'.id')}}',
104+
apiKey: '{{config('algolia.connections.'.config('algolia.default').'.search_key')}}',
105+
indexName: '{{config('algolia.connections.'.config('algolia.default').'.indice_name')}}',
106+
urlSync: true
107+
});
108+
109+
search.addWidget(
110+
instantsearch.widgets.searchBox({
111+
container: '#whatthetag-search-box',
112+
placeholder: 'Search for photos, tags, uploader...'
113+
})
114+
);
115+
116+
search.addWidget(
117+
instantsearch.widgets.hits({
118+
container: '#hits-container',
119+
templates: {
120+
empty: 'Sorry, no results :(',
121+
item: '<div class="col-md-3">'
122+
+ '<div class="thumbnail list-thumbnail">'
123+
+ '<div class="caption list-caption">'
124+
+ '<h4><a rel="tooltip" data-placement="bottom" title="go to photo" href="/photo/detail/<?php echo '{{'; ?>slug<?php echo '}}'; ?>"><?php echo '{{'; ?>title<?php echo '}}'; ?></a></h4>'
125+
+ '<p><a href="#" data-link-type="list-modal" data-toggle="modal" data-target="#myModal" data-img-url="<?php echo '{{'; ?>img_src<?php echo '}}'; ?>" data-img-title="<?php echo '{{'; ?>title<?php echo '}}'; ?>" class="label label-danger" rel="tooltip index-modal" title="Zoom">Zoom</a></p>'
126+
+ '<p>'
127+
+ '<h5>Tags:</h5>'
128+
+ '<p class="tagsWrapper">'
129+
+ '<?php echo '{{{';?>tagsString<?php echo '}}}'; ?>'
130+
+ '</p>'
131+
+ '</p>'
132+
+ '</div>'
133+
+ '<img src="<?php echo '{{';?>thumb_src<?php echo '}}'; ?>" alt="<?php echo '{{'; ?>title<?php echo '}}'; ?>">'
134+
+ '</div>'
135+
+ '</div>'
136+
},
137+
transformData: function (hit) {
138+
var tagsString = '';
139+
for (var i = 0; i < hit.tags.length; i++) {
140+
tagsString += '<a class="label label-info" rel="tooltip" href="/photo/tagged/' + hit.tags[i].slug + '" title="Photos tagged with: ' + hit.tags[i].title + '">' + hit.tags[i].title + '</a> ';
141+
}
142+
hit.tagsString = tagsString;
143+
return hit;
144+
}
145+
})
146+
);
147+
148+
search.addWidget(
149+
instantsearch.widgets.pagination({
150+
container: '#pagination-container'
151+
})
152+
);
153+
154+
search.start();
155+
156+
//This is for tooltips on hover and to fill modal.
157+
search.on('render', triggerTooltips);
158+
</script>
159+
@stop

0 commit comments

Comments
 (0)