Zurb Foundation's data-interchange works beautifully for me. In development.
But then I build and I end up with this sort of html:
<img alt='Why Believe' data-interchange='[/assets/images/logo.svg, (default)], [/assets/images/logo-square.svg, (medium)]'>
<noscript>
<img alt='Why Believe' src='/assets/images/logo-e8f041ee.svg'>
</noscript>
Can you spot the problem?
Middleman's build process smartly fingerprints all of the assets, and links to the fingerprinted ones. No "un-fingerprinted" assets get built. I want all of that.
But the asset paths in the data-interchange attribute get no fingerprints. Therefore they work in development, but not once built and deployed.
How can I make it so the data-interchange asset paths also get the fingerprint? (And if middleman calls the -e8f041ee something other than "fingerprint", please let me know!)
If you are going to use asset hashs then you should consider moving your images used by interchange to a new directory so they aren't automatically hashed. If you are not hosting on a CDN based setup, you should consider turning the cash busting hashes off.
For example I place images in source/blog/featured-images rather than /images/blog/... to avoid them being hashed for a similar reason (because I am defining the name via yml frontmatter.
Related
I'm essentially just remixing the code available here for a side project: https://github.com/aws-samples/aws-ai-qna-bot.git
Problem: I'm trying to insert a centered logo in the toolbar between the app drawer and the logout button. Typically I could accomplish this pretty easily with vanilla HTML and CSS, but this project is leveraging Vue.js and Vuetify, which I'm doing my best to get myself up to speed with.
I've referenced the following documents, including the README.md in the git repo:
https://vuetifyjs.com/en/components/images
https://v2.vuejs.org/v2/guide/single-file-components.html
File path: qna-bot-template/website/js/admin.vue
<template lang="pug">
v-app
v-navigation-drawer(temporary v-model="drawer" app)
v-toolbar(flat)
v-list
v-list-tile
v-list-tile-title.title Tools
v-divider
v-list(dense three-line subheader)
v-list-tile(v-for="(page,key) in pages" :key="key"
#click="drawer=false"
:href="page.href"
:id="'page-link-'+page.id"
:target="page.target || '_self'")
v-list-tile-avatar
v-icon(color="primary") {{page.icon}}
v-list-tile-content
v-list-tile-title {{page.title}}
v-list-tile-sub-title {{page.subTitle}}
v-list-group( prepend-icon="info" value="true" color="primary")
v-list-tile(slot="activator")
v-list-tile-title QnABot Help
v-list-tile
v-list-tile-content
v-list-tile-title Version: {{Version}}
v-list-tile-title BuildDate: {{BuildDate}}
v-list-tile
v-list-tile-content
v-list-tile-title
a(href="https://amazon.com/qnabot" target="_blank") General Instructions / QnABot Blog Post
v-list-tile-title
a(href="https://aws.amazon.com/blogs/machine-learning/creating-virtual-guided-navigation-using-a-question-and-answer-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Guided Navigation using QnABot
v-list-tile-title
a(href="https://aws.amazon.com/blogs/machine-learning/create-a-questionnaire-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Create a questionnaire using QnABot
v-toolbar(app fixed)
v-toolbar-side-icon.primary--text(
id="nav-open"
#click.stop="drawer = !drawer"
)
v-toolbar-title
v-breadcrumbs
v-breadcrumbs-item(href='#/edit') {{$store.state.info.StackName}}:{{$store.state.user.name}}
v-breadcrumbs-item {{page}}
v-spacer
v-toolbar-items
v-btn.primary--text(flat
id="logout-button"
#click="logout"
v-if="login") LogOut
v-container(fluid id="workspace")
v-layout(column)
v-flex
router-view
v-footer
</template>
So far I've tried following the following syntax, which I added right after the v-spacer toward the bottom of the wrapping template tags.
v-container
v-img(:src="/abc/xyz")
and this doesn't seem to be working.
Lastly I'll add that since this environment is deployed to an EC2 instance (don't think you can deploy it locally to prototype via vue serve or at least I haven't been able to), I'm having to do this very roundabout way of prototyping by deploying this S3 bucket where the webpages are built to, then I make this webpack listener which will see whenever I modify a file. Then I can refresh the index.html that is built in the S3 bucket to see my changes. Extremely clunky workflow, I know, but I've never worked in an environment like this so I'm not sure if there's a better way, plus the readme provided in the github repo is very light on details for how to modify the default layout.
Any help/pointers would be greatly appreciated.
If you are using a relative path to an image use v-img(src="/abc/xyz"). The ':' before src is shorthand for v-bind which you use for data-binding. So if your image path was dynamically generated you'd use :src="dynamicImage"' but if you are hard coding the path use src="/pathto/image.jpg". This might help.
The Ember CLI guide describes how assets can be referenced in the templates and the CSS - but what is the proper way of referencing an asset (say an image) from my javascript code?
Specifically I am concerned about the asset path getting fingerprinted correctly when building assets for production. It seems like ember-cli is using broccoli-asset-rev for this, but according to its documentation, only <script> tags in the HTML and url() in CSS will be fingerprinted. Is there any way (probably through another broccoli plugin) to get asset paths in the .js files fingerprinted, too?
I placed an image called car.jpeg under public/assets/images and then was able to reference it in my application.js route file as assets/images/car.jpeg
Works great
UPDATE
One picture is worth a thousand words... :)
I found the issue. This works out of the box as expected - it turned out that my asset (image) was not in the right location, so occurrences of it's path in the JS files never got replaced with the fingerprinted version.
I've built a mobile version of an existing website. The site I've built is completely static and relies only on HTML/CSS/JS. This site resides on the same server as the desktop version and is served from under http://example.com/mobile as a subdirectory. As such, I've set the <base> tag to:
<base href="http://example.com/mobile/">
The only access I get to the existing site is via FTP, so I don't have too many options to reconfigure the already existing server. And I don't want to either.
My mobile version is only somewhat functioning - all the <script> and <link> tags inside index.html correctly point to http://example.com/mobile/{js,css,img}, while links used inside js or css files look up to the top domain (e.g - http://example.com/img/image.png instead of http://example.com/mobile/img/image.png).
I can manually copy all the assets for the links to work, but since this is a Grunt project I figured there might be a smarter way to do this.
So, how can I have all internal asset links in js or scss files change when building (grunt build)? Something like:
site.css
// in dev
body {
background: url('/img/image.png') top left no-repeat;
}
// after building
body {
background: url('/mobile/img/image.png') top left no-repeat;
}
Thanks.
See grunt-replace or grunt-string-replace as tools that can help with this.
You could use either of these within your build task to process the changes you need.
The hardest part will be writing an accurate regex, but there are many regex testers/builders online that can help if you aren't expert at that.
Also, while .htaccess is a great idea for Apache based sites, it doesn't help if you are on Windows or on a cloud hosting solution that doesn't honor it.
I've got a Django project spinning up where it would be great to have the UI in lots of color schemes based on the users' school colors. I have this fantasy of having a base variables.less file along with a bunch of other .less files that compile into style.css.
But once a user sets their school colors it generates a blue.variables.less file (if they've selected the blue preset) or school123.variables.less file (if they got all fancy and used the color picker to make their own color scheme) and then compiles everything to blue.style.css or school123.style.css and then that's the .css file we load when we serve the page.
I can imagine lots of ways for this to fall down. Like how do I reprocess all those files when I push an update to forms.less or layout.less.
Is there a better way to do this? I Googled my fingers raw but haven't found anyone attempting this madness.
There are quite a few ways to accomplish your goal of being able to have user specific color schemes, but they each have their advantages / disadvantages.
I'm assuming you are using some framework like Bootstrap with the files that you name.
Option 1: Inline CSS for color-specific styles (Preferred)
This is my preferred option due to performance and simplicity. You can store each of the customized colors for each user, or even creating a model so you can reuse colors that represent a specific school. It's stored in the database and can scale to an very large number of color schemes without generating a lot of very similar files.
Create a snippet in your template code that has any style that uses the color variable.
base.html
{% include "color-snippet.css" with main-color="{{ user's main color }}" alt-color="{{ user's alt color }}" %}
color-snippet.css (note this file will be in your templates directory as it's being handled by your template engine
<style>
.some-style {
color: {{ main-color }} !important;
}
</style>
So the big downside to this is you'll need to customize Bootstrap beyond the variables.less. You'll need to grep through the less files to find all the classes that would be generated, and copy the style to your snippet in css and not less. It'll take some investment up front and work when you want to upgrade to a newer Bootstrap, but it'll allow you to separate the color part of the styles to be derived dynamically at runtime.
I prefer this approach since you don't have to deal with compilation of less outside your collectstatic step.
Option 2: Client side compilation of LESS
You can have Django serve a file that is dynamically created and returns the variables you want. Then you can have less.js compile it on the client.
This would involve adding to your base template a url path that is handled by Django that isn't part of your static path (e.g. /style/variables), creating a handler in views and then returning text content that would be your less file variables.
Option 3: Server side compilation of LESS
I use Django Pipeline to do my server side compilation of less to css. It takes some setup to get working with your Django application. In development mode, Django Pipeline will compile on every request the associated less files into CSS files. In production mode, it'll point to the appropriate file path to the compiled file. It hooks into collectstatic so your less gets compiled when you collectstatic.
The biggest problem with this approach is that the mapping for your static files (what less + css files compile to css) is defined in your settings file. This requires a server restart when you update this. You could base your own server side less compilation off how Django Pipeline works but have logic for the mapping instead of defining it in something that requires a server restart.
It's a lot of work and the less compilation of Bootstrap is non-trivial to have to do on every request.
If you created your own mapping that doesn't require you to restart your Django server process, you could always just run collectstatic to create the new css files. This would avoid compilation at every request.
While this last approach is closest to what you mentioned, it seems a lot more work and error prone than just separating the color-specific styles and using django templating to customize it.
The last approach as well works well if your number of schemes is rather low since you can just create all the mappings ahead of time and not let people generate their own at runtime. They can suggest them and you can just update them at some regular cadence.
we are planing to create a CMS with zf2 and doctrine orm .
actually we are concern about our cms templating
we want our system works with several templates and easily change between themes via admin
and creating a new templates should be easy for end-users developers
we want an advice or suggest for how to build templating system that :
there is a core module and there a lot sub modules with their own phtml
so where to store theme1 phtml and where to store theme2 phtmls ...
any suggest or advice please
thanks
I encourage you to take a look at Twig, its the best template engine I have seen so far :) It does take some time to learn Twig syntax, but its well worthy if you look at what you get :)
I cant yet write comments, so I wrote this as an answare.
Hope this helps. Trust me, the Twig is the way to go. Joust look at his documentation for more specific details how to use it!
EDIT:
The problem you are trying to solve has nothing to do with template engine. You can do that with any template engine. You can do it even with plain PHP if you want.
I built web application where users can register, get their own sub domain, and there they can build their webpage. Change theme, edit text, add pages. Simple CMS functionality.
The easiest way to do this is to have themes folder, where you would store themes, like this:
themes/
- themeBlue
- css/
- images/
- js/
- html or views/
- themeRose
...
Now this is where you would place all your themes, every theme has its own folder with images, css, js files...
And then you would have users, and every user would be able to choose and change theme.
That information would be stored in database. You need to store that user Jack is using themeBlue. You can do that as you want. You can event put this in users table like user_theme column.
Now when someone visits site, you first query database to see what theme is that user or creator of web using. And then you load all that files from current theme folder. And populate html files with data stored in database like in any other CMS.
This is the simplest implementation. You could for example, store css and html files in database :)
Hope this answers your question.
Good luck with that, I almost gone mad building my system :) I ended up with writing my own PHP MVC Framework joust to accomplish what I wanted.
if you activate another module in the application.config.php which has the same views and layouts (same folder structure and filenames) it's viewscripts and layouts will automatically be used when it's loaded after your core module.
so you could simply make your application.config.php dynamic to load the active template module which only contains the view folder. this would be a simple and effective solution without any other libraries.
additionally you can use an asset manager like assetic to also provide images, css etc. inside of your (template-)modules. (have a look at zf2-assetic-module, I wrote my own assetize-module based on assetic to fit my needs...)
Sina,
I do this in my Application->Module.php onBootstrap
$ss = $serviceManager->get('application_settings_service');
$settings = $ss->loadSettings();
$serviceManager->get('translator');
$templatePathResolver = $serviceManager->get('Zend\View\Resolver\TemplatePathStack');
$templatePathResolver->setPaths(array(__DIR__ . '/view/'.$settings['theme'])); // here is your skin name
$viewModel = $application->getMvcEvent()->getViewModel();
$viewModel->themeurl = 'theme/'.$settings['theme'].'/';
In this situation I have this structure in my view folder
view/
default/
application/
error/
layout/
zfcuser/
red/
application/
error/
layout/
zfcuser/
The $viewmodel above injects a variable into the layout for the themeurl in the public_html folder /theme/red/ with all assets for red
Access in layout.phtml -> themeurl;?> in a viewscript layout()->themeurl;?>
I am still working out my Dynamic Views. Right now I have a BaseController and all my ActionControllers extend it. It has a render() function that builds the required views but not sure its going to be scalable hoping to try some placeholder ideas.
application_settings_service is a Settings Service that gets settings for whatever domain was used to call the system and builds an array accessible via any service aware part of the site. Thats a whole different post and it may or may not rub MVC peeps the wrong way
I know your question is marked answered just thought I would share
Eric