I can`t solve this prestashop invoice problem. Prestashop use TCPDF to generate PDF invoice.
This is my footer.tpl code:
<table style="width: 100%;">
<tr>
<td style="width: 100%">
<img src="http://myshop.com/img/invoicefooter.jpg" />
</td>
</tr>
</table>
As u can see, I include image on footer. And Prestashop generate header and footer on every page. So its okey for me, but let you show:
This is example of invoice with 2 pages: first page footer ( http://prntscr.com/6nn5c9 ) and this is the last page footer - http://prntscr.com/6nn5lo
I cant understand whats wrong. I tried to look at TCPDF.php functions footer, getfooter() and etc..
Briefly, if I have 1 page PDF invoice it shows correct. If I have PDF invoice with 2 pages I got correct view only on last page...
Thanks for any help! Its very important for me..
Mh, I found a solution. I really dont know why and don`t have too much time to look for bug, but this method help me to add correct image on every page footer.
Extend PDFGenerator.php in prestashop/classes/pdf and look for function footer:
$this->Image($image_file, 11, 241, 189, '', 'JPG', '', 'T', false, 300, '', false, false, 0, false, false, false);
Use function Image to put image on footer. Now I can see correct image on every page.
Related
I'm trying to show the employee's picture (fields: hr_employee.image) on a website template. But the template just show the default picture for employees instead of the loaded image.
I tried this:
<span t-field="employee.image" t-options="{'widget': 'image', 'style': 'height:200px;width:200px;'}"/>
And also, tried this:
<div t-field="employee.image" t-options="{'widget': 'image', 'style': 'height:200px;width:200px;'}"/>
And this:
<img t-field="employee.image" t-options="{'widget': 'image', 'style': 'height:200px;width:200px;'}"/>
Template just show this:
I'm afraid accessing images isn't as simple as that since you need sudo access to get them. If you're accessing the built-in employee module then the base model already provides this sudo access for you. Instead use the following:
<img t-att-src="image_data_uri(employee.image_1920)" style="max-height:85pt;max-width:90%"/>
The 1920 refers to the image's size. You can also use employee.image_1024, employee.image_512, employee.image_256 or employee.image_128
If you're trying to access images from your own custom module then you'll need to update the .py file to access the image and provide its public url.
You can use website.image_url to define the image src attribute.
<img t-att-src="website.image_url(employee, 'image_medium')" class="img shadow rounded" alt="Employee"/>
The above code is taken from website_hr
module (aboutus template)
I am getting issue to show the secondary images.
I need to show secondary Image code to Swap product image on category page in bigcommerce.
Please share me the code if some one do it
$(".ProductList li:first-child img")
.mouseover(function() {
$(this).attr("src", "http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/products/88/images/460/cmpltunknwn_wolfgold_view003__18141.1396558339.1280.1280.jpg?c=1");
})
.mouseout(function() {
$(this).attr("src", "http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/products/88/images/461/cmpltunknwn_wolfgold_view001__55714.1396558344.330.330.jpg?c=1");
})
Find the code: in templates >> components >> products >> card.html
<img src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
And insert the code below after the previous code:
{{#each (limit images 2)}}
{{#if #index '>' 0}}
<img src="{{getImage this 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
{{/if}}
{{/each}}
I have started to implement Datatables in a project.
My Project is based on Bootstrap 3.
I have build up a package with the necessary files on the datatables download-page and created a simple datatable based on the docs. Everything works fine, but I have a problem with responsiveness. Have a look at the following screenshot:
As you see. the search-bar has problems.
The table has the following HTML:
<table width="100%" class="table table-striped table-bordered dt-responsive table-condensed table-hover" id="event_history" cellspacing="0"> .......
The table has the following JS:
var table = $('#event_history').DataTable({
responsive: true,
colReorder: true,
lengthChange: true,
"order": [[ 0, "desc" ]],
});
Perhaps somebody can help me to solve this.
Thank you!
Controls in DataTables with Bootstrap styling wrap nicely when table occupies full page width, see this example.
However I think you're showing your table in a panel that doesn't occupy full page width, which prevents col- rules from being applied, as shown in this example. You can use special crafted value for dom option to configure column layout for one specific table based on your expected container sizes.
For example:
var table = $('#example').DataTable({
responsive: true,
dom:
"<'row text-center'<'col-xs-12'l><'col-xs-12'f>>" +
"<'row'<'col-xs-12'tr>>" +
"<'row text-center'<'col-xs-12'i><'col-xs-12'p>>"
});
See this example for code and demonstration.
I'm trying to configure a nice footer on a pdf document I'm generating using Flying Saucer.
But I'm having problems getting the page number and page count in a nice position.
Consider this bit of css:
div#page-footer {
position : running(footer);
// .. more styling .. //
}
div.page-number:before {
content: counter(page);
}
Using this bit of html will not give me a page number:
<div id="page-footer">
<div class="page-number"></div>
</div>
The only way I manage to get a page number if I move the class a level up.
<div id="page-footer" class="page-number">
</div>
But this does not allow me to add additional content in the footer or makes it really difficult to apply styling. I could add a separate footer just for the page number, but it would be quite hard to get the position just right.
Is there a way to get page number + page count in a footer that also contains other elements and styling?
Extra notes:
I simplified the footer a bit, in the original there is more in there, but even this simple example it is giving problems.
using span or div for the element does not make a difference.
You should use the id instead of the class to identify the div containing the page number.
This will work:
div#page-number:before {
content: counter(page);
}
<div id="page-footer">
<div id="page-number"></div>
</div>
I need to show title/caption for video popup. In image type there is option for this, but none for video/iframe.
In docs (http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type) I found example of templating markup but I don't understand how to make title visible.
Would you please help me to setup iframe markup to show title in popup window from link like
<a class="popup" title="This is caption" href="http://vimeo.com/41128754"></a>
JS code
$('a.popup').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: true,
titleSrc: 'title'
});
Thank you.
A bit late, but it may be helpful to anyone else looking for the answer.
The "titleSrc" attribute only applies to type: image, it doesn't work for iframes.
The developer of Magnific Popup has an example of how to add a title to an iframe popup here: http://codepen.io/dimsemenov/pen/zjtbr
This is the JS:
$('.popup').magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-title">Some caption</div>'+
'</div>'
},
callbacks: {
markupParse: function(template, values, item) {
values.title = item.el.attr('title');
}
},
// your other settings
});
To make the title appear, you must include this CSS:
.mfp-title {
position:absolute;
/* other formatting */
}
What this is doing:
markup is adding a new div with class mfp-title to the frame wrapper, that will be used to display the caption.
The markupParse callback gets the title attribute from the link if there is one, and adds it to the new div.
That this adds the title to the bottom of the video, regardless of where the .mfp-title div is included, as it uses absolute positioning. You need to use CSS to position it at the top, e.g. top: -20px; left:0; (you'll need a negative value for the top to move it above the iframe)
.
The developer has a collection of examples here that might help anyone looking for how to do things not covered in the documentation.
http://codepen.io/collection/nLcqo/
Fo iFrame you have to use vimeo embed code. In my project I used following one. May be its being useful to you. If you have any question regarding to this please let me know.
<iframe height="100" width="100" title="Vimeo Video" class="vimeo" src="http://player.vimeo.com/video/41128754" ></iframe>