Posted by harrierdh on November 21, 2012 at 12:34pm
I'm still learning about Drupal themes and module development. In the Bartik templates/node.tpl.php I see this code:
<div class="content clearfix"<?php print $content_attributes; ?>>
<?php
// We hide the comments and links now so that we can render them later.
hide($content['comments']);
hide($content['links']);
print render($content);
?>
</div>render($content) produces in my case:
<div class="field field-name-field-image field-type-image field-label-hidden">
<div class="field-items">
<div class="field-item even">
<a href="/content/hjlkhlkj">
<img typeof="foaf:Image" src="../Sunrise1.jpg" alt="" title="Image tield" height="75" width="100">
</a>
</div>
</div>
</div>
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>In navuland the sunrise is bueatiful when its hot outside. But it doesn't get hot anymore. The sun has gone down seemingly never to return.
</p>
</div>
</div>
</div> I don't want two divs. I really want an image then a paragraph inside one div.
Can I change this default behavior?
Comments
You can, put I am not sure to
You can, put I am not sure to what purpose. You will be making things more difficult in the long run.
Over ride $content in Bartik theme
Perhaps I am approaching this wrong. What I want is an image on the left with text that wraps around the image. Like this:
------------- Some text here that wraps around| image | the image and underneath the image
| | xxasl;dfjkasl;dfjka;lsdfjlasdjfl;asjdf;
------------- alksdjflj alskjdflajf aldksfj salkf flkj
sfsdfkjaldjsfj sf lksdjfa fal fdslkjf asd;lasdflkj a fdlkjs
laksdjflkjsdf askdfj alj flksjdf lsdkjf akljsd flkjds fls
sldkjfalkjflj flkajsd flkjasdf alkjdsf laskdjf lskf jaksdf
Inside a div tag that can be styled.
I'd like this to be a content type, which I know how to do ok and properly the Drupal way.
Two approaches come to mind,
Two approaches come to mind, both use a content type.
a) Add the image as part of the body. Include a class with img tag to make styling simpler.
b) Use a separate image field, make sure it is out put before the body (manage display tab for content type).
With either approach you would then use css to style the output.
a) Is not what I was looking
a) Is not what I was looking for. I can easily do this in the body. This is for end users to be able to select this content type as an option of formatting the output of their article or post.
b) I'm not sure I understand. Putting the image out first, ok. Won't the body create a seperate div (a second one)? I don't know another CSS way to have two divs work like this. They are not stylable with this type of floating to my knowledge, but I'm willing to learn.
So I'm kind of back at square one.
You can float the outer div
You can float the outer div for the image left and add appropriate padding.
I could not get what you
I could not get what you suggested to work. I can't get divs to float like this.
<div style='float:left;'><a ...>
<img .... />
</a>
</div>
<div>
<p>my paragraph text</p>
</div>
This below did work for a first attempt in themes/bartik/templates/node.tpl.php
<div class="content clearfix"<?php print $content_attributes; ?>>
<?php
// We hide the comments and links now so that we can render them later.
hide($content['comments']);
hide($content['links']);
if ($type == 'my_content_type') {
print '<div id="my-content-type-article">';
print render($content['field_image'][0]);
print render($content['body'][0]);
print '</div>';
} else {
print render($content);
}
?>
</div>
Which produces this HTML:
<div id="node-4" class="node node-my-content-type node-promoted node-full clearfix" ... ><div class="content clearfix">
<div id="my-content-type-article">
<a href="../Sunrise1.jpg">
<img typeof="foaf:Image" src="../Sunrise1.jpg" alt="" title="Sunrise image." height="165" width="220">
</a>
<p>The sunrise is bueatiful when its hot outside. But it doesn't get hot anymore. The sun has gone down seemingly never to return. A haze of fog drifts over the sky. Our tribal leader Tarnuhka speaks of a time when the skies were bright with color. The moon and stars were guides for travelers and sparkled brillianty as if they were alive. "Once there were great cities with buildings that towered to the heavens and machines that flew through the skies with grace like eagles."
</p>
</div>
</div>
</div>
And my accompanying css style:
.node .content. #my-content-type-article a {float:left;
margin-right: 10px;
}
This works, however the content-type is hard coded into node.tpl.php. I could make a configuration variable for this. It still seems like a less than what I hoped for solution. Too many things can go wrong in the long haul. Dunno.
I am not sure if you have more needs,
I am not sure if you have more needs, but in your case, as suggested by nevets, you can do this:
.node-my-content-type .field-name-field-image {float: left;
margin: 0 1.5em 0 0;
}
/* If you need it applied to full page display only, simply add .node-full */
.node-my-content-type.node-full .field-name-field-image {
float: left;
margin: 0 1.5em 0 0;
}
Change ".node-my-content-type" if you have different name.
So you don't have to hard code $content. You only have to know the classes of parent container, hence:
.node-my-content-type is the node container, and .field-name-field-image for the image.
love, light n laughter