Adding width and height to images | Community
Skip to main content
chintan97patel
chintan97patel
May 26, 2021
Solved

Adding width and height to images

  • May 26, 2021
  • 2 replies
  • 1723 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Umesh_Thakur

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  

2 replies

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community Advisor
Community Advisor
May 27, 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;

}

    Umesh_Thakur
    Community Advisor
    Umesh_ThakurCommunity AdvisorAccepted solution
    Community Advisor
    May 27, 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  

      Terms & ConditionsAccessibility statement

      Loading footer...