Large half tile

[reynoldtan]

This PR will setup Large Half Tile and content slider functionality by creating:

1. A hook preprocess block to capture field values in its raw and unformatted form.
2. Create a slider script that will manage the slider controls and auto-slide tiles/slides.
3. Setup markup and css for large half tile content.

To test:

Test areas:

• [ ] Create 1 slide - This setup will show no slide bullets.
• [ ] Create at least 2 slides - This setup will include a slide bullet navigation.
• [ ] Slide cycles and repeats when it reaches the last slide.
• [ ] Slider will stop when mouse pointer is over a slide.
• [ ] Highlights a bullet in relation to the slide (first bullet to first slide)
• [ ] Title + Link text will link to the target page
• [ ] Reorder the tiles in my site/admin/structure/block and the order of slide will change accordingly
• [ ] No JS error in the browser console.

Tips:

• At this point the theme does not account for the width of the screen/browser and the tile will stretch wide on a wider screen size making the layout less pleasing to view. Resize browser screen size to < half for best looking proportions.

• Clear cache

Creating content:

1. Access my site/admin/content and click Blocks tab
2. Click +Add content block button. In the Add content block click Tripal Cultivate Theme Tile Block to load content entry form.
3. Create a content by adding Description (Use the value entered to identify content), Tile title, Url/link and Link text, Image (Select a large image that will fill the tile dimension). No need to provide value for Hex colour code as it is not used in this tile.
4. Click Save and access my site/admin/structure/block.
5. Scroll down to Tripal Cultivate Tile Regions (at the bottom of the page).
6. Click on Place block button next to the Tripal Cultivate Theme Tiles - Large Half region. A window pop up showing all content created will appear. Select the content created in step 3 using the value entered in description field. Click Place block.
7. Repeat until Tripal Cultivate Theme Tiles - Large Half region has 1 or > 1 contents added.
8. Click Save block and refresh homepage.

[laceysanderson]

I also expected the colour overlay for the title on the image to match the background colour I entered in my block.

[reynoldtan]

Same with the slider bullets background.

[reynoldtan]

Same with the slider bullets background.

This is a bad idea since it is not part of the tile configuration. I will leave this as is matching the theme colour.

[reynoldtan]

Fixed issues with the slider:

• [ ] Slide continues cycling once the mouse leaves the slide.
• [ ] Tile title overlay colour is the hex value entered into Tile Background Colour field with 40% opacity (really cool option that allows each tile to have unique colour).
• [ ] Slider cycles from the new point when a random bullet is selected. Instead slider stops cycling all together
• [ ] Provide feedback of some kind when a non-supported block type is added to a tile. It's ok not to render it but there should be warnings somewhere to hint to the admin why it's not showing up ;-) (Important to clear cache)
• [ ] It works! message in the console is from a js script in js/trpcultivatetheme.js. I will leave it as is for now but I will use this file for overall theme behaviors.

With the feedback, a non-compatible content will trigger an error in the frontend and a log error in Drupal Reports.