Last active
February 27, 2019 15:56
-
-
Save MWDelaney/118d7b09f18cce1e24a87353763f8268 to your computer and use it in GitHub Desktop.
ACF Header Media
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // resources/styles/common/_global.scss | |
| .embed-container { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| overflow: hidden; | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| .embed-container iframe, | |
| .embed-container object, | |
| .embed-container embed { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .page-header { | |
| @extend .mt-5, .pt-5; | |
| &.has-header-media { | |
| @extend .position-relative, .text-white, .mt-4, .pt-0; | |
| .header-media { | |
| @extend .d-flex, .align-items-center, .justify-content-center; | |
| max-height: 400px; | |
| overflow: hidden; | |
| .embed-container { | |
| min-width: 100%; | |
| } | |
| } | |
| } | |
| } | |
| .header-media + .wp-blocks { | |
| @extend .position-absolute, .text-center, .mx-auto, .d-flex, .align-items-center, .justify-content-center; | |
| z-index: 100; | |
| bottom: 0; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| .header-media-image img { | |
| min-width: 1920px; | |
| height: auto; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // app/Controllers/App.php | |
| /** | |
| * Set up header media from ACF or featured image | |
| */ | |
| public function headermedia() | |
| { | |
| // Initialize the return array | |
| $return = []; | |
| $return['classes'] = ''; | |
| if (get_field('header_media')) { | |
| foreach (get_field('header_media') as $m) { | |
| if (isset($m['video'])) { | |
| $media = $m['video']; | |
| } elseif (isset($m['image'])) { | |
| $media = $m['image']; | |
| } | |
| $return['classes'] = 'has-header-media header-media-' . $m['acf_fc_layout']; | |
| $return['layout'] = $m['acf_fc_layout']; | |
| $return['media'] = $media; | |
| } | |
| } elseif (is_singular() && \get_post_thumbnail_id()) { | |
| $return['classes'] = 'has-header-media header-media-image'; | |
| $return['layout'] = 'image'; | |
| $return['media'] = (\get_post_thumbnail_id()) ?: ''; | |
| } | |
| // Always return | |
| return $return; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{-- resources/views/partials/header/header-image.blade.php --}} | |
| {!! wp_get_attachment_image( $headermedia['media'], 'full' ) !!} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{-- resources/views/partials/header/header-media.blade.php --}} | |
| @if(isset($headermedia['layout'])) | |
| <div class="header-media"> | |
| @include('partials.headers.header-'.$headermedia['layout']) | |
| </div> | |
| @endif |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "key": "group_5c671e8cc5d03", | |
| "title": "Header Media", | |
| "fields": [ | |
| { | |
| "key": "field_5c671e90fda09", | |
| "label": "Choose Media", | |
| "name": "header_media", | |
| "type": "flexible_content", | |
| "instructions": "", | |
| "required": 0, | |
| "conditional_logic": 0, | |
| "wrapper": { | |
| "width": "", | |
| "class": "", | |
| "id": "" | |
| }, | |
| "layouts": { | |
| "5c671e9f26525": { | |
| "key": "5c671e9f26525", | |
| "name": "image", | |
| "label": "Image", | |
| "display": "block", | |
| "sub_fields": [ | |
| { | |
| "key": "field_5c671ea5fda0a", | |
| "label": "Image", | |
| "name": "image", | |
| "type": "image", | |
| "instructions": "", | |
| "required": 0, | |
| "conditional_logic": 0, | |
| "wrapper": { | |
| "width": "", | |
| "class": "", | |
| "id": "" | |
| }, | |
| "return_format": "id", | |
| "preview_size": "large", | |
| "library": "all", | |
| "min_width": "", | |
| "min_height": "", | |
| "min_size": "", | |
| "max_width": "", | |
| "max_height": "", | |
| "max_size": "", | |
| "mime_types": "" | |
| } | |
| ], | |
| "min": "", | |
| "max": "" | |
| }, | |
| "layout_5c671eb9fda0b": { | |
| "key": "layout_5c671eb9fda0b", | |
| "name": "video", | |
| "label": "Video", | |
| "display": "block", | |
| "sub_fields": [ | |
| { | |
| "key": "field_5c671ec7fda0d", | |
| "label": "Video", | |
| "name": "video", | |
| "type": "oembed", | |
| "instructions": "", | |
| "required": 0, | |
| "conditional_logic": 0, | |
| "wrapper": { | |
| "width": "", | |
| "class": "", | |
| "id": "" | |
| }, | |
| "width": "", | |
| "height": "" | |
| } | |
| ], | |
| "min": "", | |
| "max": "" | |
| } | |
| }, | |
| "button_label": "Add Header Media", | |
| "min": "", | |
| "max": "" | |
| } | |
| ], | |
| "location": [ | |
| [ | |
| { | |
| "param": "post_type", | |
| "operator": "==", | |
| "value": "page" | |
| } | |
| ] | |
| ], | |
| "menu_order": 0, | |
| "position": "normal", | |
| "style": "default", | |
| "label_placement": "top", | |
| "instruction_placement": "label", | |
| "hide_on_screen": "", | |
| "active": 1, | |
| "description": "" | |
| } | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {!-- resources/views/partials/header/header-video.blade.php --}} | |
| <div class="embed-container"> | |
| {!! $headermedia['media'] !!} | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{-- resources/views/partials/page-header.blade.php --}} | |
| <div class="page-header {{ $headermedia['classes'] }}"> | |
| @include('partials.headers.header-media') | |
| <div class="wp-blocks container"> | |
| <h1>{!! App::title() !!}</h1> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment