CMS Development

Pagenoi
Contributor

Adding a Magazine - monthly additions without restructuring the whole page

SOLVE

It's recently come to my attention that our current way of posting our monthly magazine is broken. I think it's easiest to explain with a visual, so the page is RealManage Community Moments, as you can see each month we add a new magazine and keep a running history of old editions. The problem is that this module is set up in a "Flexible Column" so adding a new one means the order (by month) becomes skewed.

For instance, in August, we will want the August edition to replace the July Edition and July to replace June, June to replace May, and May to replace April - That means April will need to be moved to a row below... I have not found any way of doing this easily. I created a drag and drop style page but it still requires a ton of moving around.

 

I know that it's possible though as that is how blog articles work on our main blog page, a new one is posted and the old one moves down the line. I am sure that I am either not thinking about this logically or I am just not understanding what I need to change but how can I create a page that has a new edition every month that allows previous editions to change position correctly?

 

*hopefully this makes sense to someone, I have been trying to figure out what I am even trying to describe and this is the best I could come up with.*

0 Upvotes
1 Accepted solution
piersg
Solution
Key Advisor

Adding a Magazine - monthly additions without restructuring the whole page

SOLVE

Hi @Pagenoi,

 

I think the best thing for this would be to use Flexbox.

 

Firstly, from your page it looks like you're using a new module for each of these magazines. I think you should re-factor this so they're all in one module, and you use a repeatable group to add new magazines. 

 

In HubL like this:

<div class="magazines-wrapper">
{% for item in module.magazines %}
<a class="magazine-item" href="{{ item.link.url.href }}">
<div class="article-cover">
<img src="{{item.image.src}}">
</div>
<p>{{item.date}}</p>
</a>
{% endfor %}
</div>

That allows you to add several elements that are the same (e.g. a magazine cover) as many times as you want in the page editor. And you can easily re-order by dragging the items around in the editor; the item at the top of the list would be the first on the page.

 

The css (using flexbox) would look something like

.magazines-wrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
width: 100%; } .magazine-item { display: flex; flex-direction: column; margin: 20px; max-width: calc(25% - 40px); }

 

 

Alternatively, you could do this using HubDB, where you manage all the magazines in the database and sort them on the page by date. Introduction to HubDB here.

View solution in original post

3 Replies 3
piersg
Solution
Key Advisor

Adding a Magazine - monthly additions without restructuring the whole page

SOLVE

Hi @Pagenoi,

 

I think the best thing for this would be to use Flexbox.

 

Firstly, from your page it looks like you're using a new module for each of these magazines. I think you should re-factor this so they're all in one module, and you use a repeatable group to add new magazines. 

 

In HubL like this:

<div class="magazines-wrapper">
{% for item in module.magazines %}
<a class="magazine-item" href="{{ item.link.url.href }}">
<div class="article-cover">
<img src="{{item.image.src}}">
</div>
<p>{{item.date}}</p>
</a>
{% endfor %}
</div>

That allows you to add several elements that are the same (e.g. a magazine cover) as many times as you want in the page editor. And you can easily re-order by dragging the items around in the editor; the item at the top of the list would be the first on the page.

 

The css (using flexbox) would look something like

.magazines-wrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
width: 100%; } .magazine-item { display: flex; flex-direction: column; margin: 20px; max-width: calc(25% - 40px); }

 

 

Alternatively, you could do this using HubDB, where you manage all the magazines in the database and sort them on the page by date. Introduction to HubDB here.

Pagenoi
Contributor

Adding a Magazine - monthly additions without restructuring the whole page

SOLVE

@piersg ,

 

Thanks for your suggestions and assistance. The template page we use is built with flexible columns that were intended to allow the user to add a new module each time from the page manager, since no one on our team is, strictly speaking, a dev. They needed the ability to add a new edition of the magazine quickly without ever going to the design manager, and this was just the closest thing to a solution. 


I attempted to use the Flexbox in previous iterations but was unable to make the solution work without editing through the Design Manager to change the order. For instance, right now edition July 2020 is in position 1, but next month that will need to change and from my understanding that will need to be done in the design manager unless I am missing something. This may still be the best option and it simply requires me to use a wrap and update the editions monthly on their behalf.

 

I would prefer to use the database set up as I personally think it makes more logical sense and seems to be the way it would be done in any other regard but I haven't been able to find a ton of knowledge content on the HubDB aside from the very basics and I am an SEO developer not necessarily a front-end developer. I am planning to dig in this week and see if I can make the HubDB work for the project but very much appreciate your input and assistance.

0 Upvotes
sharonlicari
Community Manager
Community Manager

Adding a Magazine - monthly additions without restructuring the whole page

SOLVE

Hey @Pagenoi 

 

Thank you for the information provided. I'll tag a few of our experts that can share their thoughts with you.

 

Hey @jonchim @Chris-M @Anton could you please advise @Pagenoi

 

Thank you & Happy Friday

Sharon


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes