I am trying to figure out how to display product images by their image role inside Magento_Catalog/templates/product/image_with_borders.phtml
Each product on my shop page will have three images each with their own image role (base, preview, hover).
This is how my product currently looks:
Here is my image_with_borders.phtml file:
<?php /** #var $block \Magento\Catalog\Block\Product\Image */ ?>
<img
src="<?= $block->escapeUrl($block->getImageUrl()) ?>"
alt="<?= /* #noEscape */ $block->stripTags($block->getLabel(), null, true) ?>"
class="main"
max-width="<?= $block->escapeHtmlAttr($block->getWidth()) ?>"
max-height="<?= $block->escapeHtmlAttr($block->getHeight()) ?>"
/>
<img src="" alt="" class="preview">
<img src="" alt="" class="hover">
How can I request the images with the roles, base, preview and hover in this file?
If you have already identified a file to modify you can use js or knockout js to alter the image according to its role.
For example image with the hover role, you can use js with hover event, when the user mouse over you can process to change the image.
Related
I have developed a custom Magento2 theme and created a Generic Page layout at Vendor/Theme/Magento_Theme/layout/default.xml. In that layout i have configured my custom generic layout to use Header - Content - Footer. I have set the menu positions and the appropriate blocks.
I am now looking for some static pages to use a template and within Content Area (of the Generic page layout). For example Home page must have a banner slider and Contact page must have a Google map. Is there any way to configure it to my theme?? Is that the page_layout section of my theme??? I cannot find any customization there.
Did you look at default Core file? For example
vendor/magento/module-theme/view/frontend/layout/default.xml ?
vendor/magento/module-theme/view/frontend/templates/html/footer.phtml
<div class="footer-container">
<div class="footer">
<?php echo $block->getChildHtml() ?>
<p class="bugs"><?php /* #escapeNotVerified */ echo __('Help Us Keep Magento Healthy') ?> - <a
href="http://www.magentocommerce.com/bug-tracking"
target="_blank"><strong><?php /* #escapeNotVerified */ echo __('Report All Bugs') ?></strong></a>
</p>
<address><?php /* #escapeNotVerified */ echo $block->getCopyright() ?></address>
</div>
I am using Fancybox gallery with cushyCMS for my client. It will be useful if I can create more main images as a series of photos for particular thumbnail, but in this case I want to hide empty src images so there are no white images when pictures are extended and client doesn`t fill it.
<li>
<div class="wrap">
<a class="fancybox" rel="group1" href="images/GaleryPicSixSM.png">
<img id="thumbnailSix" class="cushycms thumbnail" src="index_15_1769179488.png" caption="thumbnail 6" />
</a>
<img id="mainPicutureSix" class="cushycms main" src="" caption="main image 6">
</div>
</li>
Is there anyway how I can hide automatically empty src in case that client will not find relevant picture ? Unfortunately there is no possibility in cushyCMS for my client to add a more pictures under one thumbnail.
If you can use jQuery, the following code would do the trick:
$('img [src=""]').hide();
I am trying to use the Filepicker IO API to let users upload images. I am trying to duplicate the steps shown in the "get started" video, but I am running into a road block. The Filepicker opens fine, but it doesn't seem to be calling the javascript function (openFilePicker()) I have in the div (when the filepicker settings are set in the div, then it works). Also, after I upload an image, I am not sure how to get the information so I can display it on another page (store it with php, etc..) If you could help me out I would really appreciate it. Here is the code:
<script type="text/javascript">
function openFilePicker() {
filepicker.setKey('MYKEYHERE');
filepicker.pick({
mimetypes: ['image/*', 'text/plain'],
container: 'window',
services:['COMPUTER', 'FACEBOOK', 'GMAIL', 'PICASA', 'DROPBOX', 'INSTAGRAM', 'FLICKR'],
},
function(FPFile){
console.log(JSON.stringify(FPFile));
//UPLOAD COMPLETE
UpdateHTMLWithUploadedFile(FPFile.url);
},
function(FPError){
console.log(FPError.toString());
}
);
}
</script>
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
<div class="row margin" id='img-row'>
<input id="filename" disabled="disabled" class="input-text file-input-value" type="text" style="width: 360px;" value=""/>
<input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-container="modal" type="filepicker" data-fp-apikey="MYKEYHERE" id='campaign-img-input' onclick="javascript:openFilePicker()">
</div>
You seem to be mixing the documentation on the filepicker.io widgets with that of the filepicker.io javascript api. If you'd like to bind to the onclick event of an object and use the filepicker.pick call directly, you should use a standard button rather than a filepicker input type, i.e.
<button onclick="javascript:openFilePicker()">Choose Image</button>
So I have a gallery of images, and a few links to it. Something like that
title
link to first image
link to second image
link to third image
This is cause first image to duplicate in fancybox. Like this:
http://filebeam.com/2dec41a1820f2525f040424578c4421c.jpg
How can I make a multiple links to the same object without duplications?
If all links are visible and clickable, then you could create a custom click handler for the first one that opens fancyBox gallery from the rest -
<a data-trigger-rel="gallery" class="fancybox-trigger" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<br />
<br />
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
$(".fancybox-trigger").click(function() {
$("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');
return false;
});
$(".fancybox").fancybox();
See in action - http://jsfiddle.net/g9R4H/
Form tag is stripped off in Cake Php view file.
In 'login.ctp' (Layout view)
<div id="test">
<?php echo $this->Form->create(); ?>
Test form Elements
<?php echo $this->Form->end(); ?>
</div>
When checked in firebug console only creating below tags
<div id="test">
<div style="display:none;"><input type="hidden" value="POST" name="_method"></div>
Test form Elements
</div>
// "<div style="display:none;"><input type="hidden" value="POST" name="_method"></div>". This div tag is automatically created.
I also created a 'inner.ctp' on elements in views and tried to call from layout view(login.ctp) as echo $this->element('inner') , but results in same problem
Can any one help?
I'm almost certain that you have another form on your page, probably in your layout, that you're not closing with...
echo $this->Form->end();
If this is not the case, I suggest getting the latest stable version of Cake 1.3 and overwriting your current one.