Drupal Technical

[Drupal] How to create an HTML template in a Drupal website using user input?

Zyxware Technologies | | 3 min read

We were requested to create an online envelope editor using Drupal by one of our clients. We knew that we needed to create an HTML template as the base for the online editor. So we proceeded to develop a Drupal application which would create an HTML template using the input provided by the user which would be used to create the envelope. If you are looking to know how to create an HTML template in a Drupal website using user input read on to find out how we went about doing that.

The online envelope editor required the following fields to be submitted by the user.

  • Message
  • verse
  • Name
  • Address

Since the application was a graphical online envelope editor it meant that we needed to specify the position of these values on the template. Therefore we needed another set of fields to get the positions of the above values as follows along with the actual field names

  • Message Position x,y ->['field_message_position_x_y']
  • Verse Position x,y ->['field_verse_position_x_y']
  • Name Position x,y ->['field_name_position_x_y']
  • Address Position x,y ->['field_address_position_x_y']

In additon to that we needed a field get the background image for the envelope and a field to store the template.

  • ['field_template_front_image']
  • ['field_template'].
  1. First we added the required fields to the product content type as the envelope was a product. Checkout our article on "How to add custom fields to an Ubercart product content type"
  2. We used a Drupal hook - hook_node_presave to save the fields in a node as shown below.
    function modulename_node_presave($node) {
    // We needed the template only for product content type.
    if ($node->type=='product') { 
      if (isset($node->field_template_front_image['und'][0]['fid'])) {
        $bgimage = $node->field_template_front_image['und'][0]['uri'];
      }
      // Checks if the message field has a value.
      if (isset($node->field_default_message['und'][0]['value'])) { 
        $message  = $node->field_default_message['und'][0]['value'];
      }
      // Checks if the verse field has a value.
      if (isset($node->field_default_verse['und'][0]['value'])) {  
        $verse         = $node->field_default_verse['und'][0]['value'];
      }
      // Checks if the name field has a value.
      if (isset($node->field_default_name['und'][0]['value'])) {  
        $name = $node->field_default_name['und'][0]['value'];
      }
      // Checks if the address field has a value.
      if (isset($node->field_default_address['und'][0]['value'])) {
        $address       = $node->field_default_address['und'][0]['value'];
      }
      if (isset($node->field_message_position_x_y['und'][0]['value'])) {
      // splitting x and y position.The 0th array will have 'x' value and the next will have 'y' value.
          $message_pos   = explode(',', $node->field_message_position_x_y['und'][0]['value']); 
      }
      if (isset($node->field_verse_position_x_y['und'][0]['value'])) {
          $verse_pos    = explode(',', $node->field_verse_position_x_y['und'][0]['value']);
      }
      if (isset($node->field_name_position_x_y['und'][0]['value'])) {
        $name_pos      = explode(',', $node->field_name_position_x_y['und'][0]['value']);
      }
      if (isset($node->field_address_position_x_y['und'][0]['value'])) {
          $address_pos   = explode(',', $node->field_address_position_x_y['und'][0]['value']);
      }
  3. With the values in the field we can now proceed to generate the html template using the code shown below
    4.  $template  = '<div class= "template" style="width:auto;height:auto;position:relative;background:url($bgimage)">'; 
      if (trim($message)!='') {
        $template .= '<div id="template-message" class="drag" style="font-size:20px;width:auto;position:absolute;left:' . $message_pos[0] . 'px;top:' . $message_pos[1] . 'px">' . $message . '</div>';
      } 
      if (trim($verse)!='') {
        $template .= '<div id="template-verse" class="drag" style="font-size:20px;width:auto;position:absolute;left:' . $verse_pos[0] . 'px;top:' . $verse_pos[1] . 'px">' . $verse . '</div>';
      } 
      if (trim($name)!='') {
        $template .= '<div id="template-name" class="drag" style="font-size:20px;width:auto;position:absolute;left:' . $name_pos[0] . 'px;top:' . $name_pos[1] . 'px">' . $name . '</div>';
      } 
      if (trim($address)!='') {
        $template .= '<div id="template-address" class="drag" style="font-size:20px;width:auto;position:absolute;left:' . $address_pos[0] . 'px;top:' . $address_pos[1] . 'px">' . $address . '</div>';
      } 
      $template .= '</div>';
      if (!isset($node->original) {
        if (isset($template)) { 
          // Assigning the value of template to the node's field.
          $node->field_template['und'][0]['value']=$template;  
        }
      }
     }
   }
  4. Now we have the HTML template in our nodes field. You can load this node anywhere and use the field value.

      5. If you are looking for professional assistance in developing Drupal based web applications, get in touch with us

       

       

Related Topics