Possible to control the size of images by CSS in dsl?

[hanyl05]

In dsl file, the multimedia files have the following tages,
[s]*.jpg[/s]

I wonder whether it is possible to control the size of jpg files by using css in article-style.css?

Looking forward to your help!

[chulai]

Yes, it is possible. You have to write a CSS rule that only takes the images of your DSL dictionary and not all images. If you want to target an individual image with CSS you might need to add an id attribute to it. Not sure if it is possible in the DSL format.

You can go to File > Save Article to save the results as html. Then you can open it in any web browser. With Google Chrome you can play with the html if you right click anywhere in the webpage and select "Inspect element".

Supposing the HTML output of your DSL is:

Code: Select all

<span class="gdarticle gdactivearticle" id="gdfrom-48812fd246f4cdb6ebd1f6d722af9aab" ...>
   <div class="gddictname">
      <span class="gddicticon">
      <img src="gico://48812fd246f4cdb6ebd1f6d722af9aab/"></span>
      <span class="gdfromprefix">From </span>Sample ASCII and Unicode DSL Dictionary
   </div>

   <span class="gdarticlebody gdlangfrom-en" lang="en">
      <span class="dsl_article">
         <div class="dsl_headwords">
            <p>test ascii and unicode</p>
         </div>

         <div class="dsl_definition">
            <p>
               [s]ascii.gif[/s] [s]ñandú.jpg[/s] •
               <img src="bres://48812fd246f4cdb6ebd1f6d722af9aab/ascii.gif" alt="ascii.gif">
               <img src="bres://48812fd246f4cdb6ebd1f6d722af9aab/%C3%B1and%C3%BA.jpg" alt="ñandú.jpg">
            </p>
            <p></p>
         </div>
      </span>
   </span>
</span>

You can target the images ascii.gif and ñandú.jpg with the following CSS rule:

Code: Select all

span#gdfrom-48812fd246f4cdb6ebd1f6d722af9aab div.dsl_definition img {
   width: 50px;
   height: 50px;
}

Knowing that GD embed a browser, then this turns out to be a CSS question. You can search the web for more info.

Regards,

Chulai

[chulai]

I forgot to say that you have to add that CSS line in the file article-style.css in your config folder. If the file does not exist you can create it. It's just a regular text file.

You can find your configuration folder by going to Help > Configuration folder.

Regards,

Chulai

[hanyl05]

Hi, chulai, it works great!
Too many thanks for your kind help!!!