Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Adding width and height to images

chintan97patel
Level 2
Level 2

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?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution
Umesh_Thakur
Correct answer by
Community Advisor
Community Advisor

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  

View solution in original post

2 Replies
Asutosh_Jena_
Community Advisor
Community Advisor

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
Correct answer by
Community Advisor
Community Advisor

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  

View solution in original post