How do I create a card-style article?

Be informed that this forum is not an official support forum for Joomla! 4.0. Any issues regarding Joomla! 4.0 must be reported at https://issues.joomla.org/.

Joomla! 4.0 is still in its Alpha stage. This forum should be used for sharing information about Joomla! 4.0.

Moderator: ooffick

Post Reply
GillianBPP
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 150
Joined: Wed Oct 01, 2014 10:25 am

How do I create a card-style article?

Post by GillianBPP » Wed Sep 04, 2019 11:00 am

I am attempting to set up a category blog so that I can test the various options outlined in this Github PR here: https://github.com/joomla/joomla-cms/pull/18319

The columns and masonry construction work fine, but I can't work out how to test the image alignment.

Simply creating an article and adding a picture doesn't seem to do anything. Here is an example of what a simple article html looks like:

Code: Select all

<p><img src="images/portland-olympic-rings.jpg" alt="portland olympic rings" width="144px" height="90px" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras gravida sem ut massa. Quisque accumsan porttitor dui. Sed interdum, nisl ut consequat tristique, lacus nulla porta massa, sed imperdiet sem nunc vitae eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque sit amet metus. Nullam tincidunt posuere ligula. Aenean volutpat ultrices ligula. In tincidunt. Aenean viverra suscipit tellus.</p>
and the layout looks like this, where Blog 3 has the picture in a separate paragraph from the text.
blog-layout.jpg
The PR implies that adding a css class, e.g.

Code: Select all

image-right
should align images in an article to the right. It doesn't.

So what should I be doing? Thanks.
You do not have the required permissions to view the files attached to this post.

waarnemer
Joomla! Hero
Joomla! Hero
Posts: 2329
Joined: Sun May 04, 2008 12:37 pm

Re: How do I create a card-style article?

Post by waarnemer » Wed Sep 04, 2019 11:44 am

you can of course add the class, but it needs to be in the css file also.

your css needs something like

img.image-right { float: right; }

or whatever else css markup is needed to make it appear on the right...

GillianBPP
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 150
Joined: Wed Oct 01, 2014 10:25 am

Re: How do I create a card-style article?

Post by GillianBPP » Wed Sep 04, 2019 1:10 pm

waarnemer wrote:
Wed Sep 04, 2019 11:44 am
you can of course add the class, but it needs to be in the css file also.

your css needs something like

img.image-right { float: right; }

or whatever else css markup is needed to make it appear on the right...
Thanks. It's all in the css file as it's now part of the Cassiopeia template css. If you look at the PR to see what it's supposed to do and then in the new menu item settings for a category blog, you'll see what I mean. Just adding the image class doesn't do anything.

waarnemer
Joomla! Hero
Joomla! Hero
Posts: 2329
Joined: Sun May 04, 2008 12:37 pm

Re: How do I create a card-style article?

Post by waarnemer » Thu Sep 05, 2019 10:50 am

You can set this in System->Global Config->Articles->Tab Editing Layout at the bottom.
You can also set in tab Images and Links when editing an Article (override global)


Still, missing is styling like:

Code: Select all

figure.pull-right.item-image a {
    float: right;
}
which would at least sent the image on a featured view to the right...

others are pull-left and pull-none

This is on Cassiopeia in Joomla 4.0.0 Alpha 11 - featured view on home page

GillianBPP
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 150
Joined: Wed Oct 01, 2014 10:25 am

Re: How do I create a card-style article?

Post by GillianBPP » Thu Sep 05, 2019 11:40 am

Thanks for the Global Config tip.

I tried to install the sample data yesterday so that I could inspect the code, but it totally trashed my installation.

gws
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3940
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: How do I create a card-style article?

Post by gws » Thu Sep 05, 2019 12:21 pm

GillianBPP wrote:
Thu Sep 05, 2019 11:40 am
Thanks for the Global Config tip.

I tried to install the sample data yesterday so that I could inspect the code, but it totally trashed my installation.
I installed the sample data and it trashed my install too (alpha 12). Culprit was the popular tags module,disable this and then use the fix database function and it should be OK.

waarnemer
Joomla! Hero
Joomla! Hero
Posts: 2329
Joined: Sun May 04, 2008 12:37 pm

Re: How do I create a card-style article?

Post by waarnemer » Thu Sep 05, 2019 2:59 pm

i just had an empty j!4.0.0Alpha11 where I created one article setting the intro image to float right.
in the 11alpha, nothing happens. Then I discovered de CSS missing.. and probably more..

alpha12? I cannot find.

gws
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3940
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: How do I create a card-style article?

Post by gws » Thu Sep 05, 2019 3:07 pm

@waarnemer try here https://developer.joomla.org/nightly-builds.html

Just discovered putting the template in fluid mode screws it up some what....


Post Reply

Return to “Joomla! 4 Related”