Embedding a pdf into a webpage - pdf

I'm trying to embed a pdf into a page and I'm using the 'file' field in contenttypes.yml
file:
type: file
extensions: [ pdf, doc, docx, ppt, pptx ]
The field appears in the content editor and it evens insert some code into the page. However the result is disappointing, the navigator only outputs a line that goes like that :
file:2014/12/doc.pdf
Can someone tell me what did I do wrong ?

You should add your own HTML around the file field, to allow users to download it. Something like this:
{% if record.file is not empty %}
Click to download: <a href="{{ paths.files }}{{ record.file }}">{{record.file}}<a>
{% endif %}

Additionally if you want to embed the PDF into the page you will need to use a third party plugin since they aren't natively supported.
Google docs offer one, you can grab the embed code here:
https://docs.google.com/viewer

Related

How to use a Shopify Section across a Layout?

I have a section with content that can be edited from the Shopify Customizer. I use this section across multiple pages, but the content remains the same.
Is there a way to instead bind this section to a whole layout?
Because when you update the content, you have it re-enter it on every single page template that uses this section. I can have static HTML across all page templates that use a layout, but this isn't useful because the content needs to be editable from the Shopify Customizer.
You can have a section across a layout after all.
I was doing
layout/my-new-layout.liquid:
{% render 'section-component.liquid' %}
when I was supposed to be doing
layout/my-new-layout.liquid:
{% section 'section-component.liquid' %}
For reference
If you're trying to convert a template-only section to a layout-only section...
Remove the section JSON data from the template: templates/page.your-template.json.
Add a {% section 'your-section' %} in the layout (i.e. layout/my-new-layout.liquid).

How to Add Header and Footer in Grav CMS

I know how to add content in Grav CMS but i am facing problem in how to add a header section in Grav CMS. Please tell me where do i have to write the code for header and footer. In (.md) files or twig files?
As domsson already noted, there are more than a single way to do it in Grav
You can check implementation of it in (default) Quark theme:
templates/partials/base.html.twig, which is used by all other templates, have in needed location {% include 'partials/footer.html.twig' %} and footer.html.twig, in turn, contain all needed data for rendering on page
You can also see (use) idea from Open Publishing Space skeleton
{# display footer markdown page - hibbittsdesign.org #}
{% set content = pages.find('/footer').content %}
{% if content %}
{{ content|raw }}
{% endif %}
Here ordinary page (/footer) from site (editable as much as needed) used instead of template and have anything in it, it's content used as site-footer
If you have site with modular-pages only (like, f.e. Deliver skeleton), you can also (except using base-template as per p.1) add to all modular-collections
content:
items: #self.modular
…
page, which share common template (and data)

Fit PDF page in container using ngf-thumbnail

I have the following line of code to embed pdf in HTML
<embed ngf-thumbnail="factura.picFile" id="factura_prev_pdf" ng-show="factura.preimageext=='pdf'" class="view_complete_image" type='application/pdf'>
As you can see I'm using ngf-thumbnail to show the pdf.
Javascript attached to the id just get the extension, not important here.
ng-show say true if extension id pdf and the css class adapt the pdf to the container size.
The thing is that the pdf preview is adapted to the width and height but the page is not visualized entirely.
Any idea ?
I saw things like Zoom to fit: PDF Embedded in HTML
But it doesn't work to me since I'm not using
EDIT what I see now is that you can modify a pdf url like http.thingthing.pdf#view=fit to make page fit but my files are loaded from local so it creates a blob:url where I cannot put this view=fit.
It's possible to convert this blob url to a normal url with the pdf extension?
Finally I achieved the following:
<img ngf-thumbnail="factura.picFile" id="factura_prev_image" class="view_complete_image">
<embed ngf-thumbnail="factura.picFile" id="factura_prev_pdf" ng-show="factura.preimageext=='pdf'" class="view_complete_image" type='application/pdf'>
<img src="{{ factura.image.url }}" ng-show="factura.preimage && factura.preimageext=='jpg'" id="factura_image" class="view_complete_image">
<embed src="{{ factura.image.url }}#view=fit" ng-show="factura.preimage && factura.preimageext=='pdf'" class="view_complete_image" type='application/pdf'>
As you can see, in the first 2 lines I'm using ngf-thumbnail... This two fields contains local files so to visualize it we get a Blob Url, in this way I couldn't add the #view=fit that allows me to visualize the entire pdf page.
In the last 2 lines we get pdf's that are uploaded to a server so we get a normal url.
In this way I can add the #view=fit so the page fits.
Hope it helps to someone.
This answer is to know how to fit a pdf page, but I'm not answering to fit the page when we get a Blob Url.

Shopify shortcode for product page

I'm trying to display my only product's salespage on homepage through a shortcode.
I downloaded plugin from github and installed shortcode.liquid and shortcode-render.liquid.
I uploaded shortcode-youtube.liquid example.
I activated shortcode functionality by changing liquid tag from
{{ page.content }}
to
{% include 'shortcode' load: page.content %}
I used shortcode [youtube] on a test page and it works fine! It displays video on a homepage through a shortcode.
Question: How do I do the same for a products sales page?
I know I need to create shortcode-product.liquid file but what code do I put inside it?
Cheers for help,
Rafal

How to create an empty html file in my shopify website?

is it possible to create an empty html file say ex : myname.html
I tried to create a layout and add it to a page, but it seems the layout cannot be empty.
I got an error while creating an empty layout file.
Is there anyway to achieve this?
Sorry i cannot post this under "Shopify" tag under webmaster or meta version or stackexchange,
because there is no such tag in it.
If it's okay for the URL of the page to be /pages/myname and not /myname.html, then here's another work-around:
Go To Blogs & Pages and create a page. Call it, say, 'My Page'. Give it the handle 'myname'.
Go to Themes > Template Editor, and create a new 'page' template under Templates. Call it say, 'special'. The name of the file will become page.special.liquid.
Delete the content of that file. At the top of the file, add this: {% layout none %}, then add your HTML. Save.
Go back to your 'My Page' under Blogs & Pages, and assign your page.special template to it. Save.
See this for more info: http://support.shopify.com/customer/portal/articles/263930-creating-and-using-an-alternate-template-for-pages-products-collections-and-blogs
Unfortunately, you can’t do this in Shopify.
However, if you can deal with redirects, what you could do is make an empty html file under /admin/files/list and redirect to that.
There's a good visual explanation on how to do this with redirects a little way down this thread:
http://ecommerce.shopify.com/c/ecommerce-marketing/t/verifying-website-on-pinterest-112464
(To verify for Pinterest for Business, but should work with others as well)
To sum up:
1. Upload the verification file to account > Show uploaded files
2. Grab the URL
3. Go to Navigation > URL Redirects
4. Add verification URL as 'old path' and actual position of file as 'new path'.
5. Verify