Test / Image editor issue

[Fionnan]

Hi All,

I'm still loving this CMS but have encountered a little problem.

I'm trying to arrange images and text like this page: http://www.thehsi.org/feature_articles/feature_cathendry_art1.php

So, at the top you can see the images side by side, both with their descriptions also.

Is there any way to do this?

Thanks,

Fionnan

[Frank Vèssia]

It seems there is nothing strange in what you want, simply you have to create the right template for this page and arrage you images and descriptions like the example, images is PW can have description fields.

[ryan]

There's a way to do everything. But I'm not sure you want to attempt this in TinyMCE. It may be possible, but I wouldn't take that route unless this is a one time need.

Instead, I would just look at it from a markup perspective and figure out what markup it will take to produce that layout.

Here is the existing markup pulled from the page you linked to:

 

<div style="float: left; width: 354px; height: 177px;">
      <img src="images/10%20Red%20eared%20slider%20copyright%202005%20Pierre%20Fidenci%20-thumb-.jpeg" alt="Red Ear Slider" style="float: right;" height="127" width="192">
      
      <p style="float: left;"><em>
      	Red-Eared Slider <br>

        (Trachemys scripta elegans).<br>
   	    Side view of the <br> 
        head of a Red-eared<br> 
        slider, clearly showing <br>
        the markings that give<br>
      	the turtle its name.<br>
        © Pierre Fidenci 2005.</em>

      </p>
</div>
<div style="float: right; height: 177px;">
      <img src="images/11%20red%20eared%20slider%20copyright%202008%20lisa%20powers.jpeg" alt="Red Ear Slider" style="float: left;" height="127" width="192">
      <p style="float: right;"><em>
      Red-Eared Slider <br>
      (Trachemys scripta elegans).<br> 
      Juvenile individual, this <br>
  cute little baby will <br>

      eventually grow to be the<br> 
      size of a dinner plate.<br> 
      © Lisa Powers 2008.<br></em>
      </p>
</div>

To reproduce this in your template, we'll use the same markup and we'll add two image fields to your template called img1 and img2 (though you could also use a multi-image field if you preferred). You will place your image captions in the image description field. You may also want to set your image description field to have multiple rows to better support your captions.

<?php
$img1 = $page->img1->size(192, 127);  
$img2 = $page->img2->size(192, 127);  
?>

<div style="float: left; width: 354px; height: 177px;">
    <img src="<?=$img1->url?>" alt="<?=$img1->description?>" style="float: right;">  
    <p style="float: left;"><em><?=$img1->description?></em></p>
</div>
<div style="float: right; height: 177px;">
    <img src="<?=$img2->url?>" alt="<?=$img2->description?>" style="float: left;">
    <p style="float: right;"><em><?=$img2->description?></em></p>
</div>

Those inline styles would better be placed in a separate css file, but hopefully this is still makes sense. The result produced by the code above would be roughly the same as the markup in the page you linked to.

If you need the explicit <br> tags in your image caption (like in the linked markup), you would want to output your image description in your paragraph like: <?php echo nl2br($img1->description); ?> rather than <?=$img1->description?>. However, I think you are better off to let the copy wrap naturally, as the <br> tags are being used for formatting a specific type size (something that you can't always count on).