Wrapping the article details/text around the intro image - Cassiopeia Topic is solved

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Thu Aug 04, 2022 7:17 am

G'day,

This has got me beaten. I would like to place the intro image(s) on a category blog in J! 4.x in such a way as they float: inline-end but don't display as much white space (above the article details). See the attached screenshot. A live example of the problem is at https://j4xdemo.enduring.com.au/demonstrations.

I've spent the past three days trying to sort this out; I've read the useful guide at https://slides.woluweb.be/cassiopeia/cassiopeia.html but I'm still unable to "close the gap". (By the way, the image dimension is 500px x 250px, and I want it rendered this way when looking at the article view, but in the category blog I want the image "resized" 50% and that's why I've defined a CSS rule to achieve that. It's just the text wrapping that I'm not getting right.)
You do not have the required permissions to view the files attached to this post.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 365
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by Mr. Wimpy » Thu Aug 04, 2022 9:51 am

As far as I know flexbox (or css-grid) do not wrap around objects and they ignore floats.
You can't L-shape text around images for example with flexbox/grid.

The quick and dirty would be to set .blog-item to display: block;
And float .item-image.
(You need to edit width/height of figure/image)

Another option: set the content and image side by side
(Code is simplified)

Code: Select all

.blog-item {
	display: flex;
	flex-direction: row; /* was: column */
	gap: 1em; /* alternative to using margins between text and image */
	(...)
}

.float-end {
	flex: 0 1 250px; /* set width for the image */
	min-width: 250px; /* because... */
	(...)
}

.float-end + .item-content {
	order: -1; /* place .item-content before/left of .float-end */
}

.com-content-category-blog .item-content {
/*	display: contents; Remove/hide this: else everything is in columns  */
}

div.com-content-category-blog__items figure.item-image img {
/*	max-width: 20%; Remove/hide this: else the image will be really small */
}
Hopefully this gets you on you way.

Regards,
Wim

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Thu Aug 04, 2022 10:14 am

Thanks, Wim. I'm not happy with the result, though. It wasn't that difficult to do with Protostar in J! 3.x and because the intro image position was controlled like this:

Code: Select all

<div class="pull-right item-image">
			<img src="/images/..." alt="" itemprop="thumbnailUrl"></a>
</div>
It's more complicated with J! 4.x. Anyway, I'll post a screenshot in the morning; it's late and time for me to "close up shop". 8)
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Thu Aug 04, 2022 5:31 pm

Mr. Wimpy wrote:
Thu Aug 04, 2022 9:51 am
As far as I know flexbox (or css-grid) do not wrap around objects and they ignore floats.
You can't L-shape text around images for example with flexbox/grid.
That's a real shame. It was so easy to wrap the text around intro images J! 3.x. See demonstration of how it looks in J! 3.x at https://j3xdemo.enduring.com.au/blog.

I removed the CSS rules I created myself and used @Mr. Wimpy's suggestions

Code: Select all

.blog-item {
	display: flex;
	flex-direction: row; /* was: column */
	gap: 1em; /* alternative to using margins between text and image */
}

.float-end {
	flex: 0 1 250px; /* set width for the image */
	min-width: 250px; /* because... */
}

.float-end + .item-content {
	order: -1; /* place .item-content before/left of .float-end */
}
As you can see at https://j4xdemo.enduring.com.au/demonstrations, the result is not good. Surely it should be possible to use intro images in J! 4.x without having a lot of screen real-estate wasted with white space?

Screenshots for the settings used in J! 3.x compared with J! 4.x appear below. Can anyone advise what setting I should be using in J! 4.x to get the effect demonstrated at https://j3xdemo.enduring.com.au/blog?
You do not have the required permissions to view the files attached to this post.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Fri Aug 05, 2022 12:16 am

I'm surprised this question hasn't arisen before. I can't leave my category blog looking like a mess (with @Mr. Wimpy's suggestion intact)—see screenshot attached. I've removed any and all CSS rules that may impact on the ability of using J! 4's "native" intro image positioning and you can see how the category blog appears at https://j4xdemo.enduring.com.au/demonstrations. What I would like to see, however, is the category blog use the intro image in much the same way as how a single article is displayed but it eludes me how to achieve that result—the article text wraps around the intro image in the single article view but it doesn't in the category blog view.

