Updated D8 Boldy Theme Live Preview setup instructions

Submitted by gareth on Wed, 17/08/2016 - 17:00

CAVEAT EMPTOR
This is still a very rough start to the D8 setup instructions, more will be added as I progress and full english will be added rather than the rough notes that exist at present.
Also as I am just starting out on this process, this page will be updated as I find modules that are not fully available or as I add functionality.
Please be aware that the D8 Twig version of the Boldy theme is on its way.

Site Demo

There is a demo site available to see how this theme looks in comparison to the site5 version, it can be found at:
http://boldy.d8.garethalexander.co.uk

3rd Party Modules

I have removed much of the functionality provided by the Wordpress theme as it is not very Drupally to include this in a theme. Support in terms of styling is provided by the theme for: (Some of these modules are not yet ported to D8 at the time of writing, I will attempt to help out or at least monitor their progress until a full theme can be provided). Also as I am just starting out on this version I am not 100% sure all these modules are still required. There looks to be work done on D8 versions of most so my investigation will be into whether there is enough functionality and stability to use them. These are the modules I am targeting:

Core Modules

Go to: admin/modules or follow the Menu item link called Extend
you have to now uninstall a module rather than just disable it so go to the Uninstall sub tab or go to: admin/modules/uninstall and then:

Uninstall color
Uninstall tour

Filter settings

There is no need to alter the filter settings anymore as a wysiwyg is included in core and the default seem filter settings seem to be very reasonable and logical.
Go to: admin/config/content/formats, which can be found under the Configuration > Content authoring > Text formats and editors menu items, if you want to alter them further yourself.

Menu settings

The menu settings seem to be overhauled in D8 as well so little to do here also:

Go to: admin/structure/menu, which can be found under the Structure > Menus menu items, if you want to have a look or we may need to alter them further later.

Site Information

Go to: config/system/site-information or follow the menu links for Configuration > System > Basic site settings

I renamed the Site name to Boldy 8.x and added a Slogan of "by Site5.com ported by the_g_bomb"
The Mission statement and Footer message have had their functionality removed to utilise the block system so we can add those blocks at: admin/structure/block by following the Menu items: Structure > Block layout

Add static pages

Following the menu items: Content > Add content > Basic Page to node/add/page
I then created 2 pages for:
About and Services
under Menu Settings I check the box to Provide a menu link and used the page title as the Menu link title and made sure the menu item was saved in the Main Navigation Menu
I also created a page for Request Quote which had no menu item.

Set up content types

Article

For the Blog content type I used the Article content type which is provide on installing Drupal for this
If you used an install profile like lightning, this may not be there, so you could set it up again, by adding a new content type with:
Name: Article
Machine name: article
Description:
Use articles for time-sensitive content like news, press releases or blog posts.
Leave Submission form settings as they are
Under Publishing options I uncheck "Promoted to front page" and "Create new revision"
Under Display settings I leave "Display author and date information" checked
and the Menu settings can be left as they are as well

If you added this content type youself you may only have the body field, so you will need to add some more fields than if the content has been set up by default.
The standard profile installs the content type with:

Name - machine name - type
Body - body - Text (formatted, long, with summary)
Comments - comment - Comments
Image - field_image - Image
Tags - field_tags - Entity reference

I added a field to it at: admin/structure/types/manage/article/fields by following the Menu items: Structure > Content types > Article > Manage fields
At a minimum make sure you have Image and Tags which should have been included, but I will also add a text field select box:
Click Add field
Select List (text) from the "Add a field" dropdrop
I used the label Topics and click Save and continue

I then added the following terms to the list of allowed values
Freebies
Photoshop
Showcases
Tutorials
and set the Allowed number of values to unlimited

You can leave the list of topics like this and the label will be the same as the value or if you wish to change the label you can use the key|label notation such as: Freebies|Free stuff

You can now go to the "Manage form display" or the "Manage display" tabs and re-arrange the fields so they appear in the edit form and output page where you need them to.

Featured Slider

Going back to /admin/structure/types by following the Menu links for Structure and Content types will bring you to the page where we can create another new content type, again:

Click Add content type to go to: admin/structure/types/add
Name this Featured Slider
Under the sub menu at the bottom of the page under Publishing options, again switch off Promoted to front page
Under Display options switch off Display author and date information
and finally under Menu settings switch off the Main navigation as I these nodes shouldn't have these defaults either.

add an image field
Click Add field
Select Image from the Add a field dropdrop which is under the dropdown heading of Reference
I used the label Slider image and click Save and continue
Leave all the defaults as is and click Save field settings
Again leave the defaults but check the checkbox to make this field a Required field and click Save settings.

