We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.
  1. Home
  2. Beginners

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



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


31.2k
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.