've recently added Zipmoney as a payment option but my theme doesn't support the logo to display in the footer.
I've looked at the community answers which gave code to add to the footer template but my footer refers to another 'payment' icon file to display the icons. See copied code below. Just wondering if anyone can help me out with where I can add the logo image to display next to existing icons in the footer? And does it resize automagically? Or do I need to make sure the image I upload is the correct size?
{{> components/common/payment-icons}}
</div>
for easy. upload zip logo at image manager then open open /templates/components/common/payment-icons.html
paste that image code after like below sample
{{#if show_accept_visa}}
<svg class=”footer-payment-icon”><use xlink:href=”#icon-logo-visa”></use></svg>
{{/if}}
<img src="zip image path">
Related
I'm trying to create a link on my vue app to local pdf files. Right now here's my problem.
My pdfs are located in assets/static/ and presently linking to them like this.
<template>
<div id="forms" class="view-wrapper">
<h3>Downloadable Forms</h3>
Claim Form
</div>
</template>
This brings up a link on the page, but when I click it, I'm taken to a blank page on my app with just the navbar and footer and nothing in between. I'm hoping to have it bring up the document in the browsers pdf viewer in another tab. Some help would be greatly appreciated.
Edit: SOLVED: #dan helped me realize that I just had to use one dot to access my assets folder.
To render a pdf in the browser use an <iframe src="path-to-pdf" />. Unless you're binding reactive data to the element you don't have to do anything different in vue. Check out https://stackoverflow.com/a/52644970/6890774 this is a similar issue.
According to documentation,
https://stencil.bigcommerce.com/docs/other-handlebars-helpers
I use a CDN handlebar helper to add an image to my template:
<img src="{{cdn "webdav:img/about.jpg"}}">
After theme uploading, it was changed to:
<img src="https://cdn6.bigcommerce.com/s-1tfospd5/content/img/about.jpg">
Okay, but I need to update the picture.
After uploading a NEW version of the picture to bigcommerce webdav, nothing changes, I still see the old one.
How can I update the picture on CDN?
You need to wait about 30 minutes until the CDN get the new image.
You can test if the new image is there by adding some querystring to your image :
https://cdn6.bigcommerce.com/s-1tfospd5/content/img/about.jpg?test=test_new_image
You can try with :
<img src="{{cdn "webdav:img/about.jpg?new=logo"}}">
I want to add a pdf thumbnail to my ion-scroll view, basically I want to add something like this :
I have tried this code :
<iframe src="img/pdf1.pdf#view=fit,10&toolbar=0" style="width:220px;height:100%"></iframe>
<a href="img/pdf1.pdf" class="loupe">
<img src="img/loupe.png">
</a>
This works only on web browsers not on mobiles.
Any suggestions please?
If you want to open pdf in your app with scroll option, its better way to open pdf in in-app browser
Does Bigcommerce Stencil support a global header image?
If a user has uploaded a header image in 'store setup/design'. How can I get that image in a stencil theme?
There isn't a way to access this image within stencil at this time.
On the cornerstone theme in the stencil framework, the store logo content is located in the "store-logo.html" file.
If you're developing in the stencil framework, and want to reference just the logo image use (if you want just the url for the store logo, take the handlebar from the "src" attribute):
<img class="header-logo-image" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">
If you want to include the links and the store logo, use the following:
<a href="{{urls.home}}">
{{#if settings.store_logo.image}}
<img class="header-logo-image" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">
{{else}}
<span class="header-logo-text">{{settings.store_logo.title}}</span>
{{/if}}
</a>
Hope this helps!
First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}