PhalconPHP - Moving the controller-related view folders - phalcon

I'm developing an application using the PhalconPHP framework, as my application grows larger and larger my views folder is becoming rather messy.
Currently my views folder looks like this:
views_layouts
|_index_..
|_blog_..
|_news_..
|_etc_..
Is there any way to move my controller related folder to a seperate folder named pages so my directory structure looks like this?
views_layouts_index.volt
| |_blog.volt
| |_news.volt
| |_etc.volt
|
|_pages_index_..
|_blog_..
|_news_..
|_etc_..

I think you can just change your folder structure into something like this.
layouts
| controller_name.volt
| other_controller.volt
controller_name
| action_name.volt
| other_action.volt
other_controller
| action_name.volt
| other_action.volt
In the files in the layout folder you can put something like this
{% extends "templates/base.volt" %}
{% block title %}Title{% endblock %}{% block content %}
{{ content () }}{% endblock %}
And in the templates/base.volt file you can put something like this
<!DOCTYPE html>
<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="">
<title>{% block title %}{% endblock %}</title>
</head>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
All this should be in the views folder

I was able to fix this myself by editing the ControllerBase class.
// Change the default views directory to /app/views/pages/
$moduleName = $this->dispatcher->getControllerName(); // Eg: blog
$actionName = $this->dispatcher->getActionName(); // Eg: index
$this->view->pick("pages/$moduleName/$actionName"); // Result: "pages/blog/index"
You can even call pick() multiple times to override any view in your controllers.

Related

How to display an instance of geemap.Map() in Django Template

I am working with Django and geemap modules, in which I am trying to make an app that can display satellite data on the map and the map should also be interactive as in there should be a bidirectional flow of data from the front-end(Django template) to back-end(python script) and vice-versa.
As of now I only know how to display the instance of geemap.Map() on Jupyter Notebook cell or on Colab(we just need to write the name of the variable for it.). But, I have no idea about how can i display the instance of geemap.Map() in Django Template.
When I use the following method it just prints the instance object as a dictionary instead of interpreting it as a map and displaying the same.
The code for my views.py
from django.http import HttpResponse
from django.shortcuts import render
import geemap as gm
#import pandas as pd
def params(request):
g_map = gm.Map()
return render(request, "PlotMap/params.html", { "m" : g_map })
The code for the template(params.html)
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>map</title>
</head>
<body>
{{ m }}
</body>
</html>
The output that I get is as follows. output
If someone can help me out, It would mean a lot Thank you.
You can use geemap.foliumap.Map() or folium.Map()
Code for html template
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>map</title>
{{ map.header.render|safe }}
</head>
<body>
<div class="map">
{{ map.html.render|safe }}
</div>
</body>
<script> {{ map.script.render | safe }}</script>
</html>
Code for backend (views.py)
import folium
import geemap.foliumap as geemap
class map(TemplateView):
template_name = 'map.html'
def get_context_data(request):
figure = folium.Figure()
Map = geemap.Map(plugin_Draw = True,
Draw_export = True)
Map.add_to(figure)
figure.render()
return {"map": figure}
Code for urls.py
urlpatterns = [
path('', views.map.as_view(), name = 'map'),
]

Shopify time lag CSS Application