Why is that? What can be done about it?
You do not have the required permissions to view the files attached to this post.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
ceford
Joomla! Guru
Joomla! Guru
Posts: 988
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by ceford » Fri Aug 05, 2022 2:00 am

Try a template override for com_content / featured; in default_item move line 35 to line 68:

Code: Select all

<?php echo LayoutHelper::render('joomla.content.intro_image', $this->item); ?>
Add a class to the intro image: left me-2

I tested by editing component/com_content/tmpl/featured/default_item.php so I could quickly change back.

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Fri Aug 05, 2022 2:31 am

I don't want a template override. This should be achieved "straight out of the box", just like it was done in J! 3.x. Compare the category blog view for J! 3.x (with the intro image on the right) with the category blog view for J! 4.x (and the intro image is not positioned right, even with the recommended image classes that I referred to earlier—with screenshots).

I think Cassiopeia is a dud here but I hope it's something easy to fix without using template overrides. This is what I want:
j3x_categoryBlog-introImage_current.jpg
... but this is what I get:
j4x_categoryBlog-introImage_current.jpg
You do not have the required permissions to view the files attached to this post.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
ceford
Joomla! Guru
Joomla! Guru
Posts: 988
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by ceford » Fri Aug 05, 2022 7:49 am

I agree that what you want is better looking. But you have hand-crafted the image to look good in that particular browser view. Your image is below the info block too. What happens when that blog item is in a column? What happens on a small screen? It is easy to see why the Cassiopeia design is the way it is!

To get the effect you want I think it is best to put the image in the article. Thus dispensing with the Intro and Full Images. You can add a style to handle small screens: max-width: 50%; Examples:

Full width:
intro-image.png
Mobile view:
intro-image-mobile.png
My example image is 300 x 352 pixels.
You do not have the required permissions to view the files attached to this post.

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Fri Aug 05, 2022 8:02 am

ceford wrote:
Fri Aug 05, 2022 7:49 am
I agree that what you want is better looking. But you have hand-crafted the image to look good in that particular browser view.
No, I didn't "hand-craft" anything. The examples I've used as stock-standard, unadorned, out-of-the-box, vanilla-flavoured Joomla. I refer again to the images in my previous post(s): in J! 3.x it was easy to do this; in J! 4.x the image floats around the text in the single article view but doesn't float in the category blog view despite the image having the same class settings—boxed float-end—for the "intro image" and the "full image".

In other words, the class settings have zero effect in the category blog view. This has nothing to do with customising anything. I just want it the class settings to work consistently.

In my opinion, and unless someone can show me what "intro image class" should be used with intro-images in Cassiopeia, I believe there's something wrong here. This should not be something that needs to be retrofitted to Cassiopeia (i.e. via a template override); there should be a "setting", just like there was a setting in Protostar, to "float"/pull the image to the right and allow the article text to wrap around the image in a category blog. I don't mind if there's an army of experts who can tell me I'm wrong as long as there's one person who can show me what works without having to immerse oneself in the arcane world of CSS.

I don't want a kludge: inserting an image inside the article. I want to use intro images just as I've enjoyed using intro images for the past decade or more in J! 3.x. If something's changed in that area and it's not possible to do this without that kind of kludge—having to revisit every article one may have written, modify the articles to insert an image—then I put it to the community that something's very peculiarly wrong! :-\
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 365
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by Mr. Wimpy » Fri Aug 05, 2022 8:16 am

In Protostar the image, title, info and intro are all in the same div.
In Cassiopeia the title, info and intro are in an extra div.

Looking at some of your screenshots I feel not all edits I wrote were made.

Anyway, ignore what I said earlier and use this:
This edit will make the content wrap around the image.

Code: Select all

.blog-item {
   display: block; /* was: flex */
   (...)
}

User avatar
ceford
Joomla! Guru
Joomla! Guru
Posts: 988
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by ceford » Fri Aug 05, 2022 8:22 am

Override: move line 35 to line 84 (for anyone who does want to do it this way).

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Fri Aug 05, 2022 8:49 am

