portrait)

Current License: CC BY-SA 4.0

14 events

when toggle format	what		by	license	comment
Sep 16, 2019 at 3:55	history	edited	Alex Roper	CC BY-SA 4.0	Fix typo.
Sep 16, 2019 at 3:49	comment	added	MrGlasspoole		Seems like i have to set both. media="(orientation: portrait), (max-width: 799px)" and sizes="(orientation: portrait) 80vw, (max-width: 799px) 60vw". If i omit "media" i get the rotated image on the desktop.
Sep 16, 2019 at 2:22	comment	added	MrGlasspoole		That way the rotated picture is to width if the phone is landscape because the other images are only 60vw in landscape and below 799px. If i omit "media" and do sizes="(orientation: portrait) 80vw, (max-width: 799px) 60vw" i have the rotated image also on my PC (though the desktop is more than 799?).
Sep 15, 2019 at 23:40	comment	added	Alex Roper		To show the portrait image below 800px as well try `media="(orientation: portrait), (max-width: 799px)"`. That gets evaluated like an "or" statement. It matches if either in portrait orientation or the viewport is less than 800px.
Sep 15, 2019 at 23:18	comment	added	MrGlasspoole		I updated my question how i did it now. A view weeks ago i was playing with "fillTransforms" but it did not work how i wanted it. Can't remember why i did it how i do it now. Problem left for now is the last paragraph of my question.
Sep 15, 2019 at 21:54	history	edited	Alex Roper	CC BY-SA 4.0	Add even more code examples and explanations.
Sep 15, 2019 at 21:16	history	edited	Alex Roper	CC BY-SA 4.0	Add explanation for using conditionals with the null-coalescing operator.
Sep 15, 2019 at 21:14	comment	added	Alex Roper		Yes, you would transform both portrait and landscape images. I can add some suggestions for simplifying that.
Sep 15, 2019 at 20:59	comment	added	Alex Roper		`??` is the null-coalescing operator. twig.symfony.com/doc/2.x/templates.html#other-operators. It prevents errors when calling a method like .one() if there isn't asset selected. Here's an excellent explanation of how and why to use it: straightupcraft.com/events/twigs-null-coalescing-operator
Sep 15, 2019 at 12:53	comment	added	MrGlasspoole		What does the "?? null" do? First time i see it. That way it means i have to put the Imager code twice in my template. Also I'm not sure if the width and height settings also work on the portrait images.
Sep 15, 2019 at 12:41	comment	added	Alex Roper		Okay, I added an example of accessing 2 images in a row in the template.
Sep 15, 2019 at 12:39	history	edited	Alex Roper	CC BY-SA 4.0	Add additional code example and explanation.
Sep 15, 2019 at 12:04	comment	added	MrGlasspoole		The problem is more how to handle it in Craft than the HTML. I also thought about the second column. Problem is then a can not set extra style/css on that image. Also i'm not sure how to get the image from the second column (code). Something like this would be nice: i.imgur.com/i0ahCeM.jpg
Sep 15, 2019 at 11:39	history	answered	Alex Roper	CC BY-SA 4.0