Bigcommerce Stencil header image - bigcommerce

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!

Related

Nuxt+Tailwind: background-image with arbitrary values

While creating a project on the Nuxt + Tailwind stack, I stumbled upon another problem.
Following the documentation I wanted to add a background image, but css does not display it (other Tailwind classes work)
**.vue
<div class="bg-[url('img/stories/desktop/18-days-voyage.jpg')]">
<h3>The Mountains</h3>
<p>by John Appleseed</p>
Read story
</div>
However, if I am use the img tag with the same path to the image, then it displays.
<img src="img/stories/desktop/18-days-voyage.jpg" alt="" />
Need to make the first way work. Can you tell me where to dig? Thanks in advance.

How to set payment image icon on footer Bigcommerce?

'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">

Is it possible to modify <script> tags on the fly, before a page is rendered?

I was wondering if it is possible to modify <script> tags on the fly with the Shopify API?
Scenario:
A page renders some <script> tags.
Before the <script> get rendered, my app adds an attribute to them, so that the tag is rendered with the attribute.
Thanks in advance
No. Your script is taken from Shopify with a GET request where it is inserted into the Liquid rendering pipeline for eventual inclusion in the client's HTML payload. If you want that script to do custom stuff, have it do a callback with an App Proxy which would then make it dynamic.
Read this to learn a lot: https://help.shopify.com/api/sdks/shopify-apps/modifying-online-store/use-javascript-responsibly
A Shopify App with the write_themes scope (see Shopify Documentation) can access and edit Assets and the Theme. Your editing of the Theme could include the modification of a <script> tag to as your put it "add an attribute".
Take into consideration whether the Theme designer hard coded the URL of the script or used liquid tags such as {{ 'example.js' | asset_url | script_tag }} to create the asset URL.

CDN image update

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"}}">

nitmedia/wkhtml2pdf images not working on laravel

I've included the package, the pdf gets generated but somehow the images dont appear on the pdf. The HTML content and CSS works like expected.
When i return the view as how you'd normally return a view in laravel, the receipt displays nicely along with the images.
But when i:
return PDF::html('receipt.show', $data);
The images dont appear.
My view file has the image like so:
<img class="img-responsive" src="img/receipt/banner.jpg">
The image is within:
public/img/receipt/banner.jpg
This is a laravel app running on homestead environment.
You need to use absolute path in image src attribute instead of relative. Smth like:
<img class="img-responsive" src="http://your-domain.com/img/receipt/banner.jpg">
You can use
<base href="http://your-domain.com/" />
into your head and it will help for all your links