add a link field
Click Add field
Select Link from under General heading in the Add a field dropdrop
I used the label Slider link and click Save and continue
Leave all the defaults as is and click Save field settings
I changed the Allow link text to disabled, then when you are happy click Save settings.

I removed the body field and replaced it with a similar textarea field
Click Add field
From under the dropdown heading of Text choose Text (formatted, long) from the Add a field dropdrop
I used the label Slider text and click Save and continue
Leave all the defaults as is and click Save field settings
Again leave the defaults and click Save settings.

I need to set a few things with the display, so click on the sub menu item Manage display

I dragged the Links under disabled and rearranged the order slightly so that they were as follows:
Slider image
Slider text
Slider link

Set an imagecache preset
Go to: admin/config/media/image-styles by following the menu items to Configuration > Media > Image styles
Click Add image style
Add the Image style name: "Slider image style full" and click Create new style
Under effect choose Scale And Crop and click Add
Set the width to 960 and the height to 370 and click Add effect.
@TODO: Check how responsive the slider is and perhaps create additional styles for various breakpoints to allow responsive image styles. We might need to create "Slider image style tablet" and "Slider image style mobile" at the minimum with landscape and portrait options also up for consideration.

Portfolio

Return to /admin/structure/types by following the Menu links for Structure and Content types where we can create our second new content type:

Click Add content type to go to: admin/structure/types/add
The first content type will be named Portfolio
I have given it the description "Use portfolios showcasing content like past projects, press releases or advertisment posts."
Again under the sub menu at the bottom of the page under Publishing options, switch off Promoted to front page
Again we want to switch off Display author and date information under Display options.
And also again under Menu settings leave switch off the Main navigation as the portfolio items themselves aren't linked in the Navigation menu, but rather the Portfolio categories will be.
When we are done we would click Save and manage fields

Add the Portfolio categories dropdown select field, which will be similar to the Topics field used previously:

Click Add field
Select List (text) from the Add a field dropdrop
Use the label Portfolio Categories and click Save and continue

I then added the following terms to the list of allowed values
identity|Identity
photo|Photo
web|Web
and set the Allowed number of values to unlimited then click Save settings

add an image field
Click Add field
Select Image from the Add a field dropdrop which is under the dropdown heading of Reference
This time I used the label Portfolio teaser image and click Save and continue
Leave all the defaults as is and click Save field settings
Again leave the defaults and again decided whether this field should be a Required field and click Save settings.

add a link field
Click Add field
Select Link from under General heading in the Add a field dropdrop
Use the label Portfolio project link and click Save and continue
Leave all the defaults as is and click Save field settings
Change the Allow link text to disabled, and click Save settings.

Leave the body field in place this time but add the existing tags taxonomy field
Click Add field
from the Re-use an existing field dropdown select Entity reference: field_tags
The label of Tags should auto-populate which can be left as is and click Save and Continue
The only thing to change is to click the checkbox for Tags under the Available Vocabularies heading, then click Save settings

At this point you can go to Manage form display and rearrange your node add form display so that similar fields are closer together, for example I rearranged the field so the order was:
Portfolio teaser image
Portfolio categories
Tags
Body
Portfolio link
and then positioned each of them right under the Title as I thought it would be easier to fill out the form this way.

Lastly we need to set another imagecache preset
Go to: admin/config/media/image-styles by following the menu items to Configuration > Media > Image styles
Click Add image style
Add the Image style name: "Portfolio teaser image style full" and click Create new style
Under effect choose Scale And Crop and click Add
Set the width to 300 and the height to 200 and click Add effect.

With one last thing to set we will be done.

I am going to change the default output of the image on teaser posts, so I follow the Menu links through Structure > Content types > Portfolio and choose Manage display.
In here we will change:
Drag Portfolio categories, Tags and Links down to sit under disabled.
I am also going to click the cog beside Portfolio teaser image so that I can change default image style from None (Original image) to Teaser image style and make sure that the setting "Link image to" is set to Nothing.
I am also going to set all the Labels to hidden.

Setup Taxonomies

Taxonomy is listed under Structure > Taxonomy in the menu items or can be found by going to: admin/structure/taxonomy
The Tags category has been already set up from us so we don't have to do anything here anymore.

Set up Menus

Menu are found at: admin/structure/menu by following the menu items through Structure > Menu

The main site menu will be Main navigation and if you need to change the order of the items you can click the function select button highlighting Edit menu.

Home should already be there by default, but our new content may mean it is not in the correct place anymore.

Back in the Menu admin page, to re-create the Boldy Site demo, we will:
Create a menu for the blogroll
add the items as required

Create a menu for Menu widget
add the items as required

Create a menu for Meta widget
add the items as required

More to come

I will get to work on the individual module settings, the views and the various other bits and pieces soon.

Add new comment