I am converting a HTML theme to Drupal 8 theme. I have a region named hero. I want to print my views result in the hero region.
I can print {{page.hero}} in page--front.page.html file with custom block but cannot print on the same region with views block.
page--front.html.twig
<html>
<body>
<div>{{page.primary_links}}</div>
<div>{{page.hero}}</div>
</body>
</html>
minnak.info.yml
core: 8.x
type: theme
base theme: bootstrap
name: 'minnak Sub-Theme (CDN)'
description: 'Uses the jsDelivr CDN for all CSS and JavaScript. No source files or compiling is necessary and is recommended for simple sites or beginners.'
package: 'Bootstrap'
regions:
primary_menu: 'Primary Menu'
secondary_menu: 'Secondary Menu'
hero: 'Hero'
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
libraries:
- 'minnak/global-styling'
I accidentally filter node type to hero so that it was not shown on the page--html.twig. It was due to my stupidity
Related
recently in Neos CMS, I got this error when i used content element in page.
An exception was thrown while Neos tried to render your page
The Fusion object `Company.Corp:Content.ContactUsPage` cannot be rendered: Most likely you
mistyped the prototype name or did not define the Fusion prototype with
`prototype(Company.Corp:Content.ContactUsPage) < prototype ...` . Other possible reasons are a
missing parent-prototype or a missing `#class` annotation for prototypes without parent. It is
also possible your Fusion file is not read because of a missing `include:` statement.
But I think my Node and Fusion file are correct without any mistake. But maybe Im wrong. Could you please help me with solve this error? Im beginner in this.
Here is my code from Node file called NodeTypes.Content.ContactUsPage.yaml:
'Company.Corp:Content.ContactUsPage':
superTypes:
'Neos.Neos:Content': true
ui:
label: 'Contact Us Page'
icon: icon-file-text
inlineEditable: true
inspector:
groups:
showCases:
label: 'Contact Us Page Data'
icon: icon-file-text
position: 5
properties:
smallTitle:
type: string
defaultValue: ''
ui:
label: 'Small Title'
inspector:
group: 'contactUsPage'
editorOptions:
placeholder: ''
maxlength: 300
And here is my fusion file called ContactUsPage.fusion:
prototype(Company.Corp:Content.ContactUsPage) < prototype(Neos.Neos:ContentComponent) {
smallTitle = Neos.Neos:Editable {
property = 'smallTitle'
}
renderer = afx`
<div id="contact" class="row mt-5">
<div class="col-lg-6">
<div class="contact-caption">
<div class="section-title mt-5">
<div class="upTitle">{props.smallTitle}</div>
</div>
</div>
</div>
</div>
`
}
re-name your Fusion file to "Content.ContactUsPage.fusion" and you should be fine.
OR
Alternatively, you could re-write line1 in your .yaml to:
Company.Corp:ContactUsPage':
both should work
The naming of the fusion file needs to be equivalent to the first line in your yaml. if you go for "Content.foo" your Fusion needs to be named "Content.Foo.fusion" as well.
hope that helps
My question is how does the /admin/djangocms_icon/includes/assets.html file look like? Can someone give a sample supposing I am using font awesome 5? Below are the configuration settings that I followed on Github.
Configuration
This addon provides a default template for all instances. You can provide
additional template choices by adding a DJANGOCMS_ICON_TEMPLATES
setting::
DJANGOCMS_ICON_TEMPLATES = [
('svg', 'SVG template'),
]
Web Font Icons
##############
The django CMS Icon plugin ships with Font Awesome 4 as default. This can
be changed by overriding the following setting::
DJANGOCMS_ICON_SETS = [
('fontawesome4', 'fa', 'Font Awesome 4'),
]
To use Font Awesome 5 in the above example; see the options below from the DJANGOCMS_ICON_SETSlisted.
In addition you need to load the resources for your fonts in /admin/djangocms_icon/includes/assets.html. Add this file to your project
in order for the icon picker to pick up your custom icons in the admin.
The icon picker supports numerous font libraries <http://victor-valencia.github.io/bootstrap-iconpicker/>
out of the box. You can also add multiple font sets like this::
DJANGOCMS_ICON_SETS = [
('elusiveicon', 'el', 'Elusive Icons'),
('flagicon', 'flag-icon', 'Flag Icons'),
('fontawesome4', 'fa', 'Font Awesome 4'),
('fontawesome5regular', 'far', 'Font Awesome 5 Regular'),
('fontawesome5solid', 'fas', 'Font Awesome 5 Solid'),
('fontawesome5brands', 'fab', 'Font Awesome 5 Brands'),
('fontawesome5light', 'fal', 'Font Awesome 5 Light',
'5.3.1_pro'),
('glyphicon', 'glyphicon', 'Glyphicons'),
('ionicon', 'ion', 'Ionicons Icons'),
('mapicon', 'map-icon', 'Map Icons'),
('materialdesign', 'zmdi', 'Material Design'),
('octicon', 'octicon', 'Octicons'),
('typicon', 'typcn', 'Typicons'),
('weathericon', 'wi', 'Weather Icons'),
]
I just had to figure this out myself. It depends on whether you're trying to include a preconfigured font or your own.
Including preconfigured fonts
There is an example of an assets.html provided in the official repository at djangocms_icon/templates/admin/djangocms_icon/includes/assets.html and it's in fact linking to Font Awesome 5 (5.3.1 specifically):
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
In order to include another font:
Copy the assets.html file into your templates folder at templates/admin/djangocms_icon/includes/assets.html (it overrides the template's default),
Add another <link> referring to your (external or local) font(s) of choice,
Add the references in your settings.py's DJANGOCMS_ICON_SETS by copying the respective element(s) from the docs.
Including custom fonts
For custom fonts, it's a tad more complicated. In my case, I only had a single .ttf file with custom icons, no CSS. In this case, the assets.html looks like this:
{% load static %}
<link rel="stylesheet" href="{% static 'css/icons/my_icons.css' %}">
In my_icons.css, include the font with an #font-face-rule and add a general myicon class plus individual classes for each of the icons:
#font-face {
font-family: "My Icons";
font-weight: normal;
font-style: normal;
src: url("../../fonts/MyIcons.ttf") format("truetype");
}
.myicon {
font-family:"My Icons";
font-style: normal;
font-size: inherit;
}
.myicon-A:before {
content:"A";
}
.myicon-B:before {
content:"B";
}
.myicon-C:before {
content:"C";
}
...
Next, put a JSON file at static/js/my_icons.js (or wherever you want) with a list of all the icon classes:
{
"iconClass": "myicon",
"icons": ["myicon-A",
"myicon-B",
"myicon-C",
"myicon-D",
...
]
}
(To generate all possible symbols, I opened the font in MacOS's font manager, copied all of the glyphs with cmd-A/cmd-C - they are really just letters - and used that to generate the rules with a short Python script.)
Finally, in your settings.py, you load the JSON and set up the reference to your custom font:
with open('path/to/static/js/my_icons.js')) as iconfile:
MY_ICON_SET = iconfile.read()
DJANGOCMS_ICON_SETS = [
(MY_ICON_SET, # = the content of the JSON file
'myicon', # = the css class
'My Icons' # = the label in the admin interface
),
]
That should be it. Don't forget to include your custom font in your website as well (e.g. in the header of your base.html template) for the icons to show up in the content as well.
I'm trying to render a view with an id in the url:
router.get('/employee', authController.protect, viewsController.getOverviewEmployee);
router.get('/employee/:id', authController.protect, viewsController.getOneEmployee);
The /employee works fine, but when I get to the /employee/:id page the css and scripts won't load and the console shows me this error:
The resource from
“http://127.0.0.1:3000/employee/lib/bootstrap/css/bootstrapmin.css”
was blocked due to MIME type (“application/json”) mismatch
(X-Content-Type-Options: nosniff).
this is my index.pug header:
doctype html
head
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
meta(name='description' content='')
meta(name='author' content='Dashboard')
meta(name='keyword' content='Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina')
title Admin
// Favicons
link(href='img/favicon.png' rel='icon')
link(href='img/apple-touch-icon.png' rel='apple-touch-icon')
// Bootstrap core CSS
link(href='lib/bootstrap/css/bootstrap.min.css' rel='stylesheet')
link(rel='stylesheet', type='text/css', href='lib/bootstrap-fileupload/bootstrap-fileupload.css')
// external css
link(href='lib/font-awesome/css/font-awesome.css' rel='stylesheet')
// Custom styles for this template
link(href='dashcss/style.css' rel='stylesheet')
link(href='dashcss/style-responsive.css' rel='stylesheet')
getOneEmployee:
exports.getOneEmployee = catchAsync(async (req, res, next) => {
const employee = await Employees.findById(req.params.id);
if (!employee) {
return next(new AppError('No document found with that ID', 404));
}
res.status(200).render('admin/employeeManager',{
title: 'Employee',
employee
});
});
and the employeeManager.pug
extends index
block content
section#container
MAIN CONTENT
// main content start
section#main-content
section.wrapper
h3
i.fa.fa-angle-right
| Editar Colaborador
.row.mt
.col-lg-12
h4
.form-panel
.form
form.cmxform.form-horizontal.style-form#commentForm(method='get' action)
.form-group
label.control-label.col-lg-2(for='cname') Nome*
.col-lg-10
input.form-control#cname(name='name' minlength='2' type='text' required)
.form-group
label.control-label.col-lg-2(for='cphone') Telefone*
.col-lg-10
input.form-control#cemail(type='cphone' name='phone' required)
.form-group
label.control-label.col-lg-2(for='cdescription') Descrição*
.col-lg-10
input.form-control#curl(type='description' name='description' required)
.form-group
label.control-label.col-lg-2(for='ccomment') Your Comment (required)
.col-lg-10
textarea.form-control#ccomment(name='comment' required)
.form-group
label.control-label.col-md-3 Image Upload
.col-md-9
.fileupload.fileupload-new(data-provides='fileupload')
.fileupload-new.thumbnail(style='width: 200px; height: 150px;')
img(src='http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image', alt='')
.fileupload-preview.fileupload-exists.thumbnail(style='max-width: 200px; max-height: 150px; line-height: 20px;')
div
span.btn.btn-theme02.btn-file
span.fileupload-new
i.fa.fa-paperclip
| Select image
span.fileupload-exists
i.fa.fa-undo
| Change
input.default(type='file')
a.btn.btn-theme04.fileupload-exists(href='', data-dismiss='fileupload')
i.fa.fa-trash-o
| Remove
span.label.label-info NOTE!
span
| Attached image thumbnail is
| supported in Latest Firefox, Chrome, Opera,
| Safari and Internet Explorer 10 only
.form-group
.col-lg-offset-2.col-lg-10
button.btn.btn-theme(type='submit') Salvar
|
button.btn.btn-theme04(type='button') Cancelar
This is because you are using relative url's in your attributes.
Replace this:
link(href='img/favicon.png' rel='icon')
With this:
link(href='/img/favicon.png' rel='icon')
To explain this further, when you are viewing /employee then the relative link at img/123.jpg is correctly resolved as /img/123.jpg. However, as soon as you go to the url /employee/joeblow then the relative link is looking for /employee/img/123.jpg. You'll be able to confirm this by opening Developer Tools in your browser then looking at the requests made in the Network tab.
Adding the slash at the front of all img elements will ensure that they look for the images in the correct folder, the one off the root (/).
The bootstrap mime-type error must be coming from one of the libraries that is loading correctly but not finding a dependency due to the issue described above.
How can we customize an ActiveAdmin page for different users based on their role:
ActiveAdmin.register_page 'Dashboard' do
content title: 'Admin Content' do
# show this only to admins
end
content title: 'Reviewer Content' do
# show this only to reviewers
end
end
After trying several complicated things, the solution was straightforward:
ActiveAdmin.register_page 'Dashboard' do
menu priority: 1, label: proc { I18n.t('active_admin.dashboard') }
content title: proc { I18n.t('active_admin.dashboard') } do
render partial: current_user.admin? ? 'admin_dashboard' : 'content_dashboard'
end
end
Then you can render those partials based on roles.
Following the documentation of the YUI DataTable control i've inferred the following code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></SCRIPT>
<SCRIPT type="text/javascript">
// Create a new YUI instance and populate it with the required modules.
YUI().use('datatable', function (Y) {
// Columns must match data object property names
var data = [
{ id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
{ id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
{ id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
];
var table = new Y.DataTable({
columns: ["id", "name", "price"],
data: data,
// Optionally configure your table with a caption
caption: "My first DataTable!",
// and/or a summary (table attribute)
summary: "Example DataTable showing basic instantiation configuration"
});
table.render("#example");
});
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
The insulting thing is that the documentation says:
This code produces this table:
except that this code produces this table:
So obviously i'm missing something pretty fundamental about how to render a YUI data table. What is the correct way to render a YUI data table?
Q. How to render a YUI datatable?
Another page mentions including a <div>, changing my <BODY> from empty to:
<BODY>
<div class="example yui3-skin-sam">
<div id="simple"></div>
<div id="labels"></div>
</div>
</BODY>
but does not change the look of the control.
Add class="yui3-skin-sam" in body tag, table css is written corresponding to this class.
Move the <script>s to the bottom of the <body>, or at least after the <div> that will contain the DataTable. That will avoid a race condition where the scripts may be loaded before the DOM is set up.
render('#example') is telling the DataTable to render into an element with an id of 'example' The markup sample you included has a div with a class of 'example', then two divs with ids 'simple' and 'labels'. You need to make sure you're rendering inside a parent element with class yui3-skin-sam. If you tell a YUI widget to render into an element it can't find, it falls back to rendering it inside the <body>. You can fix this in a few ways:
add the class to the <body> tag instead of a <div> (not a bad idea, but you should still fix the render target selector)
use a render(?) target selector that matches an element on the page, such as render('.example'), render('#simple'), or render('#labels').
In any case, make sure your render target is inside an element with class="yui3-skin-sam"