Is it possible to remove the logo header shown in the web-based output of NelmioApiDocBundle? And if so, how?
I would like to include the output of this endpoint (/api/doc if you're using the default settings) in an existing website. However, that site already has a header, and adding a second header would be a poor user experience IMHO. But I can't find any place in the documentation that describes how to exclude this gloriously 1990s-style piece of web design.
I've provided a screenshot of the default config below, which is what I get when viewing the docs in a tool like Insomnia. As you can see, the green header is covering the page as it scrolls.
Yes, you can do it.
You should override bundle template, say steps bellow :
1 - Create template file in 'templates/bundles/NelmioApiDocBundle/SwaggerUi/index.html.twig'
2 - Put the content bellow :
{% extends '#!NelmioApiDoc/SwaggerUi/index.html.twig' %}
{% block header %}
<a style="text-decoration: none;" id="logo" href="#" target="_blank">
<h1 style="color: black">You personal title</h1>
</a>
{% endblock %}
That's it , we done
I've now tested the answer provided by #Abdelhak-ouaddi, and while it's correct, I realize that I didn't ask the question clearly enough to get the answer I needed. The provided answer does work for changing the CONTENTS of the green header, but it doesn't remove the header entirely.
See this page at the NelmioApiDocBundle GitHub page for details on how to customize the twig template. The actual default template is located in the repo here.
What I found is that you can easily override the {% header %} twig block to change the contents of the header as the accepted answer states, but since the {% header %} tags are INSIDE the <header> HTML tags, doing this can't remove the header entirely.
In order to remove the ENTIRE header, you need to follow the steps in the accepted answer... but instead of just overwriting the {% header %} block, paste in the entire contents of the index.html.twig file. Then, completely delete the <header> HTML tags and everything inside them (including the {% header %} twig tags).
As a bit of extra credit: removing the header entirely leaves you with a large margin above the page title. You can get rid of that by adjusting the <body> tag in your new index.html.twig file to:
<body style="margin: 0px;">
I'm sure there's a cleaner way to do that, but... that's for another ticket.
Related
When i create a new Post and write in the excerpt, the post image on the news page just dissappears . It only works if i have no excerpt. Also .. How can i create new posts with existing classes already written in my css?
Without the excerpt ir works just fine. Showing image and text that i add on the post.
My code
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<div class="row"> {% component 'blogPosts' %}
</div>
</div>
</div>
</section><!-- #content end -->
When not defining an excerpt, a summary attribute is appended to the model. See https://github.com/rainlab/blog-plugin/blob/master/models/Post.php#L344 . If your content starts with an image, it might be that the summary function kicks in and generates the image.
As for the CSS part
I think you're looking to override the partial set by {% componenent 'blogPosts' %}. As per the docs (https://octobercms.com/docs/cms/components#overriding-partials)
All component partials can be overridden using the theme partials. If
a component called channel uses the title.htm partial. We can override
the partial by creating a file in our theme called
partials/channel/title.htm.
Alternatively you can cmd / ctrl + doubleclick to expand the default component markup inside the CMS editor.
In this way you can edit your markup to match your theme.
If you want to override markup there is really easy way. for image #CptMeatball added proper answer you can check that out.
This way you have full control on mark-up and you can edit it.
1. Click on expand component it will reveal mark-up of component
2. Now you can add your own markup and edit it.
if any doubt please comment.
I'm using a theme that use background image in template like this:
{% if page.header.background_image != '' %}
{% set background_html = 'style="background-image: url(' ~ page.media.images[page.header.background_image].url ~ ');"' %}
{% else %}
{% set background_html = "" %}
{% endif %}
In other page templates (in admin) I can see upload field, but not in modular - I see only title and order of modules.
I want to take advantage of image upload, but I can find place to put them, nor add it in the modular.yaml in the theme (I don't want to edit modular from the grav installation).
My goal is to edit theme in the manner where I can use the image upload.
As answered in Grav's discourse forum: If themes does not provide a modular.yaml file, it will use the one provided by antimatter, which seems to be the case with your theme. This modular.yaml does not provide a pagemedia field which allows you to add medias.
Thus, you only have two solutions:
Add your own modular.yaml file in themes/yourtheme/blueprints folder and add a pagemedia field
Add your media manually via ftp
Hope it helps
Paul
I have picked up the basics of using TWIG to create my site. I suppose I know how to use {%extend%} {%block%} {%include%} and {%set%}, in the most general sense.
I would like to include a block of code from within another twig file without including the whole file - as opposed to {% include 'file.twig' %}.
I have figured out how to set a variable in file.twig and output it using {{ variable | raw }}. I would like to do that in another file, like you would with using jQuery's .load function.
I swear the twig documentation does not seem to touch on this, it seems like really obvious and basic functionality. I have messed around with various combinations of include, for, with, in and only, colons and commas and whatever | is, and nothing.
I believe you are looking for horizontal inheritance via the use tag:
The use statement tells Twig to import the blocks defined in blocks.html into the current template (it's like macros, but for blocks)
The confusing part is that by itself, {% use ... won't actually insert the content of the blocks in the referenced template. To do that, you must use the block(...) function:
index.twig
{% use "blocks.twig" %}
{{ block('name') }}
blocks.twig
{% block name %}
<h1>Alex Weissman</h1>
{% endblock %}
{% block hobby %}
<p>Blanchin'</p>
{% endblock %}
For a working example, see my TwigFiddle (yes, it's a real thing!): http://twigfiddle.com/jjbfug
I have just setup a apache server and configured twig. I have two template files one called base.html.twig which has the core template elements and dashboard with blocks that correspond to the base.html.twig
dashboard.html.twig
{% extends "base.html.twig" %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
However when I browse to dashboard.html.twig I just see plain html showing all of the code above. Have I misconfigured something?
I am sure it's something simple so I thank you for your help in advance.
You should not directly "browse" to a twig file, it needs to be parsed and rendered by php objects using classes from Twig libraries.
see http://twig.sensiolabs.org/documentation
To use twig you need PHP installed too. Also you would need Twig PHP library to parse twig templates.
This question already has answers here:
How to create a template in HTML?
(3 answers)
Closed 9 years ago.
I have worked on several ASP.NET applications recentely, and I was simply fascinated by the simplicity of it's HTML layouting.
Basiccaly there is one layout file, in which you write all the static HTML, CSS, JS, or really anything that will stay the same on all pages. Then, there are content pages, in which you only write the content of the pages.
So, for example you have an about.cshtml file that looks like this:
<h1>My name</h1>
<p>I am a junior web developer... etc</p>
<p>Contact me at example#gmail.com</p>
That's all the information needed for the about content page, when requested it will be inserted in the layout page.
So, my question:
Are there any ready-to-use tools to make this happen via html, javascript or php? I found myself implementing it via ajax calls, but that really is just a waste of resources, having to async load all the html files I have.
For pure HTML, you could go down the route of using a static site generator. For example:
Jekyll
Pelican
In Pelican you have a base.html template, which contains everything that you want to appear on all pages, so the header and footer etc (These can also be called .header.html and then referenced in the main.html template.
Page content is written in Markdown, and put into folders called posts or pages, and then you run a generate command, and it will output all the html for you.
And pages can be written like this:
{% extends "base.html" %}
{% block title %}{{ page.title }}{%endblock%}
{% block content %}
<h1>{{ page.title }}</h1>
{% import 'translations.html' as translations with context %}
{{ translations.translations_for(page) }}
{{ page.content }}
{% endblock %}
So it extends the base.html template.
Further reading:
Pelican: a static blog generator for
Pythonistas
Pelican - Getting
started
Check out Model–view–controllers