Skip to content

Commit

Permalink
Merge pull request #4 from imagewize/portfolio-slider
Browse files Browse the repository at this point in the history 
Portfolio Slider Block
  • Loading branch information
@jasperf
jasperf authored Jan 28, 2025
2 parents 84c3f93 + f79351f commit 1d3f533
Show file tree
Hide file tree
Showing 7 changed files with 196 additions and 2 deletions.
Binary file modified site/web/app/themes/nynaeve/.yarn/install-state.gz
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion site/web/app/themes/nynaeve/app/setup.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
*/
add_action('after_setup_theme', function () {
add_image_size('product-gallery-main', 800, 1000, true); // 800x1000 pixels, cropped
// add_image_size('product-gallery-thumb', 150, 150, true); // 150x150 pixels, cropped
add_image_size('portfolio-slide', 800, 500, true); // 16:10 aspect ratio, good for both desktop and mobile
}, 20);

/**
Expand Down
3 changes: 3 additions & 0 deletions site/web/app/themes/nynaeve/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,8 @@
"@roots/bud": "^6.24.0",
"@roots/bud-tailwindcss": "^6.24.0",
"@roots/sage": "^6.24.0"
},
"dependencies": {
"swiper": "^11.2.1"
}
}
123 changes: 122 additions & 1 deletion site/web/app/themes/nynaeve/resources/acf-json/homepage-builder/group_581576e5add40.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,127 @@
"min": "",
"max": ""
},
"layout_6795901dcd22b": {
"key": "layout_6795901dcd22b",
"name": "portfolio_slider",
"label": "Portfolio Slider",
"display": "block",
"sub_fields": [
{
"key": "field_6795901dcd22c",
"label": "Portfolio Slider Title",
"name": "portfolio_slider_title",
"aria-label": "",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"maxlength": "",
"allow_in_bindings": 0,
"placeholder": "",
"prepend": "",
"append": ""
},
{
"key": "field_6795901dcd22d",
"label": "Portfolio Slides",
"name": "portfolio_slides",
"aria-label": "",
"type": "repeater",
"instructions": "This is the portfolio slider block. Three slides are recommended",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"layout": "row",
"min": 0,
"max": 0,
"collapsed": "",
"button_label": "Add Box",
"rows_per_page": 20,
"sub_fields": [
{
"key": "field_6795901dcd22e",
"label": "Slide Image",
"name": "slide_image",
"aria-label": "",
"type": "image",
"instructions": "Add slide image",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"allow_in_bindings": 1,
"preview_size": "medium",
"parent_repeater": "field_6795901dcd22d"
},
{
"key": "field_6795901dcd22f",
"label": "Slide Title",
"name": "slide_title",
"aria-label": "",
"type": "text",
"instructions": "Add slide title",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"maxlength": "",
"allow_in_bindings": 0,
"placeholder": "",
"prepend": "",
"append": "",
"parent_repeater": "field_6795901dcd22d"
},
{
"key": "field_679870e8f9f6c",
"label": "Slide Link",
"name": "slide_url",
"aria-label": "",
"type": "link",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "url",
"allow_in_bindings": 0,
"parent_repeater": "field_6795901dcd22d"
}
]
}
],
"min": "",
"max": ""
},
"5816050f16cf6": {
"key": "5816050f16cf6",
"name": "cta_banner",
Expand Down Expand Up @@ -480,5 +601,5 @@
"active": true,
"description": "",
"show_in_rest": 0,
"modified": 1733193857
"modified": 1738043902
}
24 changes: 24 additions & 0 deletions site/web/app/themes/nynaeve/resources/scripts/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import domReady from '@roots/sage/client/dom-ready';
// core version + navigation, pagination, autoplay modules:
import Swiper from 'swiper';
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

/**
* Application entrypoint
Expand Down Expand Up @@ -32,6 +40,22 @@ domReady(async () => {
} else {
// console.error('Gallery not found.');
}

// Portfolio slider
const portfolioSlider = new Swiper('.portfolio-slider', {
modules: [Autoplay, Navigation, Pagination],
autoplay: {
delay: 5000,
},
navigation: {
nextEl: '.portfolio-slider-next',
prevEl: '.portfolio-slider-prev',
},
pagination: {
el: '.portfolio-slider-pagination',
clickable: true,
},
});
});

/**
Expand Down
38 changes: 38 additions & 0 deletions site/web/app/themes/nynaeve/resources/views/partials/content-front-page.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,44 @@
</div>
</section>

@elseif(get_row_layout() == 'portfolio_slider')
<section id="portfolio" class="py-16 bg-white overflow-x-hidden">
<div class="container mx-auto max-w-5xl px-4">
<h2 class="text-3xl font-bold font-open-sans text-center mb-8">{{ get_sub_field('portfolio_slider_title') }}</h2>
@if(have_rows('portfolio_slides'))
<div class="portfolio-slider swiper-container relative">
<div class="swiper-wrapper">
@while(have_rows('portfolio_slides'))
@php(the_row())
@php($slideImage = get_sub_field('slide_image'))
@php($slideUrl = get_sub_field('slide_url'))
<div class="swiper-slide text-center p-4 hover:opacity-90 transition-opacity">
@if($slideUrl)
<a href="{{ $slideUrl }}" class="block cursor-pointer" {{ Str::startsWith($slideUrl, 'http') ? 'target="_blank" rel="noopener"' : '' }}>
@endif
<img src="{{ wp_get_attachment_image_url($slideImage['ID'], 'portfolio-slide') }}"
srcset="{{ wp_get_attachment_image_srcset($slideImage['ID'], 'portfolio-slide') }}"
sizes="(max-width: 768px) 100vw, 800px"
alt="{{ $slideImage['alt'] }}"
class="mx-auto mb-4 w-full h-auto object-cover rounded-lg"
loading="lazy"/>
<h3 class="text-lg font-semibold">{{ get_sub_field('slide_title') }}</h3>
@if($slideUrl)
</a>
@endif
</div>
@endwhile
</div>
<!-- Add Pagination -->
<div class="portfolio-slider-pagination flex justify-center mt-6"></div>
<!-- Add Navigation -->
<div class="portfolio-slider-prev absolute left-0 top-1/2 -translate-y-1/2 z-10 cursor-pointer"></div>
<div class="portfolio-slider-next absolute right-0 top-1/2 -translate-y-1/2 z-10 cursor-pointer"></div>
</div>
@endif
</div>
</section>

@elseif(get_row_layout() == 'cta_banner')
<section id="CTA" class="py-16 bg-ctaBlue text-white">
<div class="container mx-auto max-w-2xl px-4 text-center">
Expand Down
8 changes: 8 additions & 0 deletions site/web/app/themes/nynaeve/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7867,6 +7867,7 @@ __metadata:
"@roots/bud": "npm:^6.24.0"
"@roots/bud-tailwindcss": "npm:^6.24.0"
"@roots/sage": "npm:^6.24.0"
swiper: "npm:^11.2.1"
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -8486,6 +8487,13 @@ __metadata:
languageName: node
linkType: hard

"swiper@npm:^11.2.1":
version: 11.2.1
resolution: "swiper@npm:11.2.1"
checksum: 10c0/7260ad4f145d10535dc11aa634ecc736cad42280ee8b12423dfe3568efd9d3c0c5e5dc3d82dde5ebfd98b42a53b7ea6e760ebd22c1bcbb96d43ad8e1520fb7d7
languageName: node
linkType: hard

"tailwindcss@npm:3.4.13":
version: 3.4.13
resolution: "tailwindcss@npm:3.4.13"
Expand Down

0 comments on commit 1d3f533

Please sign in to comment.