Put structure fields in a div

Question

i'm beginning with Drupal 7, and i would like to do a "block" with a picture to the left, a title right to the picture, and a description below the title.

I made a new structure, there is already a field title, and a field body, so i just added a field image.

Then I made a new view containing this new structure, but the problem is that it shows the title, then the picture, then the description.

I think the solution would be to put the title field and the description field into a div block, and then with css, declare the div and the image as "inline-block". How could i do this please?

Answer 1

Your question is indeed very confused. You might first clarify some Drupal basic concepts.

What is a block ? "Blocks are the boxes of content (such as "User Login" or "Who's online") that can be displayed in regions (such as footer or sidebar) on your page." Read Working with blocks (content in regions) for full understanding.

What is a content type ? We don't speak about structures but content types : a Content Type is a pre-defined collection of data types (Fields), this is how site editors can input original content on a Drupal site. Read Working with content types and fields.

What is a view ? "Using the Views module, you can fetch content from the database and present it to the user as lists, posts, galleries, tables, maps, graphs, menu items, blocks, reports, forum posts etc." Read Working with Views.

How to change the way blocks, fields, and so on display ? this is a very wide question.

1. Without editing any code, you can make some basic choices in admin/structure/types/, and for the content type you'd like to edit, manage display of each of the fields
2. you can install an infinity of contributed themes
3. you can create your theme, and then customize your regions, edit your stylesheets... A good place to begin might be the Theming Guide

Drupal is a very powerful CMS / CMF , but you'll have to deal with these concepts to feel a bit more confortable

Answer 2

I guess the following example might help you,

Create a view with the following options,

View Name: Custom View Theming (Machine name : custom_view_theming)

Fields :

Content: Title Content: Body Content: Image

FORMAT :

Format: Unformatted list | Settings Show: Fields | Settings

If your requirement requires a filter add it , I have just added the following filters

FILTER CRITERIA :

Content: Published (Yes) Content: Type (in Article, ...) Content: Type (exposed)

EXPOSED FORM :

Exposed form in block: Yes Exposed form style: Basic | Settings

Now the view is created and ready to populate in a block configured in the block section.Next step is to override the default-theme supported by the views,

Create the following .tpl.php files in the (default-theme [OR] custom-theme-enabled directory)/themes/templates directory.

views-view-fields--custom-view-theming.tpl.php
views-view-field--custom-view-theming--title.tpl.php
views-view-field--custom-view-theming--body.tpl.php
views-view-field--custom-view-theming--field-image.tpl.php

After Creating all the files click on the theme : inforamtion to scan all the relevant template files created now. Once all the files are listed in the theme check the row style output ans save the view.

Now update the following template files,

views-view-fields--custom-view-theming.tpl.php file is to place a overall container for each row if you need, but I just used the default $fileds it contains the following,

<?php foreach ($fields as $id => $field): ?>
  <?php if (!empty($field->separator)): ?>
    <?php print $field->separator; ?>
  <?php endif; ?>

  <?php print $field->wrapper_prefix; ?>
    <?php print $field->label_html; ?>
    <?php print $field->content; ?>
  <?php print $field->wrapper_suffix; ?>
<?php endforeach; ?>

views-view-field--custom-view-theming--title.tpl.php contains the actual html for theming the output, I have done the following,

<div class="main-content" style="float: left; clear: both;margin-bottom: 30px;">
<a href="#" title="<?php print_r($row->node_title);?>" style="float: left; padding-right: 20px;">
  <img width="170" class="bordered-image -align" title="<?php print_r($row->node_title);?>" src="sites/default/files/field/image/<?php print $row->field_field_image[0]['raw']['filename']; ?>" /> 
</a>
<h2>
  <a alt="" title="<?php print_r($row->node_title);?>" href=""> <?php print_r($row->node_title);?> </a>
</h2>
<div class="article-additional-info">
  <?php print $row->field_body[0]['raw']['value']; ?>
</div>
</div>
<div style="clear: both;"></div>

NOTE: Since we have included all the three fields in the a single templare file, leave the following template files empty.

views-view-field--custom-view-theming--body.tpl.php
views-view-field--custom-view-theming--field-image.tpl.php

That's all about the steps, flush the cache and check out your new block.