how are you?
I have a problem with a page I am trying to create for my store. It's a page with a headline plus 9 images, that could be easily achieved with a section (title + blocks) but this headline + photos (lets call it gallery) appears three times on my page.
How to repeat the same section, different data on the same page? So far I have the template layout for my page, I know how to add sections and snippets, the issue is how to reuse that gallery section containing title + photos.
For example, I could do this on my page layout:
{% section 'page-street-template' %}
{% section 'page-street-template2' %}
{% section 'page-street-template3' %}
But that's quite ugly and I will need to repeat everything three times.
Thanks
]1
Sections are not repeatable outside the index page.
You can call the same section multiply times, but the data will be the same. Once you change a section data this will be applied for each page you use this section for.
If you like to use repeatable data and you don't rely on the blocks for the section at the moment, you can use blocks, since they are repeatable and you can have different data.
If you are using blocks you can create a more complex logic where you will have a different type of block for your heading and a separate one for your image, then you will need to split your content in order to achieve the above layout you provided.
That said if you use the section on a different page the blocks data will be applied to it as well.
So you can't use sections on multiply pages with different content. The content shared between all pages (except the homepage if the section is designated to be used there as well).
If you like to have a different dynamic content for different pages the best approach will be to use an Metafields APP.
Other than that you can use other approaches that will require more coding like:
prefixed page, where you prefix pages and called using pages[handle] to get their content
navigations, where you can create a navigation with the same name as the page and based on the links call each page link in linklists[page.handle].links => link.object.content
TLDR; no you can't reuse the same section on the page with different data, but you can go around this limitation.
Related
I have a search form in my header rendered as a cObject from a content element which is a ke_search searchbox and it leads to a /search page when submitting.
I also have subpages that are supposed to only look through seperately indexed pages like news and other pages.
For that I have folders in the typo-backend which contain indexer configs.
My problem is that when I set up that search box in the header the other searches are using the indexer config from the header (probably because it's the first searchbox on that page).
How do I make sure that every searchbox uses it's correct index?
As mentioned: Everythings seems to be split up nicely in the backend.
I can only imagine that somethings going wrong because the searchboxes are rendered with the same id but how can I make sure they render with diffrent ID's?
I managed to get an answer from the team behind Ke_Search.
When implementing a global searchbox that is used across every page, you should implement the searchbox as plain html and not as a content element in Typo3. You can only have one searchform as a content element per page.
Here's the documentation on how to implement the html version:
https://docs.typo3.org/p/tpwd/ke_search/main/en-us/Templating/Searchbox.html#include-searchbox-with-plain-html
Just leaving this here for anyone running into the same issue.
I'm building a simple personal static webpage. It'll be 4-5 pages (maybe more later) that all share a nav bar and header design at the top of the page.
I don't want to repeat the HTML and CSS for the navbar/header at the top of every page - ideally I'd like it all in one place.
If I were creating this using a web framework like Django, Sinatra, Rails, etc... I could use templates and partials to build the page using shared components like the navbar/header.
But I'm trying to keep things as simple as possible since it's a small set of static pages.
Is there a way to keep all the HTML in one file and reference it from the other files?
If not, is there a simple tool that will let me leverage the functionality that partials and templates provide, and just "compile" the final product into a series of HTML pages?
Thanks!
Use a one main Html file with all navigation bars, footer, menu and etc.
Keep a blank place, for example a blank div in the main page.
Keep other html pages in a separate place.
Load the contents dynamically to the blank div in the main page using javascripts.
Here’s a scenario:
I have a three page website implementing <iron-pages>. Nav is a toolbar with three paper tabs, no drawer. When I click on the tabs, the content of the iron-pages loads below the toolbar. All good.
Now, I have a few child pages that I want to link from the content of one of the three pages. When the page loads, I don’t want it to load below the three tabs but rather be sort of a new page with a different toolbar, with an arrow on the top left to return to the previous view, separate header title, etc.
A few questions:
Should these child pages be part of the same <iron-pages> list that the three main pages are in? If not, how do you recommend? (When I do, content loads below the toolbar, as expected.)
Should these be an entirely separate page, like a sibling to index.html or in /src, that I link to? If so, is it part of the same app then?
Sorry for the noob questions. Still trying to understand how single page apps are structured, in such scenarios. Eventually I want these pages to be <animated-pages> so that I can transition from the main page to the child pages and back. Will save those questions for another time...
Thanks!
An easy solution is to move your nav-bar component to each of your top level pages that need it. You can then move your new "sub-page" so it's a sibling of your other pages.
How users navigate to your different pages does not necessarily need to dictate how you structure the DOM.
Answers to your other questions
Should these child pages be part of the same list that
the three main pages are in? If not, how do you recommend? (When I do,
content loads below the toolbar, as expected.)
From what I can tell, no. Keeping all of your pages (even "sub-pages") as siblings will decouple the DOM from the app hierarchy (ie if the hiearchy of your views change, your markup can stay the same).
Should these be an entirely separate page, like a sibling to
index.html or in /src, that I link to? If so, is it part of the same
app then?
Polymer lets us build composable building blocks, so I'd recommend having a different custom web component for each of these pages. In my apps, I usually stick all of my web components in the same folder. A sample directory structure might look like this:
my-app/
index.html
src/
components/
nav-bar.html
my-page1.html
my-page2.html
my-page3.html
You can then make use of your custom components in index.html
I am designing a web application using ASP.NET, and I have a template for my website.
In order to prevent code duplication, I used a Master page and designed my website template in there. Then I added as many forms as was needed and referenced to the Master page.
In next step, in order to add content to the forms, I used a ContentPlaceHolder.
Size of the body or form in Master page is not variable. moreover, I have variable amount of content in each form. As a result, the height of my form may be different from each other.
My question is then what should I do to have forms with variable height (not width and only height) at the same time using the Master page? Is there other solutions instead of using Master page to to such a work (except using the code for each form separately, because it is not a good way)?
I have some questions regarding theming Orchard CMS. So, let's begin... I have a website that will have 5 pages and some of them have different layouts.
Pages and zones within it:
Homepage - Content, TripelFirst, TripelSecond, TripelThird
Concept and Rentals page - Content, AsideFirst, AsideSecond
Press and Service Department page - Content, AsideFirst, AsideSecond (different layout then the previous two pages)
Note: Even though all of the pages have the Content zone, except Homepage none of the pages uses it. Other pages only have HTML widgets located in one of the zones.
1) I've read that it is possible to create the layout for the specific ID, the problem is I can't find that ID to create the layout for specific ID.
2) As you can see, couple of pages have the same layout, how to assign them to the specific layout? For example, if I create the layout for Concept and Rentals page how can I assign the specific layout to them and also how can I assign the layout to Press and Service Department pages?
3) How to add the class tag to the body? The problem is that Orchard CMS creates the body before everything else so it isn't contained in the layout cshtml files.
Thank you in advance!
when you edit the page in the admin, the url will look something like http://localhost:30320/OrchardLocal/Admin/Contents/Edit/16
16 is the id here.
Several things you can do. Easiest is to use this module: http://orchardproject.net/gallery/List/Modules/Orchard.Module.Downplay.Orchard.LayoutSelector
Alternatively, you could programmatically create alternates based on arbitrary criteria: http://weblogs.asp.net/bleroy/archive/2010/12/14/switching-the-layout-in-orchard-cms.aspx
Finally, you can often avoid to have to create an actual separate layout by just varying what widgets go where, using layers.
The body tag is in document.cshtml, which you can override in your own theme.
1. Not sure what you mean by ID? If you click Widgets on the DashBoard, there are Layers there. A layer is a collection of widgets that will activate for a specific thing, Like the authenticated Layer will display those widgets you define when a user is authenticated.
Expanding on (1) and for (2), you will be able to create a new layout by adding widgets to a layer.
Check out:
Tagged Layer Rule - Allows you to add widgets based on a tag. Now, you can add pages for concepts and rentals and then specify a layer for these tags, within that layer, you can add any widgets you like. These will only appear when that tag is encountered.
Also check out:
Content Type Layer Rule - Haven't tried this, but it falls on the same lines.
3. To customize the look there is something called Shapes. Each Zone I think has a corresponding cshtml files. You can even use the ShaperBuilder to even render html in code, again, don't know too much about this but I can tell you, you need to look into these articles.
Using shapes as Html helpers in Orchard
Using shapes as Html helpers in Orchard
Taking over list rendering in Orchard
Dispatching Orchard shapes to arbitrary zones
HTH, I'll try and contact some orchard folk that are on SO.
So to help you out here
The ID of the Home Page is always 11 for a fresh install though I imagine that you can delete the home page and create a new one and give it another ID. To find the ID of the other pages open up the DB and look at the Content Items.
I know of no way to apply Layouts other than by ID so just duplicate the layout pages as you have so few pages.
I would just use a small jQuery script
$(document).ready(function{
$('body').addClass('SomeClass');
});