TripalCultivate / TripalCultivate-Theme

Provides a base theme for our collection of Tripal Cultivate sites.
0 stars 0 forks source link

Banner style tiles (wide and tall) #23

Closed reynoldtan closed 5 months ago

reynoldtan commented 6 months ago

This PR will setup banner style tiles (wide and tall) by creating:

image

  1. A hook preprocess block to capture field values in its raw and unformatted form.
  2. Setup markup and css for wide and tall banner style tile content.

Test areas:

  1. Create 1 slide
  2. Create at least 2 slides - the tile will not render any additional content to this tile.
  3. Title + Link text will link to the target page

Tips:

  1. 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.
  2. Clear the cache

Creating content:

  1. Access my site/admin/content and click Blocks tab image
  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) and tile background color hex value.
  4. Click Save and access my site/admin/structure/block.
  5. Scroll down to Tripal Cultivate Tile Regions (at the bottom of the page). image
  6. Click on Place block button next to the Tripal Cultivate Theme Tiles - Banner Style Tall and Banner Style Wide 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 steps until both wide and tall banner style region have content.
  8. Click Save block and refresh homepage.

Note:

  1. Banner style wide tile positions the cover image to the left and bottom.
  2. Banner style tall tile positions the cover image bottom center.

Use tile background color and image with transparency (GIF or PNG) to achieve the effect where the cover image shows portion of the tile background colour.