Solved thread

This post is marked as solved. If you think the information contained on this thread must be part of the official documentation, please contribute submitting a pull request to its repository.

how to specify an image with specific heights, widtha and styles in phalcon

Hi iam a beginner. how to set an image with specific heights and widths and styles in phalcon i used this code

<?php echo $this->tag->image("img/hello.gif"); ?>

and my original html code is

<img src="images/logo.png" style=" margin-top:20px; margin-left:10px; "width="265" height="54">

pls help me



7.2k
Accepted
answer
echo \Phalcon\Tag::image(array(
            "images/logo.png",
            "alt" => "Your image",
            'style' => 'width:100px;height:200px;margin-top:20px; margin-left:10px',
        ));
edited Apr '15

There is 2 ways you can achieve this.

  1. put your image in a div that has a class or id

    <div class="myclass"><?php echo $this->tag->image("img/hello.gif"); ?></div>
    

    Then Your Css

     .myclass img{
      width:  10px;
      height: 10px;
     }
    

    On this case if you have several images that you want to put different styling you can employ the child elements technique. e.g

      .myclass img:first-child{
      width:  10px;
      height: 10px;
     }
    
    
      .myclass img:nth-child(){
      width:  5px;
      height: 20px;
     }
    
    1. Give your image a target (class or #id) i.e

          {{ image("img/hello.gif", "alt": "" ,"class": "myclass") }}
      

      Then In your Css

         .myclass{
              width:  10px;
          height: 10px
         }
      

Remember it is always very important to keep your code clean and if you can separate styling with html/php code the better. You can re-use most of the codes and have your application easy to maintain.