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"}}">
Related
I have an image in my theme in a .tpl file defined like this:
<img class="logo" src="/public/img/Logo.svg">
However the image is not found even though it is in this directory:
/themes/theme_name/assets/img/Logo.svg
The result in the console is thus
GET http://localhost/public/img/Logo.svg 404 (Not Found)
Even though my url to the shop is this:
http://localhost/prestashop/en/
How do I get prestashop 1.7 to display this image or know where exactly to look for it?
In TPL try with : <img class="logo" src="{$urls.img_url}Logo.svg">
Regards
I have added dropzone component in vue.
I want to change the image upload URL dynamically, see the attached screenshot.
I belive you have to do this.form.id
Is there any way to reference a cdn image location from a CSS file in order to set a background image? For example, in a component file I can reference an image file using:
{{cdn 'img/my-image.jpg'}}
If I want to use that image as a background image in css, I need to set it in the stylesheet. For example:
.element {
background-image: url({{cdn 'img/my-image.jpg'}});
}
Is this possible, or do I need to set the background image inline in the html?
I see that there is a custom stencilString method, but I don't know how this would work in my situation, since I wouldn't want to hardcode the entire URL of the image on the CDN.
Currently with Stencil, there is not a way to reference it with a variable. This is available with blueprint.
You could always set it using an inline style:
<div class="element" style="url( {{getImage image 'gallery' (cdn 'img/my-image.jpg') }}">
'gallery refers to the size of image to get. See {{getImage}} helper doc here
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
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;
}