2

I have contributors who have a vast range of skills and experience, who will have permission to post on my site. I want them their content to be displayed in the same way.

I want the user to be able to upload a single image and write some text in WYSIWYG and for it to publish with the picture at a pre-formatted width (let's say 40%) and for the text to wrap around it, like you would expect on a web page.

I imagine that I might not be able to create this as a content type and will have to use a webform, but I am still not convinced.

4
1

Yes, that is how I envisage the end result, but I am looking for a solution to allow the node author to drop the picture into an input field and let Drupal deal with the float.

All you have to do is create a template file for your content type. Then add a class or an id for your image field. (copy the node.tpl.php file and paste, rename the copy to node--[your content type name].tpl.php such as node--articles.tpl.php) Then add this line, you will also need to print all the other fields you want to see.

Example <div id="floated"><?php print render($content['field_image_example']); ?></div>

So when someone view's the page, your image will automatically be wrapped inside floated.

(above answer assumes you're using Drupal 7)

Template file

<div id="example">
  <div id="floated"><?php print render($content['field_image_example']); ?></div>
  <?php print render($content['body']); ?>
</div>

CSS

#example{
    width: 400px;
    background: yellow;
}
#floated img{
    float: left;
    width: 150px;
    background: red;
}

If you want an easier solution, less advanced knowledge needed, then use Panels which will let you add a class to your image.

The Panels module allows a site administrator to create customized layouts for multiple uses. At its core it is a drag and drop content manager that lets you visually design a layout and place content within that layout. Integration with other systems allows you to create nodes that use this, landing pages that use this, and even override system pages such as taxonomy and the node page so that you can customize the layout of your site with very fine grained permissions.

Panels Tutorials

3
  • I have had an attempt at creating a template file but it is not rendering as I had expected. I created an id and placed it in style.css in my themes folder, with a matching id in the template. I used your example, replacing the machine name for the image, also did one for the body and uploaded it to the templates folder.... but the image still comes out at the bottom of the body. Does it matter where I place it? I tried it under the $display_ submitted as well as at the top.... Mar 15 '16 at 4:50
  • @DarrenWhittenham-Gray see my edited answer, make sure your css #floated has the img
    – No Sssweat
    Mar 15 '16 at 5:04
  • There were actually two different things that went wrong, and thank you, you made me notice I had not put img{ - the other one was the machine name for the content type and a spelling error. Mar 15 '16 at 18:55
0

This sounds like a perfect fit for the Display Suite module. Quote from its project page:

Display Suite allows you to take full control over how your content is displayed using a drag and drop interface. Arrange your nodes, views, comments, user data etc. the way you want without having to work your way through dozens of template files. A predefined list of layouts (D7 only) is available for even more drag and drop fun!

Watch a screencast to see it all in action!

And I don't see any reason why you can't use a content type for this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.