Category Blog View in Module? Topic is solved

[williama]

Hi guys, I am trying to re-style my webpage as a one-page styled website.
I have figured out how to have the menu buttons scroll to different parts of the page, but I want to show several categories on the same page but in the category blog view with images. This is possible from menu with one category, but it does not seem possible with a module?

Ideally, I would like to have one line of 4 images from one category, and then 4 from another category below that.
I guess the best way to do this would be with modules assigned to only show when this page is loaded.
If there is a way to incorporate this into the article, that would be better though.
Any advice would be appreciated.

Here's a reference for the kind of style I am going for. See how the case studies and articles sections list four
https://www.dragonfly.co.uk

Thank you.

[williama]

The 'Articles - Newsflash' module almost seems to do this, but does not allow listing in columns.
Is there a way to modify this so that it does?

It seems like such a basic feature that is missing... well it's even there, just as a component rather than a module.

[Pavel-ww]

The 'Articles - Newsflash' module almost seems to do this, but does not allow listing in columns.
Is there a way to modify this so that it does?

Hi. I believe all you want can be done through CSS. Provide the link to your page with 'Articles - Newsflash' modules

[williama]

Hi Pavel,

Thank you so much for the reply. Here is a link to my test page.

https://www.waproductions.com/index.php/test

Ideally, I would like them to display in 4 columns. So four across, then another four across, and so on.

The 'Articles - Newsflash' module almost seems to do this, but does not allow listing in columns.
Is there a way to modify this so that it does?

Hi. I believe all you want can be done through CSS. Provide the link to your page with 'Articles - Newsflash' modules

[Pavel-ww]

Ideally, I would like them to display in 4 columns. So four across, then another four across, and so on.

Here is

Code: Select all

.newsflash {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

Result

1.jpg

--

Better to add your own class name to the module settings (Advanced Tab) and use it instead of .newsflash selector in the code

2.jpg

[williama]

That's great, thank you so much Pavel. Is it possible to add padding/space between each column?

Also, using it seems like using my own class name puts everything in one column straight down, the rest of the columns are empty.

Ideally, I would like them to display in 4 columns. So four across, then another four across, and so on.

Here is

Code: Select all

.newsflash {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

Result
1.jpg
--

Better to add your own class name to the module settings (Advanced Tab) and use it instead of .newsflash selector in the code
2.jpg

[williama]

I have managed to add space between the columns using the below, but it also adds space either side of the whole table. Is there any way to counteract that? Thank you.

grid-gap: 0 1em;

[Pavel-ww]

I have managed to add space between the columns using the below, but it also adds space either side of the whole table. Is there any way to counteract that? Thank you.

grid-gap: 0 1em;

Hi.
Now this page https://www.waproductions.com/index.php/test redirects to the login page. Where to see what you did?

[williama]

Sorry, it should work now.

I have managed to add space between the columns using the below, but it also adds space either side of the whole table. Is there any way to counteract that? Thank you.

grid-gap: 0 1em;

Hi.
Now this page https://www.waproductions.com/index.php/test redirects to the login page. Where to see what you did?

[Pavel-ww]

I have managed to add space between the columns using the below, but it also adds space either side of the whole table. Is there any way to counteract that? Thank you.

grid-gap: 0 1em;

Hi. This property does not add а space either side of the whole table. Explore this through Dev Tools of your browser to see what this space adds.

1.jpg

--

You can override this like that.

Code: Select all

.card-body {
	padding: 0;
}

But this code will affect all .card-body elements in other places. If you want to avoid this, add margin property to your code for .newsflash instead of using the code for .card-body padding.

margin-inline: -15px;

2.jpg

[williama]

Thank you so much Pavel, that all makes sense. I have gone with the latter suggestion to avoid affecting other card-body elements.

Last question, if I wanted to do this all via Module Class, how can I stop everything appearing in one column?
Everything looks correct with .newflash, but as soon as I set my own module class everything gets put into one column.

Thank you.

I have managed to add space between the columns using the below, but it also adds space either side of the whole table. Is there any way to counteract that? Thank you.

grid-gap: 0 1em;

Hi. This property does not add а space either side of the whole table. Explore this through Dev Tools of your browser to see what this space adds.

1.jpg
--

You can override this like that.

Code: Select all

.card-body {
	padding: 0;
}

But this code will affect all .card-body elements in other places. If you want to avoid this, add margin property to your code for .newsflash instead of using the code for .card-body padding.

margin-inline: -15px;

2.jpg

[Pavel-ww]

Last question, if I wanted to do this all via Module Class, how can I stop everything appearing in one column?
Everything looks correct with .newflash, but as soon as I set my own module class everything gets put into one column.

Hi.

.newsflash is still the target element for the code. And again, Dev Tools is your best assistant.

See where your .cat-blog-view-mod class was added, and then you can understand that you need to create a composite selector to aim at the .newsflash using your class.

2.jpg

[williama]

OK understood, I have got that working now.

Sorry, one more question on this. When viewing on mobile, things start to get a little mixed up.
Is it possible to make four columns appear as 2 or 1, or just something that fits better with a narrow mobile display?
Make the columns more responsive or dynamic depending on the size of the window?

Thank you.

Last question, if I wanted to do this all via Module Class, how can I stop everything appearing in one column?
Everything looks correct with .newflash, but as soon as I set my own module class everything gets put into one column.

Hi.

.newsflash is still the target element for the code. And again, Dev Tools is your best assistant.

See where your .cat-blog-view-mod class was added, and then you can understand that you need to create a composite selector to aim at the .newsflash using your class.
2.jpg

[Pavel-ww]

Sorry, one more question on this. When viewing on mobile, things start to get a little mixed up.
Is it possible to make four columns appear as 2 or 1, or just something that fits better with a narrow mobile display?
Make the columns more responsive or dynamic depending on the size of the window?

Change this value as you need at the breakpoints you need

1.jpg

Something like ...

Code: Select all

@media (max-width: 767.98px) {
    .cat-blog-view-four-col .newsflash {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px) {
    .cat-blog-view-four-col .newsflash {
        grid-template-columns: 1fr;
    }
}

[williama]

That's great, thank you. Works perfectly.

Thank you so much for all your help Pavel.

[Pavel-ww]

You are welcome.
Glad was to help