How can I put inline an SVG in Drupal7? - svg

I want to put my svg code in the html in Drupal7. But I have no idea which file should I put it in, or exactly which row.
I want to put an SVG menu icon in my superfish menu (in mobile mode). How should I know which file I should search?
This is for example my superfish file:
?>
<div <?php print $attributes; ?>>
<nav id="main-menu" class="main-menu navigation block-content clearfix2" role="navigation">
<?php print render($title_prefix); ?>
<?php if (isset($title) && $title): ?>
<h3<?php print $title_attributes; ?>><?php print $title; ?></h3>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php print $content; ?>
</nav>
</div><!-- /.block -->
This is my svg fle:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="menu" viewBox="0 0 32 32"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
</symbol>
</svg>
And? What should I do?

Save your svg file in your theme i.e. in img directory of your theme:
/sites/all/themes/my_theme/img/image.svg
or what ever you called the dir where you keep theme images.
Then just use it as a regular image:
<img src="/sites/all/themes/my_theme/img/image.svg" alt="" />

Related

Can't get a handle on styles in a included text file

I am using basiclightbox to show text from an external txt file.
It works, but I can't apply styles and size to the result.
I've done this:
document.querySelector('button.html1001').onclick = () => {
basicLightbox.create(`
</div>
<h1><p>
<object data="test.txt"></object>
</p></h1>
</div>
`).show()
}
and
<h1><p>
<object data="test.txt"></object>
</p></h1>
and tried including styles in the text file, but this is the result of the popup:
<h1><p> <br><br><br>
<br>
Testing text for testing
<br>
</p><h1>
It pops up with a black background and no style applies to the text.
Anyone have any ideas how to apply styles and background color to this?
Thanks in advance.
Figured it out.
$(document).ready(function() {
$("#obj").width($("#cont").width());
$("#obj").height($("#cont").height());
});
div#cont {
height: 600px;
width: 900px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont">
<object id="obj" width="400" height="400" data="test.html">
</object>
<div>
Figured it out, was a style problem was problem with the lightbox code.
Have the code working with just:
<object data="test.html">
But I still can't figure out how to change the size of the popup box.
Tried a bunch of stuff:
<object data="test.html" width="400" height="400">
and
<div id="cont">
<object id="obj" width="" height="" data="test.html"></object>
<div>
and
<div>
<object width="600" height="900" data="test.html"></object>
<div>
CSS
div {
height:600px;
width:900px;
}
and some others, no luck.

Jssor Slider - How to disable automatic rotation based on EXIF?

