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
BedrockMission!

Learn More

View all

Sign in to view all badges

Adding width and height to images

Avatar

Avatar
Give Back
Level 1
chintan97patel
Level 1

Likes

2 likes

Total Posts

7 posts

Correct Reply

1 solution
Top badges earned
Give Back
Establish
Validate 1
Boost 1
Affirm 1
View profile

Avatar
Give Back
Level 1
chintan97patel
Level 1

Likes

2 likes

Total Posts

7 posts

Correct Reply

1 solution
Top badges earned
Give Back
Establish
Validate 1
Boost 1
Affirm 1
View profile
chintan97patel
Level 1

26-05-2021

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?

AEM images

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile
Umesh_Thakur
MVP

26-05-2021

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  

Answers (1)

Answers (1)

Avatar

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

570 likes

Total Posts

687 posts

Correct Reply

197 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

570 likes

Total Posts

687 posts

Correct Reply

197 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile
asutosh_jena
Level 10

26-05-2021

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;

}