I have a Shopify store running at https://www.2two.be/..
Especially on mobile, but also sometimes on desktop, there is a small time lag between seeing the page and my css being applied. For a split second you can see pure html.
I have on page css. Anyone has an idea how to solve this?
Thanks!
This is the head code from my theme.liquid file..
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="theme-color" content="#000000">
<meta name="robots" content="index,follow">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="icon" href="https://cdn.shopify.com/s/files/1/0533/3064/1060/files/twologonew.jpg?v=1619600091" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<!-- Central CSS and JS Files -->
{{ content_for_header }}
{{ 'website.css' | asset_url | stylesheet_tag }}
{{ 'application.js' | asset_url | script_tag }}
<link rel="stylesheet" href="https://use.typekit.net/tuc2hbj.css">
<script>
(function(d) {
var config = {
kitId: 'imy7djc',
scriptTimeout: 3000,
async: false
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
</head>
Solution
Part of my markup (css) was inline. Particularly that of my index and blogpost articles pages. Inline css was loaded only after page html was loaded, which caused some problems. I have moved all my page-specific css to my external css file. This solved the problem..

How to change existing gtag code in prestashop

I have a website which is in Prestashop. There is a gtag code between head tags.
I have to replace this code. I looked to ~/www/site/themes/laber_complex_home1/templates/_partials/head.tpl
etc. But I didn't see gtag code in here. How can I change it. Is there anywhere where users add custom codes to the head tag. Sorry but I am new prestashop.
{block name='head_charset'}
<meta charset="utf-8">
{/block}
{block name='head_ie_compatibility'}
<meta http-equiv="x-ua-compatible" content="ie=edge">
{/block}
{block name='head_seo'}
<title>{block name='head_seo_title'}{$page.meta.title}{/block}</title>
<meta name="description" content="{block name='head_seo_description'}{$page.meta.description}{/block}">
<meta name="keywords" content="{block name='head_seo_keywords'}{$page.meta.keywords}{/block}">
{if $page.meta.robots !== 'index'}
<meta name="robots" content="{$page.meta.robots}">
{/if}
{if $page.canonical}
<link rel="canonical" href="{$page.canonical}">
{/if}
{/block}
{block name='head_viewport'}
<meta name="viewport" content="width=device-width, initial-scale=1">
{/block}
{block name='head_icons'}
<link rel="icon" type="image/vnd.microsoft.icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
<link rel="shortcut icon" type="image/x-icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
{/block}
<script type="text/javascript" src="{$urls.js_url}jquery-1.7.1.min.js"></script>
{block name='stylesheets'}
{include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
{/block}
{block name='javascript_head'}
{include file="_partials/javascript.tpl" javascript=$javascript.head vars=$js_custom_vars}
{/block}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
{block name='hook_header'}
{$HOOK_HEADER nofilter}
{/block}
{block name='hook_extra'}{/block}
{hook h='displayAdminlabthemeoptions'}
there might be two reasons why you cannot find it there.
it might simply not be the right place
it might be embedded via module
Search in your entire repo about the string googletagmanager and have a look if the script is somewhere else. In general, the script should be something like this
{literal} <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-*********-*"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-*********-*');
</script>
{/literal}
If you cannot find anything, there is a good chance that a third-party module is embedding the script for you. In that case, go to Prestashop back office and click Modules -> Module manager and search for something congruent with Google analytics.
Source Google: https://developers.google.com/analytics/devguides/collection/gtagjs
Example Prestashop module: https://addons.prestashop.com/en/analytics-statistics/23806-google-tag-manager-enhanced-ecommerce-ua-pro.html

Favicon not showing up in VueJS

I'm coding using Vue JS technology and I'm trying to load the favicon but it won't show up. I tried to look for other documentation about it but can't find one. I'm a beginner in this technology hope someone help. Thanks!
Here is my code in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="favicon.ico" />
<title>Hello World</title>
</head>
<body>
<noscript>
<strong>
We're sorry but codesandbox doesn't work properly without
JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
Please check the attached image there is the code as well.
In Vuejs, your favicon.ico should be in either public or assets folder.
To access images from assets folder in vue one would do :src="require('#/assets/images/favicon.ico')"
To access images from public folder in vue one would do :src="./static/images/favicon.ico"
I hope this helps!!

How to move Lesscss files outside the public symfony web directory?

With Symfony 3, I'm using Assetic filters to process my .less files, and I simply want to know how to move them outside the /web directory, for example from /web/css to /app/Resources/less.
Indeed, in twig templates I don't know how to give the right location.
I'm using a basic Assetic config:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
less:
node: /usr/bin/node
node_paths: ['/usr/local/bin/node_modules']
Let's say I have this simple Less file, currently located at /web/css/test.less:
#color : orange;
body {
background-color : #color;
}
Then, if I want to generate the link to the processed stylesheet, I'm doing like this in an HTML template:
<!doctype html>
<html>
<head>
[ ... ]
{% stylesheets 'css/test.less' filter="less" output='css/test.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
</head>
<body> </body>
</html>
So, if I move /web/css/test.less to /app/Resources/less/test.less, what should I give instead the ##### below ?
{% stylesheets '#####' filter="less" output='css/test.css' %}
Have you tried this (2nd edit):
{% stylesheets '#Resources/*' filter="less" output='less/test.less' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Then place your files under Resources like this:
Resources/less/test.less
Where Resources is the path 'src/AppBundle/Resources'.