I would like to disable automatic rotation, but I cannot find any options at jQuery(document).ready(function ($) section. Please tell me where to find the option to stop it.
I have pictures with EXIF information. And sometimes I need to rotate pictures with GD Graphic library's imagerotate() command. But after saving rotated pictures, they are still shown based on original orientation. I was guessing Jssor is doing good job to find correct orientation from EXIF. But I want to stop automatic rotation so that pictures will be shown just like the way I saved.
in sliderconfig.js or jssor.slider.js
search $autoplay variable and make it as false.
Firstly find out Image Orientation using exif_read_data() php funcation after that set style='transform: rotate(X deg);' in your image tag as per type of Orientation
Check the Below for sample code
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:240px;width:720px;height:480px;overflow:hidden;">
<?php foreach ($pasttravelphoto as $key => $photo) {?>
<div data-p="150.00">
<?php
$exif = exif_read_data(base_url2.'web/'.$photo['imagepath']);
if(!empty($exif['Orientation'])) {
switch($exif['Orientation']) {
case 8: ?>
<img data-u="image" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" style='transform: rotate(-90deg);' />
<img data-u="thumb" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" style='transform: rotate(-90deg);' />
<?php break;
case 3: ?>
<img data-u="image" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" style='transform: rotate(180deg);' />
<img data-u="thumb" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" style='transform: rotate(180deg);' />
<?php break;
case 6: ?>
<img data-u="image" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" style='transform: rotate(90deg);' />
<img data-u="thumb" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" style='transform: rotate(90deg);' />
<?php break;
default: ?>
<img data-u="image" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" />
<img data-u="thumb" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" />
<?php break;
}
}else{
?>
<img data-u="image" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" />
<img data-u="thumb" src="<?php echo base_url2.'web/'.$photo['imagepath'];?>" />
<?php } ?>
</div>
<?php }?>
</div>

Zend Paginator parameters

I'm building a site with Zend 2.3 and what I want to do is to paginate the results using
Zend Paginator. I don't get any error, in fact I can see every link correctly, however they don't work properly.
When I want to paginate the news within a category, Paginator generates the following links:
........./index/categories/1
........./index/categories/2
........./index/categories/3
............................
Instead the links I want (i.e category 2) should be like:
............/index/categories/2/1
............/index/categories/2/2
............/index/categories/2/3
This is my module.config:
'index'=>array(
'type'=>'Segment',
'options'=>array(
'route' => '/index[/[:action][/:id][/:id2]]',
'constraints' => array(
'action' => '[a-zA-Z][a-zA-Z0-9_-]*',
),
'defaults' => array(
'controller' => 'Application\Controller\Index',
'action' => 'index'
),
),
),
I've already tried passing $cat_id from controller to URL helper ('id'=>$this->id) but it doesn't work. Only it seems to work when I hardcode the id value, for example:
First
This doesn't work:
First
So my question is, How can I do it work passing vars to Paginator?
Thanks
It's hard to create an example with such limited information but generally you'd follow this:
This would be in your controller
// This is some array of data that you've pulled from a data source
$arrayOfYourData = array();
$paginator = new \Zend\Paginator\Paginator(new \Zend\Paginator\Adapter\ArrayAdapter($arrayOfYourData));
$paginator->setItemCountPerPage(25);
$paginator->setCurrentPageNumber((int) $this->params()->fromQuery('page',1));
// now return $paginator to your view by assigning it to ViewModel, etc
Then in your view you would have something like this example
<?php echo $this->paginationControl($paginator, 'Sliding', 'your-namespace/pagination_control.phtml', array('route'=>'some/route', 'routeOptions'=>array('action'=>'some-action')); ?>
and then you should have a views/your-namespace/pagination_control.phtml as such:
<?php if ($this->pageCount): ?>
<div class="paginationControl">
<?php echo $this->firstItemNumber; ?> - <?php echo $this->lastItemNumber; ?>
of <?php echo $this->totalItemCount; ?>
<!-- First page link -->
<?php if (isset($this->previous)): ?>
<a href="<?php echo $this->url($this->route, array('page' => $this->first)); ?>">
First
</a> |
<?php else: ?>
<span class="disabled">First</span> |
<?php endif; ?>
<!-- Previous page link -->
<?php if (isset($this->previous)): ?>
<a href="<?php echo $this->url($this->route, array('page' => $this->previous)); ?>">
< Previous
</a> |
<?php else: ?>
<span class="disabled">< Previous</span> |
<?php endif; ?>
<!-- Next page link -->
<?php if (isset($this->next)): ?>
<a href="<?php echo $this->url($this->route, array('page' => $this->next)); ?>">
Next >
</a> |
<?php else: ?>
<span class="disabled">Next ></span> |
<?php endif; ?>
<!-- Last page link -->
<?php if (isset($this->next)): ?>
<a href="<?php echo $this->url($this->route, array('page' => $this->last)); ?>">
Last
</a>
<?php else: ?>
<span class="disabled">Last</span>
<?php endif; ?>
</div>
<?php endif; ?>

Magento Insert Sub Category Navigation before breadcrumbs

I am trying to create a sub navigation of the main navigation in Magento and insert it before the breadcrumbs module. So when you navigate to the root catalogue a sub menu of its main child categories appears as a navigation bar above the breadcrumbs but below the root navigation. In the catalogue you click the root category and all main categories under the root category appear as a horizontal navigation bar below it.
I am only able to insert it under the category title but not above the breadcrums module. I created app/design/frontend/theme/template/catalog/navigation/topsub.phtml and entered the following code:
<?php
//get all sub categories for current category
$_category = $this->getCurrentCategory();
$_category_children = $_category->getChildren();
$catIds = explode(',',$_category_children);
$categories = array();
foreach($catIds as $catId) {
$category = Mage::getModel('catalog/category')->load($catId);
$categories[$category->getName()] = array(
'url' => $category->getUrl(),
'img' => $category->getImageUrl()
);
}
?>
<ul class="subnav">
<?php if($category->getIsActive()): ?>
<?php foreach($categories as $name => $data): ?>
<li>
<a href="<?php echo $data['url']; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>">
<img src="<?php echo $data['img']; ?>" />
<div class="category-title"><?php echo $name; ?></div>
</a>
<span>/ </span>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
In my local.xml I have entered
<reference name="mtopsub">
<block type="catalog/navigation" name="topsub" as="topsub" template="catalog/navigation/topsub.phtml"/>
</reference>
In my template file I have called it
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div class="main-container col1-layout">
<div class="main">
<div class="msubnav">
<?php echo $this->getChildHtml('mtopsub') ?>
</div>
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
</div>
</div>
<?php echo $this->getChildHtml('footer') ?>
<?php echo $this->getChildHtml('before_body_end') ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
Now until this point nothing appears. If I create a static block and enter the following code to it:
<p>{{block type="catalog/navigation" name="catalog.navigation" template="catalog/navigation/topsub.phtml"}}</p>
The sub navigation menu appears as it should but in the wrong position. Instead of appearing above the breadcrumbs module it appears below it and below the Category page Title.
I am sure I am missing something, if anyone can point me in the right direction I would greatly appreciate it.
You're almost there :-)
As you're adding code into the layout template view, you need to modify you layout XML to add your block as a child of the root element:
layout/page.xml (or local.xml)
<reference name="root">
<block type="catalog/navigation" name="mtopsub" as="mtopsub"
template="catalog/navigation/topsub.phtml" />
</reference>
Now when you call:
<?php echo $this->getChildHtml('mtopsub') ?>
inside your layout template, the block will be available and should render correctly.

Problems With PHPCode

I have an id field that is for example: field_obvious_advantage_value. And this field is inside a div. Now my problem is, when the field is disabled, div remains in its place, naturally with their classes. Anyone knows what the code should be written when the field is not active, div is also disabled?
I wrote the code that is the problem. When placed inside the page, white page and error message shows.
<?php if(!empty($node->field_obvious_advantage_value[0]['#value'])){?>
<?php print '<div>'; ?>
<?php print $node->field_obvious_advantage_value; ?>
<?php print '</div>'; ?>
<?php endif; ?>
Can you tell me, where is this code wrong?
Thanks a lot
I think you might have a problem with the 'if' statement, try:
<?php if(!empty($node->field_obvious_advantage_value[0]['#value'])): ?>
<?php print '<div>'; ?>
<?php print $node->field_obvious_advantage_value; ?>
<?php print '</div>'; ?>
<?php endif; ?>
Depending on your setup you maybe able to reduce this to:
<? if(!empty($node->field_obvious_advantage_value[0]['#value'])): ?>
<?= '<div>'.$node->field_obvious_advantage_value.'</div>' ?>
<? endif; ?>

Resources