Align images so text wraps around

6 posts by 3 authors in: Forums > CMS Builder
Last Post: October 17, 2008   (RSS)

By nyckidd - October 3, 2008

hello,

I am using the upload section to place images in the article , i have tried

<!-- STEP 2a: Display Uploads for field 'uploads' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['uploads'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" align="left" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>

<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" align="left" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>

<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>

<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->

But its not letting the text wrap around rather its at the bottom of the article ,....any help ?

Re: [nyckidd] Align images so text wraps around

By Ryan - October 3, 2008

Hi nyckidd, try attaching a css style to your thumbnail images.

add this to your stylesheet,


.float_img_left {
float:left;
padding:5; }


then change

align="left" on the thumbnail image to

class="float_img_left"

Hope this helps

Re: [ryan_dot] Align images so text wraps around

By nyckidd - October 3, 2008

hey, thanks....

i did that but the images are still not aligning up right you can see it here http://www.lookingforspace.com/main.php

the upload section is at the bottom and when i move it to the top it does not help rather i get an error...

Re: [nyckidd] Align images so text wraps around

By Ryan - October 4, 2008

Hi Nyckidd, my bad try this. If your still getting an error send me the full page source code and i will take a look at it for you.

<?php foreach ($record['uploads'] as $upload): ?>
<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" class="img_align_left" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" />
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" class="img_align_left" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/> <br/>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
<?php endif ?>
<?php endforeach ?>

Re: [ryan_dot] Align images so text wraps around

By Codee - October 17, 2008

I viewed your sample page and your graphics on the bottom right are starting to cascade onto each other when viewing in Mozilla Firefox v.3.03. They look fine in IE 6.02 UNLESS the text needs to be to the right.

If you don't want to put the data into separate table fields then a simple html trick to make it wrap for any browser is the following:

If you want the pic to show on the right and have text wrap on the left and below the pic automatically adjusting do this:
<img src="pic.jpg" align="right"> text here text here text here text here, etc.

If you want the pic to show on the left and have the text wrap on the right and below the pic automatically adjusting,then do this:

text here, text here text here text here,etc <img src="pic.jpg" align="left">

It's worked in every version of IE since at least 3.0 and netscape, mozilla, etc. The browser want to put the text on the side the graphic is listed but the graphic is forced to the other side so the browser forces the graphic over and wraps the text appropriately.