t3solution / t3sbootstrap

Startup extension to use bootstrap 5 classes, components and more out of the box.
GNU General Public License v2.0
24 stars 20 forks source link

sizes in picture element #26

Closed us14v closed 4 years ago

us14v commented 4 years ago

How do you set value of "sizes" in picture element?

constants:
styles.content.textmedia.maxW = 1920
setup:
tt_content.textmedia.dataProcessing.20.maxGalleryWidth = 1920

then, i add a ce of textmedia to the page, and this is what happens:
tx_t3sbootstrap_container = no container => sizes="(min-width: 1890px) 1890px, 100vw"
tx_t3sbootstrap_container = container-fluid => sizes="(min-width: 1110px) 1110px, 100vw"

if i add textmedia inside a two-col Gridelement with container-fluid px-0 and no-gutters, then sizes is always sizes="(min-width: 550px) 550px, 100vw"
if i put a value in imagewidth there is no change in sizes.

Have i missed a constant to configure this?

us14v commented 4 years ago

Sorry, forgot to mention: TYPO3 10.4.1 and t3sbootstrap 4.4.5

t3solution commented 4 years ago

I should probably write a better docu for this. If you set a width for images in textmedia and you will have exactly this width in the FE, you have to set "Gallery row width in %" to "none". If you also set the height for the images and activate "ratioWithHeight" in the constant editor under "T3SB :: Image settings", the image will be cropped in this ratio. If you don't specify with and height and set "Gallery row width in%" to "auto" or any percentage, the width of the images will be calculated automatically. Hopefully that will help you!

us14v commented 4 years ago

Man... that was easy ;)
Since i was so focused on how this worked in older versions, i totally overlooked this new value of none in tx_t3sbootstrap_inTextImgRowWidth.
Also, as a user/integrator iwould think that auto, w-100 and none would be more or less the same.

t3solution commented 4 years ago

... in some cases this is true. However, if textmedia is in a grid element, it looks different!

us14v commented 4 years ago

One question though:
am i correct in assuming that sizes will be determined by bootstraps container-width's?
Container is 1140px , so sizes in TwoCol is 1140 - (2 15 gutterwidth) / 2 = 550px ?
if one overrides tt_content.textmedia.dataProcessing.20.maxGalleryWidth = 1920, and puts a container-fluid around a gridelement, should then the math for sizes not be:
1920 - (2
15 gutterwidth) / 2 = 945px ?

peerlight commented 4 years ago

So how influence gridelement parent and page layout the calculated size?

I have a textmedia in the left column of an equally sized two column gridelement. Image position is top left, gallery width is 50%. The 2-col-grid lives in a page "footer" and is added to the footer section of every fe page via footer content from page.

The size of the calculated image is different when page is onecol or twocol_9-3: The whole markup of the CE is the same in any page - just width/height of the image tags different ...

How can this happen?

t3solution commented 4 years ago

This should be fixed - if not, you can reactivate this issue! Beset Regards helmut