A talk covering how developers can add new content to BlueFoot CMS in Magento 2. More details available at: http://www.magetitans.it/discovering-bluefoot-john-hughes/
Harnessing the power of BlueFoot for developers (and agencies)John Hughes
This document provides an overview of how to build a new "List Builder" page builder block for the BlueFoot page builder module in Magento. It describes creating a new "List" and child "List Item" page builder block, with attributes and templates. It also covers creating a module to define the new block types and attributes in configuration files, install scripts to populate the database, and view files for templates and block classes. The goal is to demonstrate how to extend BlueFoot to add reusable custom page content types for developers and agencies.
Drupal is a CMS to build website.
For absolute beginners, the existing documentation can seem overwhelming.
This presentation demonstrates Drupal based on 3 websites.
The first website uses Drupal in a very simple, standard way. It is used to explain the concepts behind users, nodes and blocks.
The second website adds ckk & views and illustrates how to build a photo album with these modules.
The third website uses only custom content types combining different views with the pages module. It also uses 100% custom CSS, deviating from the "boxy" look of most drupal sites.
The goal of the presentation is to give an insight in how Drupal works and what it can do for you in 20 minutes.
The document provides an overview of the architecture and anatomy of Drupal 6.0. It discusses the core components including the user system, node system, modules, themes, and database. Key points are that Drupal is built on a modular architecture, uses hooks to allow modules to interact and modify functionality, and separates data/logic from presentation using a theme engine and template files. Modules control application logic and interact with the database while themes determine the user interface and output.
jQuery Mobile is a framework for building mobile web sites and apps. It uses progressive enhancement to work across mobile device platforms. Key components include pages for content, navigation via AJAX, and widgets like lists, forms, buttons. Formatting options allow for grids, collapsibles. Events support touch and orientation changes. The framework configures default styles and provides methods to programmatically control pages and components.
This document provides an overview of building and maintaining WordPress sites. It discusses WordPress fundamentals like posts, pages, taxonomies, menus, widgets, and custom fields. It also covers themes, plugins, and common issues like plugin bloat and unoptimized images. The document recommends plugins and themes to use and provides tips for customizing WordPress through the customizer and child themes.
This document provides instructions for getting a Drupal website ready in 45 minutes by installing Drupal, selecting a theme, setting up basic website settings, blogs, forums, and comments. It outlines downloading and extracting Drupal, creating a database, enabling modules like blog and forum, configuring content types and permissions, and adding sample blog posts and forum topics. The goal is to have a functional website with blogs, forums, and commenting enabled in under an hour by following the provided steps.
This document provides an overview of the key features in the CMS Starter guide, including dashboard functionality, system settings, content management, creating pages, menus, forms, polls and newsletters. It describes how to set preferences, manage tools, categories, attributes and more.
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...Mediacurrent
This document summarizes a presentation about using Display Suite, Context, Views, and Panels modules in Drupal to build sites. It discusses how these modules can be used individually and together to construct content, arrange blocks on pages, and display content lists. Display Suite is highlighted as a powerful tool for building custom content and Views, while Context is useful for arranging blocks. The presentation provides examples of how to integrate these modules and considers real-world use cases.
Harnessing the power of BlueFoot for developers (and agencies)John Hughes
This document provides an overview of how to build a new "List Builder" page builder block for the BlueFoot page builder module in Magento. It describes creating a new "List" and child "List Item" page builder block, with attributes and templates. It also covers creating a module to define the new block types and attributes in configuration files, install scripts to populate the database, and view files for templates and block classes. The goal is to demonstrate how to extend BlueFoot to add reusable custom page content types for developers and agencies.
Drupal is a CMS to build website.
For absolute beginners, the existing documentation can seem overwhelming.
This presentation demonstrates Drupal based on 3 websites.
The first website uses Drupal in a very simple, standard way. It is used to explain the concepts behind users, nodes and blocks.
The second website adds ckk & views and illustrates how to build a photo album with these modules.
The third website uses only custom content types combining different views with the pages module. It also uses 100% custom CSS, deviating from the "boxy" look of most drupal sites.
The goal of the presentation is to give an insight in how Drupal works and what it can do for you in 20 minutes.
The document provides an overview of the architecture and anatomy of Drupal 6.0. It discusses the core components including the user system, node system, modules, themes, and database. Key points are that Drupal is built on a modular architecture, uses hooks to allow modules to interact and modify functionality, and separates data/logic from presentation using a theme engine and template files. Modules control application logic and interact with the database while themes determine the user interface and output.
jQuery Mobile is a framework for building mobile web sites and apps. It uses progressive enhancement to work across mobile device platforms. Key components include pages for content, navigation via AJAX, and widgets like lists, forms, buttons. Formatting options allow for grids, collapsibles. Events support touch and orientation changes. The framework configures default styles and provides methods to programmatically control pages and components.
This document provides an overview of building and maintaining WordPress sites. It discusses WordPress fundamentals like posts, pages, taxonomies, menus, widgets, and custom fields. It also covers themes, plugins, and common issues like plugin bloat and unoptimized images. The document recommends plugins and themes to use and provides tips for customizing WordPress through the customizer and child themes.
This document provides instructions for getting a Drupal website ready in 45 minutes by installing Drupal, selecting a theme, setting up basic website settings, blogs, forums, and comments. It outlines downloading and extracting Drupal, creating a database, enabling modules like blog and forum, configuring content types and permissions, and adding sample blog posts and forum topics. The goal is to have a functional website with blogs, forums, and commenting enabled in under an hour by following the provided steps.
This document provides an overview of the key features in the CMS Starter guide, including dashboard functionality, system settings, content management, creating pages, menus, forms, polls and newsletters. It describes how to set preferences, manage tools, categories, attributes and more.
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...Mediacurrent
This document summarizes a presentation about using Display Suite, Context, Views, and Panels modules in Drupal to build sites. It discusses how these modules can be used individually and together to construct content, arrange blocks on pages, and display content lists. Display Suite is highlighted as a powerful tool for building custom content and Views, while Context is useful for arranging blocks. The presentation provides examples of how to integrate these modules and considers real-world use cases.
Top 20 mistakes you will make on your 1st Drupal projectIztok Smolic
Working as a Drupal theming/development consultant on many "rescue" mission projects I seen many different mistakes web developers do when facing with Drupal for the first time.
This document provides an overview of how to build a WordPress blog and photo gallery site in 60 minutes using WebMatrix. It discusses how WebMatrix allows users like Peter and Eric to easily configure, customize, and publish their sites. The document demonstrates Razor syntax, layouts, sections, membership, and helpers - features in WebMatrix that make developing sites faster and easier.
This document discusses how to use the YUI JavaScript library to build websites and manipulate web pages. Key points include:
- YUI allows fetching data from remote sources, interacting with YQL, and using pre-built UI widgets.
- Examples show how to make HTTP requests, select page elements, add and remove content, and fade elements in/out.
- YUI can be used to create website templates with grids, manipulate pages using CSS selectors, and change styling of elements.
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignKate Travers
Ask any web developer: the most neglected part of their site/app is likely its CSS. Unlike other parts of the stack, most CSS is messy, complex, and long overdue for a rewrite. But it doesn’t have to be. Break out of these bad patterns by applying an object oriented CSS framework (OOCSS).
This talk will step through the process of designing, building, and implementing a custom OOCSS framework for a mid-sized web application, outlining the basic methodology, best practices, and expected outcomes, which include significant gains in both front-end performance as well as developer productivity.
Written transcript:
http://blog.kate-travers.com/how-oo-design-saved-our-css-and-site-performance/
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
Dialogs
Buttons and Toolbars
-Ways to Make a Button
-Placing Icons on Your Buttons
-Inline Buttons
-Button Groupings
-Navigation Toolbars
Collapsible Content
Event Handling
-Responding to various events
-Page related events
Ajax & Interaction with server (REST & SOAP)
Deployment using Phonegap (e.g. Android)
Overview of Android Devt Environment
Best Practices in jQM
Hands-on exercises
The document discusses the evolution of web standards and the introduction of custom elements and web components. It provides information on how to create and use custom elements using the X-Tag and Brick libraries, including downloading and installing the libraries, creating templates for custom elements, defining element behavior, and using the custom elements in web documents. The document encourages learning more about web components and sharing custom elements that are created.
This workshop conducted by the team member of Inspire Chittagong (Mizanur Rahaman Mizan and Saad Amin). Workshop was in East Delta Univeristy. There was a session relating to the infos and also another one fully focusing on the practical theme development
Brad Williams, the co-author of Professional WordPress Plugin Development, gives his presentation on Intro to WordPress Plugin Development to the NYC WordPress Meetup group in March 2011.
Social Connections VI — IBM Connections Extensions and Themes DemystifiedClaudio Procida
IBM Connections uses JavaScript extensively to build its applications and UI components. JavaScript resources are centrally served by the Common application and dynamically generated into layers based on dependencies. Modules can be written using the AMD or legacy Dojo format and aggregated. Extensions are supported through extension points like web bundles, themes, and module bindings. Developers can customize or extend Connections using these extension mechanisms.
This document provides an overview of Bootstrap, an open-source front-end web development framework. It includes information on what Bootstrap is, its key features like the grid system and responsive design, how to get started using Bootstrap by including its CSS and JavaScript files, and examples of common Bootstrap components like navigation, the jumbotron, grid layouts, images, and parallax scrolling effects. The document encourages users to get familiar with the grid system and look at code samples on the Bootstrap website to help get started building interfaces with Bootstrap.
The document summarizes a WordPress developers meetup. It discusses new features introduced in recent WordPress versions like 2.7 through 3.0, including custom backgrounds and headers, navigation menus, custom post types, and more. It encourages attendees to get involved in WordPress development through testing, translating, contributing code, and staying up to date on development through various communication channels. The meetup aims to help developers learn and discuss WordPress features and development.
This document contains instructions and information about creating basic HTML pages and adding CSS styling. It includes assignments to create folders and HTML files with headings, paragraphs and images. It also provides information on HTML elements, CSS selectors, internal and external style sheets, and validating code. Links to online resources for learning HTML, CSS and web development are included.
Creating Custom Templates for Joomla! 2.5Don Cranford
In this presentation to the Dallas/Fort Worth Joomla User Group, we covered the basics of custom Joomla templates for Joomla 2.5. We discussed:
The Basics of Joomla Templates
- Overall File Structure
- templateDetails.xml file
- index.php file
Some Advanced Template Topics
- HTML Overrides to override the output of Joomla components and modules
- Template Parameters to use in the Template Styles
- Language Overrides
Two Methods of Installing Your Custom Template
Explains the basics of creating a new WordPress theme; outlining some useful functions, explains some usage in OOP PHP, briefly describes the WordPress themes API.
1. What a plugin is and examples of common plugin types.
2. Best practices for plugin structure and organization.
3. How to determine file paths and URLs within a plugin.
4. Important plugin activation, deactivation, and uninstall techniques.
5. An overview of hooks, shortcodes, menus, and settings that plugins can utilize.
6. Resources for further plugin development learning and support.
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...WP Engine
WordPress 5.9 introduced full-site editing to core—signifying a major shift in the way we build websites with WordPress. Join us in this session as we unpack these changes, and how you can leverage them to build better websites—the modern WordPress way.
avaScript, REST, CSOM, Office 365 APIs: Like it or not, client-side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn:
"What's possible," including visual enhancements and practical business intelligence
Tips and Tricks for deploying and maintaining scripts
How to get quick wins with little effort using third-party jQuery libraries
How to interact with SharePoint forms and lists using JavaScript and jQuery
Creating and Deploying Static Sites with HugoBrian Hogan
Most web sites don’t have data that changes, so why power them with a database and take the performance hit? In this talk we’ll explore static site generation using Hugo, an open-source static site generator. You’ll learn how to make a master layout for all pages, and how to use Markdown to create your content pages quickly.
Then we’ll explore how to deploy the site we made to production. We’ll automate the entire process. When you’re done, you’ll be able to build and deploy static web sites quickly with minimal tooling.
Joomla templates change the design and layout of a site but not the content. Templates use CSS, HTML, PHP and images primarily but can also use other languages like JavaScript. Templates position modules and components on the page. Template designers can use free and commercial template design tools or code templates by hand. The basic building blocks of a Joomla template are the templateDetails.xml file, index.php file, CSS folder, and images folder.
Top 20 mistakes you will make on your 1st Drupal projectIztok Smolic
Working as a Drupal theming/development consultant on many "rescue" mission projects I seen many different mistakes web developers do when facing with Drupal for the first time.
This document provides an overview of how to build a WordPress blog and photo gallery site in 60 minutes using WebMatrix. It discusses how WebMatrix allows users like Peter and Eric to easily configure, customize, and publish their sites. The document demonstrates Razor syntax, layouts, sections, membership, and helpers - features in WebMatrix that make developing sites faster and easier.
This document discusses how to use the YUI JavaScript library to build websites and manipulate web pages. Key points include:
- YUI allows fetching data from remote sources, interacting with YQL, and using pre-built UI widgets.
- Examples show how to make HTTP requests, select page elements, add and remove content, and fade elements in/out.
- YUI can be used to create website templates with grids, manipulate pages using CSS selectors, and change styling of elements.
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignKate Travers
Ask any web developer: the most neglected part of their site/app is likely its CSS. Unlike other parts of the stack, most CSS is messy, complex, and long overdue for a rewrite. But it doesn’t have to be. Break out of these bad patterns by applying an object oriented CSS framework (OOCSS).
This talk will step through the process of designing, building, and implementing a custom OOCSS framework for a mid-sized web application, outlining the basic methodology, best practices, and expected outcomes, which include significant gains in both front-end performance as well as developer productivity.
Written transcript:
http://blog.kate-travers.com/how-oo-design-saved-our-css-and-site-performance/
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
Dialogs
Buttons and Toolbars
-Ways to Make a Button
-Placing Icons on Your Buttons
-Inline Buttons
-Button Groupings
-Navigation Toolbars
Collapsible Content
Event Handling
-Responding to various events
-Page related events
Ajax & Interaction with server (REST & SOAP)
Deployment using Phonegap (e.g. Android)
Overview of Android Devt Environment
Best Practices in jQM
Hands-on exercises
The document discusses the evolution of web standards and the introduction of custom elements and web components. It provides information on how to create and use custom elements using the X-Tag and Brick libraries, including downloading and installing the libraries, creating templates for custom elements, defining element behavior, and using the custom elements in web documents. The document encourages learning more about web components and sharing custom elements that are created.
This workshop conducted by the team member of Inspire Chittagong (Mizanur Rahaman Mizan and Saad Amin). Workshop was in East Delta Univeristy. There was a session relating to the infos and also another one fully focusing on the practical theme development
Brad Williams, the co-author of Professional WordPress Plugin Development, gives his presentation on Intro to WordPress Plugin Development to the NYC WordPress Meetup group in March 2011.
Social Connections VI — IBM Connections Extensions and Themes DemystifiedClaudio Procida
IBM Connections uses JavaScript extensively to build its applications and UI components. JavaScript resources are centrally served by the Common application and dynamically generated into layers based on dependencies. Modules can be written using the AMD or legacy Dojo format and aggregated. Extensions are supported through extension points like web bundles, themes, and module bindings. Developers can customize or extend Connections using these extension mechanisms.
This document provides an overview of Bootstrap, an open-source front-end web development framework. It includes information on what Bootstrap is, its key features like the grid system and responsive design, how to get started using Bootstrap by including its CSS and JavaScript files, and examples of common Bootstrap components like navigation, the jumbotron, grid layouts, images, and parallax scrolling effects. The document encourages users to get familiar with the grid system and look at code samples on the Bootstrap website to help get started building interfaces with Bootstrap.
The document summarizes a WordPress developers meetup. It discusses new features introduced in recent WordPress versions like 2.7 through 3.0, including custom backgrounds and headers, navigation menus, custom post types, and more. It encourages attendees to get involved in WordPress development through testing, translating, contributing code, and staying up to date on development through various communication channels. The meetup aims to help developers learn and discuss WordPress features and development.
This document contains instructions and information about creating basic HTML pages and adding CSS styling. It includes assignments to create folders and HTML files with headings, paragraphs and images. It also provides information on HTML elements, CSS selectors, internal and external style sheets, and validating code. Links to online resources for learning HTML, CSS and web development are included.
Creating Custom Templates for Joomla! 2.5Don Cranford
In this presentation to the Dallas/Fort Worth Joomla User Group, we covered the basics of custom Joomla templates for Joomla 2.5. We discussed:
The Basics of Joomla Templates
- Overall File Structure
- templateDetails.xml file
- index.php file
Some Advanced Template Topics
- HTML Overrides to override the output of Joomla components and modules
- Template Parameters to use in the Template Styles
- Language Overrides
Two Methods of Installing Your Custom Template
Explains the basics of creating a new WordPress theme; outlining some useful functions, explains some usage in OOP PHP, briefly describes the WordPress themes API.
1. What a plugin is and examples of common plugin types.
2. Best practices for plugin structure and organization.
3. How to determine file paths and URLs within a plugin.
4. Important plugin activation, deactivation, and uninstall techniques.
5. An overview of hooks, shortcodes, menus, and settings that plugins can utilize.
6. Resources for further plugin development learning and support.
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...WP Engine
WordPress 5.9 introduced full-site editing to core—signifying a major shift in the way we build websites with WordPress. Join us in this session as we unpack these changes, and how you can leverage them to build better websites—the modern WordPress way.
avaScript, REST, CSOM, Office 365 APIs: Like it or not, client-side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn:
"What's possible," including visual enhancements and practical business intelligence
Tips and Tricks for deploying and maintaining scripts
How to get quick wins with little effort using third-party jQuery libraries
How to interact with SharePoint forms and lists using JavaScript and jQuery
Creating and Deploying Static Sites with HugoBrian Hogan
Most web sites don’t have data that changes, so why power them with a database and take the performance hit? In this talk we’ll explore static site generation using Hugo, an open-source static site generator. You’ll learn how to make a master layout for all pages, and how to use Markdown to create your content pages quickly.
Then we’ll explore how to deploy the site we made to production. We’ll automate the entire process. When you’re done, you’ll be able to build and deploy static web sites quickly with minimal tooling.
Joomla templates change the design and layout of a site but not the content. Templates use CSS, HTML, PHP and images primarily but can also use other languages like JavaScript. Templates position modules and components on the page. Template designers can use free and commercial template design tools or code templates by hand. The basic building blocks of a Joomla template are the templateDetails.xml file, index.php file, CSS folder, and images folder.
SPTechCon Boston 2015 - Utilizing jQuery in SharePointMark Rackley
This document provides an overview of using jQuery in SharePoint. It discusses what jQuery is, why it is useful for SharePoint development, and how to deploy and develop with jQuery in SharePoint. It provides examples of common jQuery methods and best practices. It also demonstrates using the jQuery UI library to add tabs to a page.
Abstracting functionality with centralised contentMichael Peacock
Centralised content involves storing all content types (pages, blog posts, products, etc.) in a centralised database structure for easier management. This allows content to be treated similarly while still supporting type-specific fields. The document discusses implementing centralised content with PHP and MySQL using a model-view-controller approach. Core content fields are stored in one table, with type-specific fields stored in linked tables. This allows new content types to be added without changing existing code.
Utilizing jQuery in SharePoint: Get More Done FasterMark Rackley
The document discusses using jQuery in SharePoint to improve user interfaces and interactions. It begins with an introduction to jQuery and why it is useful for SharePoint. It then covers jQuery basics like selecting elements, showing/hiding content, and getting/setting values. Additional topics include best practices, using third-party jQuery libraries, and a demonstration of jQuery UI tabs. The presentation aims to explain how jQuery can be used to enhance SharePoint with interactive elements and animated transitions.
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...APNIC
Adli Wahid, Senior Internet Security Specialist at APNIC, delivered a presentation titled 'Honeypots Unveiled: Proactive Defense Tactics for Cyber Security' at the Phoenix Summit held in Dhaka, Bangladesh from 23 to 24 May 2024.
Securing BGP: Operational Strategies and Best Practices for Network Defenders...APNIC
Md. Zobair Khan,
Network Analyst and Technical Trainer at APNIC, presented 'Securing BGP: Operational Strategies and Best Practices for Network Defenders' at the Phoenix Summit held in Dhaka, Bangladesh from 23 to 24 May 2024.
HijackLoader Evolution: Interactive Process HollowingDonato Onofri
CrowdStrike researchers have identified a HijackLoader (aka IDAT Loader) sample that employs sophisticated evasion techniques to enhance the complexity of the threat. HijackLoader, an increasingly popular tool among adversaries for deploying additional payloads and tooling, continues to evolve as its developers experiment and enhance its capabilities.
In their analysis of a recent HijackLoader sample, CrowdStrike researchers discovered new techniques designed to increase the defense evasion capabilities of the loader. The malware developer used a standard process hollowing technique coupled with an additional trigger that was activated by the parent process writing to a pipe. This new approach, called "Interactive Process Hollowing", has the potential to make defense evasion stealthier.
Discover the benefits of outsourcing SEO to Indiadavidjhones387
"Discover the benefits of outsourcing SEO to India! From cost-effective services and expert professionals to round-the-clock work advantages, learn how your business can achieve digital success with Indian SEO solutions.
2. @JohnHughes1984
ABOUT ME
•Technical Director at Fisheye
•Working with Magento ≈ 5 years
•Passionate about:
- Ensuring developers have tools / guidance
to work efficiently and follow best practice
- Providing best in class solutions for
merchants
- Being part of #RealMagento community
IMAGINE 2017
MOST INNOVATIVE
WEBSITE
AWARD WINNERS
3. @JohnHughes1984
OVERVIEW
•What is BlueFoot?
•Developer overview of ‘Page Builder Blocks’
•Creating a module to add BlueFoot ‘Page Builder Blocks’
•Ideas for new content types and further customisation
•What the future holds for BlueFoot
5. @JohnHughes1984
LET’S HAVE A SHOW OF HANDS 🙌
•Who knows what BlueFoot is?
•Who’s installed it or used it in a project?
•Who’s extended it?
6.
7. •CMS & Page Builder for Magento
- Built by Gene Commerce
- Acquired by Magento in December 2015
•Drag & drop multiple content types in flexible row / column layouts
•Can be used anywhere in admin where WYSIWYG area is present
16. @JohnHughes1984
BLUEFOOT ENTITY TYPE
• Not to be confused with standard
entity types
• BlueFoot Entity Type =
Page Builder Block
- e.g. Image, Video, Slider
• ‘gene_bluefoot_entity_type’ table
17. @JohnHughes1984
BLUEFOOT ENTITY TYPE GROUP
• BlueFoot Entity Types are assigned
to a ‘BlueFoot Entity Type Group’
- Menu group headings
- e.g. General, Media, Commerce
- ‘gene_bluefoot_entity_type_group’
table
19. @JohnHughes1984
ATTRIBUTE SETS
•All attributes can be added to an attribute set just like any other
EAV type
•Each ‘BlueFoot Entity Type’ (‘Page Builder Block’) is linked to a
unique attribute set of the same name
- e.g. the ‘Driver’ Page Builder Block has an accompanying
attribute set also named ‘Driver’ to store its attributes
20. @JohnHughes1984
ATTRIBUTE GROUPS
• Each ‘Page Builder Blocks’
attribute set can be further split
into groups
• These groups map to tabs within
‘Page Builder Block’ edit panel
- e.g. Images, Link, Seo, Advanced
23. @JohnHughes1984
PAGE BUILDER BLOCK
•When it comes to rendering each ‘Page Builder Block’ is assigned a block
class and template file
•‘Page Builder Blocks’ can also have child items
- e.g. individual banners within a slider / carousel or items within an
accordion
- These child items are also ‘Page Builder Blocks’ (BlueFoot Entity Types)
but are generally hidden from the menu
24. @JohnHughes1984
ADDING NEW CONTENT
•BlueFoot allows creation / management of attributes sets (‘Page
Builder Blocks’) within the admin panel
•Block classes, templates & other settings can also be managed
•This is great… but for reusable solutions we need to build a
module
26. @JohnHughes1984
LIST BUILDER
Let’s create a list builder, made up of:
• A ‘List’ Page Builder Block - for <ul>
elements
• A child ‘List Items’ block - for <li>
elements
• A new ‘Fisheye’ group to display our
block under in BlueFoot menu
27. @JohnHughes1984
LIST PAGE BUILDER BLOCK
• Options
- List Title - text field
- List Style - select - e.g. none, circle, disc etc.
• Items
- List Items - child_item - for List Item blocks
• Advanced
- CSS Classes - default attribute for CSS
28. @JohnHughes1984
LIST ITEM PAGE BUILDER BLOCK
• Options
- List Text - text field
- List Icon - text field - Font Awesome
• Link
- List Link URL - text field
- Link Target - boolean
• Advanced
- CSS Classes - default attribute for CSS
29. @JohnHughes1984
MODULE COMPONENTS
• General module configuration files
• BlueFoot specific configuration files
• Install script and data source(s)
• View files - block classes and templates
• Static assets - CSS, JS, images etc.
30. @JohnHughes1984
GENERAL MODULE CONFIGURATION
As with any other module we’ll need the basics:
•composer.json - declare dependency on gene/bluefoot package
•etc/module.xml - add Gene_BlueFoot to sequence node ensure correct load
order
•registration.php - registers module
31. @JohnHughes1984
BLUEFOOT SPECIFIC CONFIGURATION
BlueFoot has its own XML/XSD configuration files:
•Renderers - block classes for use by Page Builder Blocks
•Templates - template files for for use by Page Builder Blocks
•Plugins - JS widgets e.g. colour picker, product search, maps
•Structural elements - e.g. rows and columns
33. @JohnHughes1984
INSTALL SCRIPT
•In essence the same as any other installer script
•To create new entity type group we need to inject
GeneBlueFootApiContentBlockGroupRepositoryInterface and
GeneBlueFootApiDataContentBlockGroupInterface
•Injecting GeneBlueFootModelInstallerFile we can import data
from JSON file rather than MagentoEavSetupEavSetup methods
34. @JohnHughes1984
Setup/InstallData.php
class InstallData implements InstallDataInterface
{
/** … */
public function install(
ModuleDataSetupInterface $setup,
ModuleContextInterface $context
) {
$setup->startSetup();
$this->addContentBlockGroup();
$this->installData($setup);
$setup->endSetup();
}
41. @JohnHughes1984
Setup/data/install-blocks-attributes.json
"attributes": [
{
"attribute_code": "list_style",
"backend_model": null,
"backend_type": "varchar",
"frontend_input": "select",
"frontend_label": ["List Style"],
"source_model": "FisheyeBlueFootListModelEntityAttributeSourceListStyle",
"is_required": "1",
"is_user_defined": "1",
"note": null,
"is_visible": "1",
"widget": null,
"data_model": null,
"entity_allowed_block_type": false
…
},
…
]
CUSTOM SOURCE MODEL
NEVER SET TO “0” AS WILL
ADD ATTRIBUTE TO ALL
ATTRIBUTES SETS!!!
FOR ADDING NEW ATTRIBUTES
42. @JohnHughes1984
Setup/data/install-blocks-attributes.json
"attributes": [
{
"attribute_code": "list_items",
"backend_model": "MagentoEavModelEntityAttributeBackend
ArrayBackend",
"backend_type": "text",
"frontend_input": "child_entity",
"frontend_label": ["List Items"],
"source_model": "GeneBlueFootModelAttributeSourceEntity
Child",
"entity_allowed_block_type": “fisheye_list_item”,
…
},
…
]
BACKEND & SOURCE
MODEL REQUIRED FOR
CHILD BLOCK ATTRIBUTES
ENSURES ATTRIBUTE IS
ONLY USED FOR THE
SPECIFIED BLOCK TYPE
43. @JohnHughes1984
VIEW FILES
•Block classes / template files need to be placed as declared in
etc/bluefoot/pagebuilder.xml earlier
•Blocks extend GeneBlueFootBlockEntityPageBuilderBlockAbstractBlock
•Admin templates use mustache.js templates
- {{attribute_code}} handles are replaced via JS to update preview
44. @JohnHughes1984
Block/ListBlock.php
class ListBlock extends AbstractBlock
{
/** … */
public function getListTitle()
{
return $this->stripTags($this->getEntity()->getData('list_title'));
}
/** … */
public function getListStyle()
{
return $this->getEntity()->getData('list_style');
}
}
45. @JohnHughes1984
Block/ListItem.php
class ListItem extends AbstractBlock
{
/** … */
public function getItemIcon()
{
return $this->stripTags($this->getEntity()->getData('list_item_icon'));
}
/** … */
public function getItemLinkUrl()
{
return $this->escapeXssInUrl($this->getEntity()-
>getData('list_item_url'));
}
…
57. @JohnHughes1984
FURTHER POSSIBILITIES
•Menu builder
•Form builder
•Magento elements (e.g. advanced search, quick order)
•Social media feeds (e.g. Twitter / Facebook / Instagram)
•Content from other systems (e.g. WordPress posts via WP API)
58. @JohnHughes1984
FURTHER POSSIBILITIES CONT.
•Add new attribute types with rich content via plugins (JS widgets)
- Default widgets include:
• Colour picker, Google maps, video preview and entity search
e.g. products and categories
•New structural elements
59. @JohnHughes1984
FISHEYE USAGE
•At Fisheye we’ve built our entire frontend around BlueFoot
- Page Builder Blocks - banners, trust, social and more
- Plugins (JS widgets) - CMS page search
- Wrapped into our own CMS framework
60. @JohnHughes1984
–Phillip Jackson, speaking during MageTalk Live at Magento Imagine 2017
“BLUEFOOT HAS GIVEN US A
‘LEG UP’ TO SELL MAGENTO 2 IN
A BIGGER AND BROADER WAY”
62. @JohnHughes1984
WHERE NEXT FOR BLUEFOOT?
•Fully integrated in Magento v2.3 as ‘Magento Advanced CMS’
- Expected late 2017…
•Majority of functionality will be for ‘Enterprise Edition only’
•Core version integrated into Magento UI with native drag & drop
•Integration of Adobe CC image editing
63. @JohnHughes1984
THANK YOU FOR LISTENING! 👏
Want to know more / see a demo? Come say hi 💬🍻 or get in touch:
•Twitter: @JohnHughes1984
•Email: johnh@fisheyehq.com
•LinkedIn: linkedin.com/in/johnhughes1984
64. @JohnHughes1984
Q&A
•Will this example / way of extending be relevant once 2.3 released?
- Unsure, better directed at Magento core team
- At very least vendor and namespaces will change and given the plans to refactor natively there
are bound to be further changes required, but confident most of concepts will remain similar and
hopefully porting extensions shouldn’t be too large a task (not exactly large modules)
•How do I get BlueFoot?
- Using composer (requires Enterprise Edition access keys) - composer require gene/bluefoot
- Download via partner portal