CODEWITHSUNDEEP
typo3typo3-7.6.x
user500665
user500665

Reputation: 1362

How to add max-width to all images in TYPO3?

Is there a way to have all images automatically include a max-width so that they can never be bigger than their native resolution?

Upvotes: 0

Views: 2288

Answers (3)

dino
dino

Reputation: 31

A handy way to add en extra class to all your images is to use fluid_styled_content instead of css_styled_content and then overwrite the default fluid template partial.

If you want to try it set the following using the constants editor in your root template record

styles.templates.partialRootPath = any/path/to/your/partial/folder

then copy the file MediaGallery.html from typo3/sysext/fluid_styled_content/Resources/Private/Partials to your partial folder. Now TYPO3 uses your MediaGallery.html partial file for rendering and you have the freedom to change anything in the rendering there. For example:

<f:media file="{column.media}" class="img-responsive{f:if(condition: data.imageborder, then: ' img-thumbnail')}" width="{column.dimensions.width}" height="{column.dimensions.height}" alt="{column.media.alternative}" title="{column.media.title}" />

adds the class img-responsive to all images and if you selected a border for the image in the backend it will also add the img-thumbnail class.

You may also want to have a look to the following constants:

styles {
    content {
        textmedia {
            # maximum width of generated images
            maxW = 920
            # maximum width of generated images (beside text)
            maxWInText = 400
            # column spacing in pixels for multiple image columns
            columnSpacing = 10
            # row spacing in pixels for multiple image rows
            rowSpacing = 10
            # spacing to the text
            textMargin = 10
        }
    }
}

Upvotes: 2

biesior
biesior

Reputation: 55798

Of course there is a way... with CSS, if you are using i.e. Twitter Bootstrap 3+ just add the class img-responsive to all your images (via TypoScript or with JavaScript line at the bottom).

You can just also use this definition in your stylesheet, just make sure it's not overridden later by TYPO3 (check it with browser inspector tools):

img {
    display: block;
    max-width: 100%;
    height: auto;
}

Upvotes: 0

sven
sven

Reputation: 599

Images are not upscaled during processing. If they appear bigger than their native resolution you should check your styles.

Upvotes: 0

Related Questions