Hello, this template gallery is made 4 different galleries but i need it to be a "regular" gallery with a "grid" with all the images.
I need something similar to the gallery in JA Boxing template.
Can i import somehow JA Boxing gallery here (both are JA ACM) or what do i need to change in GK Appetite to have a "regular" gallery?
Regards
luismi Hi
You can copy this JA ACM module type from the JA Boxing template into the GK Appetit template. However, keep in mind that some style customization will be necessary to match the look in GK Appetit, as the design was originally created specifically for JA Boxing.
Here’s how you can do it:
1/ Download and extract the attached zip file. Copy the two extracted files to this folder: root/templates/gk_appetit/acm/gallery/tmpl/
2/ Add the following custom CSS to style the gallery:
.acm-gallery .gallery-statics {
padding: 4rem; }
@media (max-width: 991.98px) {
.acm-gallery .gallery-statics {
padding: 2rem; } }
.acm-gallery .gallery-statics .gallery-number {
color: var(--color-primary);
margin-top: 0;
margin-bottom: 2rem; }
@media (max-width: 991.98px) {
.acm-gallery .gallery-statics .gallery-number {
margin-bottom: 1rem; } }
.acm-gallery .isotope-layout {
overflow: hidden;
margin-bottom: -2rem; }
.acm-gallery .isotope-layout .custom.bg-image {
padding: 0;
position: static; }
.acm-gallery .isotope-layout .isotope:after {
content: '';
display: block;
clear: both; }
.acm-gallery .isotope-layout .grid-xs-1 {
width: 100%; }
.acm-gallery .isotope-layout .grid-xs-1.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-xs-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-xs-2.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-xs-3 {
width: 33.3%; }
.acm-gallery .isotope-layout .grid-xs-3.item-2 {
width: 66.6%; }
.acm-gallery .isotope-layout .grid-xs-4 {
width: 25%; }
.acm-gallery .isotope-layout .grid-xs-4.item-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-xs-5 {
width: 20%; }
.acm-gallery .isotope-layout .grid-xs-5.item-2 {
width: 40%; }
.acm-gallery .isotope-layout .grid-xs-6 {
width: 16.6%; }
.acm-gallery .isotope-layout .grid-xs-6.item-2 {
width: 33.2%; }
.acm-gallery .isotope-layout .grid-xs-7 {
width: 14.28%; }
.acm-gallery .isotope-layout .grid-xs-7.item-2 {
width: 28.56%; }
.acm-gallery .isotope-layout .grid-xs-8 {
width: 12.5%; }
.acm-gallery .isotope-layout .grid-xs-8.item-2 {
width: 25%; }
.acm-gallery .isotope-layout .grid-xs-9 {
width: 11.1%; }
.acm-gallery .isotope-layout .grid-xs-9.item-2 {
width: 22.2%; }
.acm-gallery .isotope-layout .grid-xs-10 {
width: 10%; }
.acm-gallery .isotope-layout .grid-xs-10.item-2 {
width: 20%; }
@media (min-width: 576px) {
.acm-gallery .isotope-layout .grid-sm-1 {
width: 100%; }
.acm-gallery .isotope-layout .grid-sm-1.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-sm-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-sm-2.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-sm-3 {
width: 33.3%; }
.acm-gallery .isotope-layout .grid-sm-3.item-2 {
width: 66.6%; }
.acm-gallery .isotope-layout .grid-sm-4 {
width: 25%; }
.acm-gallery .isotope-layout .grid-sm-4.item-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-sm-5 {
width: 20%; }
.acm-gallery .isotope-layout .grid-sm-5.item-2 {
width: 40%; }
.acm-gallery .isotope-layout .grid-sm-6 {
width: 16.6%; }
.acm-gallery .isotope-layout .grid-sm-6.item-2 {
width: 33.2%; }
.acm-gallery .isotope-layout .grid-sm-7 {
width: 14.28%; }
.acm-gallery .isotope-layout .grid-sm-7.item-2 {
width: 28.56%; }
.acm-gallery .isotope-layout .grid-sm-8 {
width: 12.5%; }
.acm-gallery .isotope-layout .grid-sm-8.item-2 {
width: 25%; }
.acm-gallery .isotope-layout .grid-sm-9 {
width: 11.1%; }
.acm-gallery .isotope-layout .grid-sm-9.item-2 {
width: 22.2%; }
.acm-gallery .isotope-layout .grid-sm-10 {
width: 10%; }
.acm-gallery .isotope-layout .grid-sm-10.item-2 {
width: 20%; } }
@media (min-width: 1200px) {
.acm-gallery .isotope-layout .grid-md-1 {
width: 100%; }
.acm-gallery .isotope-layout .grid-md-1.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-md-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-md-2.item-2 {
width: 100%; }
.acm-gallery .isotope-layout .grid-md-3 {
width: 33.3%; }
.acm-gallery .isotope-layout .grid-md-3.item-2 {
width: 66.6%; }
.acm-gallery .isotope-layout .grid-md-4 {
width: 25%; }
.acm-gallery .isotope-layout .grid-md-4.item-2 {
width: 50%; }
.acm-gallery .isotope-layout .grid-md-5 {
width: 20%; }
.acm-gallery .isotope-layout .grid-md-5.item-2 {
width: 40%; }
.acm-gallery .isotope-layout .grid-md-6 {
width: 16.6%; }
.acm-gallery .isotope-layout .grid-md-6.item-2 {
width: 33.2%; }
.acm-gallery .isotope-layout .grid-md-7 {
width: 14.28%; }
.acm-gallery .isotope-layout .grid-md-7.item-2 {
width: 28.56%; }
.acm-gallery .isotope-layout .grid-md-8 {
width: 12.5%; }
.acm-gallery .isotope-layout .grid-md-8.item-2 {
width: 25%; }
.acm-gallery .isotope-layout .grid-md-9 {
width: 11.1%; }
.acm-gallery .isotope-layout .grid-md-9.item-2 {
width: 22.2%; }
.acm-gallery .isotope-layout .grid-md-10 {
width: 10%; }
.acm-gallery .isotope-layout .grid-md-10.item-2 {
width: 20%; } }
.acm-gallery .isotope-layout .item {
background: transparent;
float: left;
margin: -0.3px; }
.acm-gallery .isotope-layout .item a {
display: block;
overflow: hidden; }
@media (min-width: 768px) and (max-width: 991.98px) {
.acm-gallery .isotope-layout .item.item-2 {
margin-left: -1px; } }
.acm-gallery .isotope-layout .item img {
border-radius: 0;
margin: 0;
width: 100%;
-webkit-transition: 500ms all;
-o-transition: 500ms all;
transition: 500ms all; }
.acm-gallery .isotope-layout .item .expand {
color: #fff;
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: 400ms all;
-o-transition: 400ms all;
transition: 400ms all;
line-height: 1; }
.acm-gallery .isotope-layout .item .item-image {
border-radius: 0;
cursor: pointer;
position: relative;
margin: 0; }
.acm-gallery .isotope-layout .item .item-image:hover img {
-ms-transform: scale(1.05);
transform: scale(1.05);
-webkit-transform: scale(1.05); }
.acm-gallery .isotope-layout .item .item-image:hover .expand {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }You may need to add additional style customizations to achieve a closer match to the JA Boxing template’s look and feel.
Regards