I just bought a WrapBootstrap theme and am trying to insert it into my CodeIgniter application. I've never used WrapBootstrap and am not sure what the next step is because many of the files have ruby in them (they are .erb files).
Here's what I have found:
First open your CSS files and replace all calls to ../img/ dir with plain images/ to make pipeline find the graphic elements of the theme .
For using the glyph you should create a new directory, fonts, to copy the glyph images there and expand the usable assets in application directory
Would I be able to use it if I just copied the JavaScript, images, fonts and style sheets? (if I took all of the assets)
Do this:
Put the css, js, img and other asset folders into a folder called assets at the same level of Codeigniter's index.php. The files in these folders will be referenced from the html files like this (example with css): <link rel="stylesheet" type="text/css" media="all" href="<?php echo base_url();?>assets/css/style.css" />
The html files go to the views folder. You'll see that each html file is repeating a header and footer structure, so you can isolate this structure into a header and footer view. Normally, the header starts at the doctype declaration and ends at the main section (inside the body), and the footer starts at the end of the main section and ends with </html>. The rest (the main section), will be the view for that html. So you'll end up having: a header view, a view for each html file and a footer view.
Header view: contains the <head> section and (normally) the nav bar. In the head section you reference the files (css, js, img) like I've written in the first point. Change the nav bar links to link to the correct controller (see last point).
View for each html: contains the content of the page. At the top you should load the header view and at the bottom the footer view. You can name the view like the html file but be careful with the home (index.html). You'd better name it "home".
Footer view: contains footer content and javascript files, which you should reference like the ones in the header.
To call each view create a controller with the name of the html and load the view in the index function of the controller. For the home view use the default_controller in routes.php.
The .erb files are probably for backend processing of contact forms, so they're of no use if you use Codeigniter. You should replace them with controllers and models.
Related
I must show an img html element with src pointing to an image that is originally defined within the resources/images/ folder. So I have written, in my Blade template, the following line (normally it's correct):
<img class="illustration" src="{{ asset('/images/design_7.jpg') }}" alt=""/>
Problem : it doesn't work. Indeed, I don't find this image in the directory named public.
I've seen that Laravel automatically compiles the image if the latter is pointed by the CSS url property. Why isn't it the case with the html src attribute? How can I solve this problem?
Use mix.copyDirectory('resources/<your folder images>', 'public/<your destination folder images>) in your webpack.mix.js file.
(The css compiled images were in fact due to mix.less(<the css file>, public/<the css destination file>))
See 1) https://laravel.com/docs/8.x/mix#copying-files-and-directories and 2) https://laravel.com/docs/8.x/mix#working-with-stylesheets
If you make a Gallery in Batflat CMS, the template tag it creates will generate its only Bootstrap HTML for a gallery. What if I just want to emit IMG tags for the gallery items, instead?
Create a Gallerymod custom module. That way, your customization may likely survive a Batflat Update.
Copy inc/modules/galleries as inc/modules/gallerymod.
Remove the lang folder and Admin.php in your gallerymod folder.
Change the Name and Description inside the gallerymod/Info.php, as well as the comments. I used static strings instead of code. Also in this file, inside the install function and uninstall function, remove code inside those so that it does nothing on install or uninstall.
In your gallerymod/Site.php, look for the $assign[$gallery['slug']] assignment, and on the following line, add:
$assign[$gallery['slug'] . '-alt1'] = $this->draw('gallery-alt1.html', ['gallery' => $tempAssign]);
Also, where you have the namespace line set as namespace Inc\Modules\Galleries;, change it to namespace Inc\Modules\Gallerymod;.
In your gallerymod/view folder, create a gallery-alt1.html file and add these contents:
{loop: $gallery.items}
<img class="photo-{if: $value.title}{$value.title}{/if}" alt="" class="img-responsive" src="{?=url($value.src.lg)?}">
{/loop}
Now activate this inactive module in Batflat's admin system. You'll notice that it has no admin panel -- because it doesn't need one. You already have the Galleries one. Do not deactivate the Galleries module because the Gallerymod module relies on the Galleries module.
Now, from your custom theme template, you can call this by varying how you called the old slug. So, if your old way of calling the gallery was something like {$gallery.home-photos}, then you would merely tack on the "-alt1" on the end and call it like {$gallery.home-photos-alt1}. I like to wrap these in a DIV wrapper with an ID on it so that I can address it with CSS, jQuery, or Javascript.
In the Batflat Admin system, go back and edit your image titles in the gallery. Treat those titles like a slug (lowercase alphanumeric phrase with dashes) because these are used as class names on the IMG tags in gallery-alt1.html, and you may want to address these individually in CSS, jQuery, or Javascript, later on.
Refresh your browser and you may see the source code display something similar to:
<div id="hidden-images" class="hidden">
<img class="photo-man2" alt="" class="img-responsive" src="https://example.com/uploads/galleries/2/15831273220.jpg">
<img class="photo-woman1" alt="" class="img-responsive" src="https://example.com/uploads/galleries/2/15831272980.jpg">
<img class="photo-man1" alt="" class="img-responsive" src="https://example.com/uploads/galleries/2/15831272540.jpg">
</div><!-- hidden-images -->
Just remember that if you update your version of Batflat, that you may need to reapply this customization again -- it depends on what was done in the update to the existing Galleries module.
If you have different tastes as to how you want to format your images, just edit your gallery-alt1.html file. Plus, you can make multiples of these for different situations, such as gallery-alt2.html, gallery-alt3.html, etc. You can even make it emit JSON instead of html so that you can insert it into a Javascript block in your theme.
Another tip for debugging, in case your site won't load or the admin system breaks, is to edit inc/core/defines.php and change the DEV_MODE to false. That way, PHP will show you every error and that might help you in debugging what might be wrong.
I have a layouts folder in my resources/views directory and I have a single file named header.blade.php there. The file contains the header of the page and I include the header in each of the page in my application. I have all my required <head> tags in there. What I do in the page is:
#include("layouts.header");
But, I want the title of the header and css <link> tag to be dynamic. So, is there a way I can pass variable with #include() and access the variable in my header page?
Yes, you could use: #include('layouts.header', ['some' => 'data']) and then access the data in the header page with, e.g. $some.
Actually the question is in the subj...
Is it possible to make handlebars template framework, to recognize templates within a div tag and not in script tag?
For example I would like to create template with this markup:
<style>
div.text-x-handlebars {display:none;}
</style>
<div class="text-x-handlebars-template">
<h2>I'm template</h2>
<p>{{welcomeMessage}}</p>
</div>
Yes you can put your templates in <div>s rather than <script>s, for example:
http://jsfiddle.net/ambiguous/RucqP/
However, doing so is fraught with danger. If you put your template inside a <div> then the browser will interpret it as HTML before you've filled it in; so, if your template's HTML isn't valid until after it has been filled in, the browser may attempt to correct it and make a mess of things. Also, if you have id attributes in your templates, then you will end up with duplicate ids (one in the template <div> and a repeat in the filled in template that you put in the DOM) and that will cause all sorts of strange and interesting bugs. The browser will also try to download any images inside the templates in a <div>, this may or may not be a problem (if might even be desirable but probably not desirable if the image uses a template variable in its src attribute).
Basically, you can do it but you shouldn't, you should put your templates in <script id="..." type="text/x-handlebars-template"> elements instead.
Our group needs to have a standard Common Look and Feel (CLF) for all our web applications. the base line for them all is the same, and certain items like the css references can have customization.
We want to find a way to create either one full layout file or partials that can be shared by all.
I have read many postings and the layout variable on views do not have the ability to read absolute paths.
Can we get a razor method to read XML and render to our layouts, much like the renderbody() does?
EDIT:
We would like to have items like the css, standard layouts etc in one project. Then this could become a distributable package for development teams.
Example of the final output we are looking for:
_base.cshtml example.
#model CLFModel
#CLF.Header(...)
#CLF.LeftMenu(...)
#CLF.OptionalRightMenu(...)
#CLF.Body(...)
#CFL.Footer(...)
The CLF.Header would contain something like below, and would be render from either a file or a pre compiled reference.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#Model.dcLanguage" lang="#Model.dcLanguage">
<head>
<meta charset="utf-8" />
<title>#Model.PageTitle</title>
meta tags.....
CSS required links ....
CSS section for custom link references ...
script tags(required)
optional section for script tags
</head>
You can create as many partial view as you want and just include them into the view you are rendering using #Html.Partial("YourPartialView"). You can create a _MasteLayout, which contains various partial views and #RenderBody for maintaining a consistent feel