Adding width and height to images

[chintan97patel]

Hello,

I have multiple images in a page (for example, site logo, other promotional images etc). I want to add width and height attribute (with actual image size) to each of <img> tag. Options I see are as below.

1. Check for each of the page when it is loaded and add the attributes. Not sure if it is feasible or how to implement it.

2. Update all the components using <img> tag and fetch actual dimensions for related images by fetching them through AssetDetails in Java. It will require update to many component files (roughly 70).

Any suggestions for which route to take and what are the solutions for option 1?

[Asutosh_Jena_]

Hi @chintan97patel 

You do not have to apply at each of the page level. It can be applied via CSS at component level.

Let's say you have a logo component which is used to author the site logo across all the pages. Then you can apply a class to the <img> and apply the CSS property to it which will apply the height and width to the asset across all the page wherever the logo image is used.

Example:

<img class="something" src="path to asset">

CSS:

.something {

 height: 100px;

 width: 100px;

}

[Umesh_Thakur · Accepted solution]

Hi @chintan97patel,

I am not sure whether you are using scene7 or not if you are, you can use presets for images. With the help of presets you can easily set the dimensions of the images.

To create image presets you just need to create one interface and create required field like

import org.apache.sling.caconfig.annotation.Configuration;

import org.apache.sling.caconfig.annotation.Property;

@Configuration(label = "Image Preset Configurations", description = "configuring Scene7 Image Preset")

public @interface Scene7ImagePresetConfiguration {

    @Property(label = "Image Presets", description = "Some description")

    String[] imagePresets();

    @Property(label = "Default Image Presets", description = "Some description")

    String defaultImagePreset();

}

you just need to create one configuration in conf. path with the PID of the configuration

Now you will be getting the presets in your URL formatter for scene7. thats it 

Now your URL will be like:

//somedomain.com/some_image?$tile$&wid=1088&hei=1360

Hope this will help.

Umesh Thakur