*gasp* override! :( In other words, it's a "gotcha"—a defect—something that, in someone's mad rush to produce J! 4.x, was not properly tested. I won't use an override—overrides have a habit of breaking when new versions of software are released—and I'm far from happy with this way of addressing a basic requirement of web developers everywhere.

When people visit a website they shouldn't need to know what technology or techniques were employed in building it; visitors to a website aren't interested in whether it was built in J! x.y, or some other CMS, or whether it was "hand-crafted" using bits of LEGO.

Thanks, @Mr. Wimpy. The CSS change (while not perfect) is better than how things were.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Fri Aug 05, 2022 9:06 am

Until I can find another way of using resizing an image, I've had to create two images (one that is the full size and the other that is a reduced size) to be used depending on whether it's a single article view or a category blog view; this is no better a kludge than having to manually insert the image in the article. There should be an easier way to resize the image on-the-fly with CSS but, given that I've spent three days working on this problem I'm running up the white flag and putting the matter aside for a while.

The question is far from satisfactorily resolved yet.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
ceford
Joomla! Guru
Joomla! Guru
Posts: 988
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by ceford » Fri Aug 05, 2022 9:19 am

This problem is nothing to do with Cassiopeia. The call to render the Intro Image is in component/com_content/.../default_item.php - it is immediately before beforeDisplayContent in j3 (line 71) but has moved to before everything in J4 (line 35). The choice of solution is yours: a complicated imperfect css solution or a template override. The latter is pretty close to back to the way it was in J3.

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Fri Aug 05, 2022 9:33 am

Study the settings below ... have a really good look! ;)
j4x_images-settings.png
You do not have the required permissions to view the files attached to this post.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
ceford
Joomla! Guru
Joomla! Guru
Posts: 988
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by ceford » Fri Aug 05, 2022 9:53 am

It works for me with this moved to line 84:

Code: Select all

<?php echo LayoutHelper::render('joomla.content.intro_image', $this->item); ?>
I don't have a boxed style - so in or out makes no difference. What does it do?

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Fri Aug 05, 2022 8:04 pm

ceford wrote:
Fri Aug 05, 2022 9:53 am
I don't have a boxed style - so in or out makes no difference. What does it do?
Did you read the first post in this topic? Let's forget about the "boxed" style and concentrate on how the image settings are supposed to be used without discussing overrides. See the following infographic:
j4x_images-settingsV2.png
This new/changed approach J! 4's image settings was adopted in October 2017 (https://issues.joomla.org/tracker/joomla-cms/18319) and it was controversial at the time. Instead of having a drop-down list of options (like they were in J! 3.x) the image class field is a free-format, guesswork/"patchwork quilt". Not that I object to the use of free-format fields as long as one can rely on whatever-one-enters actually doing something.
You do not have the required permissions to view the files attached to this post.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Fri Aug 05, 2022 9:14 pm

I solved this without using any template overrides! :D

You can use the same image file as both the "full image" and the "intro image" the image will be floated right and the article text wraps around it, and resized on-the-fly on the category blog with these CSS tweaks to user.css:

Code: Select all

.blog-item {
   display: block; /* was: flex */
}
.blog-item figure.item-image {
    max-width: 15em;  /* experiment with different values as needed */
}
Thanks, @Mr. Wimpy, for getting me half-way there! 8)
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
ceford
Joomla! Guru
Joomla! Guru
Posts: 988
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by ceford » Fri Aug 05, 2022 9:45 pm

Good job! I learned something today! The following screenshot is from J4.2.0rc and the only change I made was to set max-width: 50%; in your suggested user.css. This ought to be written up - there are so many places to enter settings and styles it becomes very confusing.
You do not have the required permissions to view the files attached to this post.

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12266
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Wrapping the article details/text around the intro image - Cassiopeia

Post by sozzled » Fri Aug 05, 2022 10:02 pm

Additional note: using CSS (as distinct from fiddling with template overrides) also allows the website developer to apply other filters to the image, for example

Code: Select all

.blog-item figure.item-image {
    max-width: 15em;  /* experiment with different values as needed */
    box-shadow: 5px 2px 7px -3px rgba(0,0,0,0.8);
    margin-right: 10px;
    border-radius: 5px; 
}
;)
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)


Post Reply

Return to “Templates for Joomla! 4.x”