Project: StartBootstrap Agency for Drupal 8 -- Second Part.

preview
Share this

So, here we go again, now I will show you some updates, a couple of features to adapt some views to the Agency theme and more custom modules for theming. 

First of all, review the two repositories: 

For the theme

For modules

Theme updates:

About the theme, thanks for the feedback, now the theme has a GPL 2 license. Now we can find all the main sections, some of them are custom modules, other are views or a contact form. 

The cascading design: This part is for showing the "About" section, it has a feature, which is a simple view. The complicated part is in the theme/agency/templates/views-view--cascading_design.html.twig Inside here I have to change the way that the view print the header and the rows.  The way that is printed this header, in particular, is repetitive for other blocks, for example, the portfolio. 

The header:

 

    div class="row">
      <div class="col-lg-12 text-center">
        {{ header }}
      </div>
   </div>

 

The Row:

  {% if rows %}
    <div class="row">
      <div class="col-lg-12">
        <ul class="timeline">
          {{ rows }}
          {% if footer %}
            <li class="timeline-inverted">
                <div class="timeline-image">
                      <h4>{{ footer }}</h4>
                  </div>
            </li>
          {% endif %}          
        </ul>
      </div>
    </div>

Look that I am including the footer to print the final message. Both the footer and the header message can be easily edited in the view configuration. 

Also, I have some change in the field render views-view-unformatted--cascading_design.html.twig:

{% for row in rows %}
  {%
    set row_classes = cycle(['', 'timeline-inverted'], loop.index0)
  %}
  <li{{ row.attributes.addClass(row_classes) }}>
    {{ row.content }}
  </li>
{% endfor %}

About the style.scss, maybe there is another issue with the .rounded-circle and the .img-fluid  class,  I tried not to add more css style, but it looks like my bootstrap-sass do not have that classes. And for the other side, I don't know how to render the image and add that classes directly. I will add a specific description of this issue later. 

The contact form: This is the feature with more dependency of contrib modules, form_placeholderfield_group, and contact_block. The 2 first are for design the contact form, creating 2 columns and the style for the input fields. The contact_block is to bring the form to the front page. The configurations for sending mail are not included in the feature. 

The interesting part here was the hook form alter, to add some bootstrap class into the main button, remove the preview button and wrap the button in a div:

 

/**
 * Implements hook_form_alter().
 */
function twig_block_form_alter(&$form, $form_state, $form_id) {

  // Look for any form provided by the contact module.
  // If you want to target a specific form you'll use the whole form ID
  // (e.g. Website feedback = 'contact_message_feedback_form').
  if (strpos($form_id, 'contact_message_feedback_form') !== FALSE) {
    $form['actions']['preview']['#access'] = FALSE;
    $form['actions']['submit']['#attributes']['class'][] = 'btn btn-primary btn-xl text-uppercase';
    // kint($form['actions']['submit']);
    $form['actions']['submit']['#prefix'] = '<div class="text-center">';
    $form['actions']['submit']['#suffix'] = '</div'>;
  }
}

 

Team and footer:  This is more simple, a view of the current user, this time there is not a template to alter this view, wasn´t necessary. And for the footer, I have a custom block with a custom theme. 

Just for having an idea, you can check the block structure:

block structure

 

 

Please, any feedback, leave your coment! 

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.