Skip to content

Commit

Permalink
Add masonry to gallery (#28)
Browse files Browse the repository at this point in the history
  • Loading branch information
kellerrennkadse committed Jun 16, 2018
1 parent 9920a3f commit c4445f3
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 37 deletions.
57 changes: 31 additions & 26 deletions assets/css/pages/gallery.scss
Original file line number Diff line number Diff line change
@@ -1,32 +1,37 @@
div.gallery {
margin-bottom: 25px;
border: 1px solid #ccc;
min-width: 230px;
max-width: 320px;
}
.gallery-grid {
.gallery {
margin-bottom: 25px;
border: 1px solid #ccc;
width: 250px;

div.gallery:hover {
border: 1px solid #777;
}
&:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
margin-top: -20px;
}
a {
position: relative;
display: block;

div.gallery img:hover {
background: #0f1c33;
opacity: 0.35;
}
img {
width: 100%;
height: auto;

div.gallery span.flag-icon{
float: right;
margin-top: 5px;
margin-right: 5px;
}
&:hover {
background: #0f1c33;
opacity: 0.35;
}
}

.flag-icon{
position: absolute;
top: 5px;
right: 5px;
}
}
}

div.desc {
padding: 15px;
text-align: center;
.desc {
padding: 15px;
text-align: center;
}
}
1 change: 1 addition & 0 deletions assets/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@ window.moment = moment;
})(jQuery);

import './pages/landing.js';
import './pages/gallery';
10 changes: 10 additions & 0 deletions assets/js/pages/gallery.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import jQuery from 'jquery';
import Masonry from 'masonry-layout';

jQuery(document).ready(function() {
const gallery = new Masonry('.gallery-grid', {
itemSelector: '.gallery',
columnWidth: 250,
gutter: 25
});
});
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"flag-icon-css": "^3.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"masonry-layout": "^4.2.1",
"moment": "^2.22.2",
"node-sass": "^4.9.0",
"popper.js": "^1.14.3",
Expand Down
4 changes: 2 additions & 2 deletions src/Controller/IndexController.php
Original file line number Diff line number Diff line change
Expand Up @@ -157,10 +157,10 @@ private function resizeImage(SplFileInfo $file, $destinationName)

$imagick->resizeImage(453,640, 0, 1, true);

$imageWidth = $imagick->getImageWidth();
/*$imageWidth = $imagick->getImageWidth();
if($imagick->getImageHeight() > $imageWidth * 1.5) {
$imagick->cropImage($imageWidth,$imageWidth * 1.5,0,0);
}
}*/

if(is_writable(dirname($destinationName))) {
return $imagick->writeImage($destinationName);
Expand Down
2 changes: 1 addition & 1 deletion templates/gallery/components/content.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<span>{% trans %}gallery_title{% endtrans %}</span>
</h2>
<br>
<div class="row">
<div class="row gallery-grid">
{% for image in images %}
{% include 'gallery/components/image.html.twig' %}
{% endfor %}
Expand Down
14 changes: 6 additions & 8 deletions templates/gallery/components/image.html.twig
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<div class="col">
<div class="gallery">
<a target="_blank" href="/build/static/gallery/files/{{ image.name }}">
<span class="flag-icon flag-icon-{{ image.langcode }}"></span>
<img src="/build/static/gallery/preview/{{ image.thumb}}" alt="{{ image.name }}" width="300" height="200">
</a>
<!--<div class="desc"><span class="label danger">{% trans %}gallery_download_pdf{% endtrans %}</span></div>-->
</div>
<div class="gallery">
<a target="_blank" href="/build/static/gallery/files/{{ image.name }}">
<span class="flag-icon flag-icon-{{ image.langcode }}"></span>
<img src="/build/static/gallery/preview/{{ image.thumb}}" alt="{{ image.name }}" width="300" height="200">
</a>
<!--<div class="desc"><span class="label danger">{% trans %}gallery_download_pdf{% endtrans %}</span></div>-->
</div>
33 changes: 33 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1905,6 +1905,10 @@ des.js@^1.0.0:
inherits "^2.0.1"
minimalistic-assert "^1.0.0"

desandro-matches-selector@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz#717beed4dc13e7d8f3762f707a6d58a6774218e1"

destroy@~1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
Expand Down Expand Up @@ -2232,6 +2236,10 @@ etag@~1.8.1:
version "1.8.1"
resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"

ev-emitter@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ev-emitter/-/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a"

event-emitter@~0.3.5:
version "0.3.5"
resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
Expand Down Expand Up @@ -2555,6 +2563,12 @@ first-chunk-stream@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz#59bfb50cd905f60d7c394cd3d9acaab4e6ad934e"

fizzy-ui-utils@^2.0.0:
version "2.0.7"
resolved "https://registry.yarnpkg.com/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz#7df45dcc4eb374a08b65d39bb9a4beedf7330505"
dependencies:
desandro-matches-selector "^2.0.0"

flag-icon-css@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/flag-icon-css/-/flag-icon-css-3.0.0.tgz#a67cb3913973e38a8117e738ebbe9081049d8127"
Expand Down Expand Up @@ -2740,6 +2754,10 @@ get-proxy@^1.0.1:
dependencies:
rc "^1.1.2"

get-size@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/get-size/-/get-size-2.0.3.tgz#54a1d0256b20ea7ac646516756202769941ad2ef"

get-stdin@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
Expand Down Expand Up @@ -4024,6 +4042,13 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"

masonry-layout@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/masonry-layout/-/masonry-layout-4.2.1.tgz#1c878b85a88866ba6b39b9bd0e162348aed7ce13"
dependencies:
get-size "^2.0.2"
outlayer "^2.1.0"

math-expression-evaluator@^1.2.14:
version "1.2.17"
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
Expand Down Expand Up @@ -4622,6 +4647,14 @@ osenv@0, osenv@^0.1.4:
os-homedir "^1.0.0"
os-tmpdir "^1.0.0"

outlayer@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/outlayer/-/outlayer-2.1.1.tgz#29863b6de10ea5dadfffcadfa0d728907387e9a2"
dependencies:
ev-emitter "^1.0.0"
fizzy-ui-utils "^2.0.0"
get-size "^2.0.2"

p-finally@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
Expand Down

0 comments on commit c4445f3

Please sign in to comment.