CODEWITHSUNDEEP
pythonhtmlcssweb2py
Still.Tony
Still.Tony

Reputation: 1434

Web2Py CSS style in IMG()

I'm trying to get the basic syntax for setting a CSS <style> using a call to {{=IMG()}} in Web2Py. I've tried the following:

 <style>img.bottom { vertical-align: text-bottom; } </style>
 <body>
     {{=IMG(_src=URL('static',args='images/golem.jpg', _style='img.bottom'),_alt="golem"}}
 </body>

fail

 <body>
     {{=IMG(_src=URL('static',args='images/golem.jpg', styles={'CODE':'vertical-align: text-bottom;'}), _alt="golem")}}
 <body>

also fail

 <style>img.bottom { vertical-align: text-bottom; } </style>
 <body>
      {{=IMG(_src=URL('static',args='images/golem.jpg'), _style='bottom',_alt="golem"}}
 </body>

also fail

 <style>img.bottom { vertical-align: text-bottom; } </style>
 <body>
      {{=IMG(_src=URL('static',args='images/golem.jpg'), _class='bottom',_alt="golem"}}
 </body>

also fail

I feel like I must be close but I can't find an argument for style to IMG() in the docs and I can't seem to override the (non)style that's present.

Just in case anyone wants to see the Web2Py docs where the answer is not

Upvotes: 0

Views: 854

Answers (2)

Anthony
Anthony

Reputation: 25536

You can do:

{{=IMG(_src=URL('static', 'images', args='golem.jpg'), _alt='golem',
       _style='vertical-align: text-bottom')}}

or:

<style>img.bottom {vertical-align: text-bottom;}</style>
{{=IMG(_src=URL('static', 'images', args='golem.jpg'), _alt='golem',
       _class='bottom')}}

As noted here in the documentation:

Named arguments that start with an underscore are interpreted as HTML tag attributes (without the underscore).

Although the book doesn't specifically show an example of using the "_style" or "_class" arguments with IMG, there are numerous examples of the "_class" argument as well as other HTML attributes being used with other HTML helpers.

Upvotes: 2

Still.Tony
Still.Tony

Reputation: 1434

While this does work, I don't like it. It's ugly and I'm not accepting it as an answer. Just wanted to give a workaround in case someone else finds this (unanswered) next year.

 <style> img.bottom { vertical-align: text-bottom; } </style>
 <body>
     <img src={{=URL('static','images',args='golem.jpg')}} alt="golem"class=bottom>
 </body>

Upvotes: 0

Related Questions