Jump to content

Test / Image editor issue


Fionnan
 Share

Recommended Posts

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).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...