I use open cart I am trying to get on my slideshow controller remove the $width and $height.
And just get the image, title, and link. I have tried to remove the $widths and $height but still get error
<?php
class ControllerModuleSlideshow extends Controller {
public function index($setting) {
static $module = 0;
$this->load->model('design/banner');
$this->load->model('tool/image');
$this->document->addStyle('catalog/view/javascript/jquery/flexslider/flexslider.css');
$this->document->addScript('catalog/view/javascript/jquery/flexslider/jquery.flexslider-min.js');
$data['width'] = $setting['width']; //need to remove
$data['height'] = $setting['height']; //need to remove
$data['banners'] = array();
$results = $this->model_design_banner->getBanner($setting['banner_id']);
foreach ($results as $result) {
if (is_file(DIR_IMAGE . $result['image'])) {
$data['banners'][] = array(
'title' => $result['title'],
'link' => $result['link'],
'image' => $this->model_tool_image->resize($result['image'], $setting['width']//need to remove, $setting['height']//need to remove)
);
}
}
$data['module'] = $module++;
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/slideshow.tpl')) {
return $this->load->view($this->config->get('config_template') . '/template/module/slideshow.tpl', $data);
} else {
return $this->load->view('default/template/module/slideshow.tpl', $data);
}
}
}
Can't seem to find the way to make this work in replace of the width and height
public function getImage($image){
$image = DIR_IMAGE . $image;
if($this->request->server['HTTPS']) {
return $this->config->get('config_ssl') . 'image/' . $image;
} else {
return $this->config->get('config_url') . 'image/' . $image;
}
}
$this->getImage($result['image']);
I had this exact problem not too long ago. It was driving me daft and I all I wanted was to make the slide show responsive but the W x H values were becoming very troublesome to remove without affecting other classes. Portability was also a serious concern of mine. Basically all this is doing is riding off the nivoslider code but using the bootstrap carousel for the display. So you could change the slideshow banners as you always have, and they are always displayed on the front end.
If you happen to be using the bootstrap 3 framework, this is a great work around which proved successful. Don't edit the slideshow.php, edit slideshow.tpl instead. I highly don't recommend you mess with the php files unless you are very comfortable with php and the idea of mvc in opencart. To be honest, you probably should never edit, just extend or start from scratch as it uses fall back mechanisms.
But anyway, the code:
<div class="col-md-12" >
<div id="homepage" class="carousel slide">
<div class="carousel-inner">
<?php
$flag = 0;
foreach ($banners as $banner) { ?>
<div class="item <?=$flag==0?"active":""?>">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } ?>
<?php
$flag=1;
} ?>
</div>
</div>
...and the JQuery
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 5000
});
});
</script>
edits welcomed
Width and Height are the feature which will help you to assign width and height dynamically that you can set from the admin panel
admin>extensions>modules>slideshow[edit]
if you don't want this feature in effect
Simply go to the template file
find (catalog/view/theme/default/template/module/slideshow.tpl)
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">
Replace with
<div id="slideshow<?php echo $module; ?>" class="nivoSlider">
two ways to help u :)
in catalog/controller/module/slideshow.php
BEFORE
$this->data['width'] = $setting['width'];
$this->data['height'] = $setting['height'];
AFTER
$this->data['width'] = '0'; // or NULL
$this->data['height'] = '0'; // or NULL
in catalog/view/theme/default/template/module/slideshow.tpl
BEFORE
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">
AFTER
<div id="slideshow<?php echo $module; ?>" class="nivoSlider">
if you need to add custom height and width add this to above code change 000 to you size
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: 000px; height: 000px;">
Related
On the website we have banners all over but non of them have any alt text.
Below is the code for, any pointers as to how i can solve this issue? I was thinking maybe having the alt as the image name if possible so need to find a way to echo it.
Any other suggestions? I have 8 banners and don't mind manually adding the alt text for each banner if possible
<?php if ($module_title){ ?>
<div class="box-heading"><?php echo $module_title; ?></div>
<?php } ?>
<div class="box rich_banner grid_holder">
<?php foreach($sections as $section){ ?>
<div class="banner_<?php echo $columns; ?>">
<div class="image zoom_image_container"><img class="zoom_image" alt="" src="<?php echo $section['image']; ?>" />
<?php echo $section['description']; ?>
</div>
</div>
<?php } ?>
</div>
would this be the section of variable below?
<?php
class ControllerExtensionModuleCosyoneBanner extends Controller {
public function index($setting) {
if(empty($setting['module_title'][$this->config->get('config_language_id')])) {
$data['module_title'] = false;
} else if (isset($setting['module_title'][$this->config->get('config_language_id')])) {
$data['module_title'] = html_entity_decode($setting['module_title'][$this->config->get('config_language_id')], ENT_QUOTES, 'UTF-8');
}
$data['columns'] = $setting['columns'];
if (isset($setting['sections'])) {
$data['sections'] = array();
$section_row = 0;
foreach($setting['sections'] as $section) {
$this->load->model('tool/image');
if (isset($section['block'][$this->config->get('config_language_id')])){
$block = html_entity_decode($section['block'][$this->config->get('config_language_id')], ENT_QUOTES, 'UTF-8');
} else {
$block = false;
}
if (isset($section['thumb_image'])){
$image = 'image/' . $section['thumb_image'];
} else {
$image = false;
}
$section_row++;
$data['sections'][] = array(
'index' => $section_row,
'description' => $block,
'image' => $image
);
}
return $this->load->view('extension/module/cosyone_banner', $data);
}
}
}
You are able to use the description in your alt, I think for what's available that is the best solution.
<div class="image zoom_image_container"><img class="zoom_image" alt="<?php echo $section['description']; ?>" src="<?php echo $section['image']; ?>" />
I want to change some php code to select a random image from a specified directory rather than the same default image it currently selects. This is the piece of code that currently selects a default fallback image - if there is no image available:
<?php
$postCover = '';
if ($post->hasImage()) {
$postCover = $post->getImage($photoSize);
}
if (!$post->hasImage() && $params->get('photo_legacy', true)) {
$postCover = $post->getContentImage();
}
if (!$postCover && $params->get('show_photo_placeholder', false)) {
$postCover = $post->getImage($photoSize, true);
}
?>
<?php if ($postCover) { ?>
<div class="eb-mod-thumb<?php if ($photoAlignment) { echo " is-" . $photoAlignment; } ?> <?php if (isset($photoLayout->full) && $photoLayout->full) { echo "is-full"; } ?>">
<?php if (isset($photoLayout->crop) && $photoLayout->crop) { ?>
<a href="<?php echo $post->getPermalink();?>" class="eb-mod-image-cover"
style="
background-image: url('<?php echo $postCover;?>');
<?php if (isset($photoLayout->full) && $photoLayout->full) { ?>
width: 100%;
<?php } else { ?>
width: <?php echo $photoLayout->width;?>px;
<?php } ?>
height: <?php echo $photoLayout->height;?>px;"
></a>
<?php } else { ?>
<a href="<?php echo $post->getPermalink();?>" class="eb-mod-image"
style="
<?php if (isset($photoLayout->full) && $photoLayout->full) { ?>
width: 100%;
<?php } else { ?>
width: <?php echo (isset($photoLayout->width)) ? $photoLayout->width : '260';?>px;
<?php } ?>"
>
<img src="<?php echo $postCover;?>" alt="<?php echo $post->title;?>" />
</a>
<?php } ?>
</div>
<?php } ?>
I think it is this line I need to change:
<img src="<?php echo $postCover;?>" alt="<?php echo $post->title;?>" />
I have found this solution on here: PHP pull random image from folder
<?php
$dir = "images/";
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?> <img src="images/<?php echo $images[$i]; ?>" alt="" />
Which seems to be able to do what I want, but I am unsure how to incorporate it (or where) in the code I have supplied (not having php experience, but trying to learn).
Can anyone help me?
Kind regards
Mel
Let's say the link to your default image is : /path/to/default_imge.jpg
So a little solution for someone who doesn't like to create a big mess for this is :
.....
if (!$postCover && $params->get('show_photo_placeholder', false)) {
$postCover = $post->getImage($photoSize, true);
}
?>
// New Code Starts
$path='/path/to/default_imge.jpg';
if(stristr($postCover,$path) !==false){
$dir = "images/";
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
$postCover="images/".$images[$i];
}
// New Code Ends
<?php if ($postCover) { ?>
.......
In this case you can go back to the normal behavior just be removing the new code.
This will not answer your question, but this will help you while learning PHP/HTML
You mix up html and PHP in a way that makes the code unreadable.
In place of doing this:
if ($var) { ?> <div>Some HTML</div> <?php }
else { ?> <div>Some other HTML</div> <?php } ?>
Do this:
if($var){
echo "<div>Some HTML</div>";
}
else{
echo "<div>Some other HTML</div>";
}
It's a common beginner mistake, that makes it more difficult to learn coding because it "obfuscate" your code.
This will make your code more understandable for you and for us :)
I currently have a carousel on my page inside a Wordpress loop. So as it loops through it changes the background image according to which post I am currently on in the loop. However, I want to use media queries to load smaller images if for instance I the screen size is smaller.
This is what I currently have:
while( $loop->have_posts() ) : $loop->the_post();
$class = '';
// Custom Posts
$carousel_image_1 = get_field('carousel_image_1');
$image_1_title = get_field('image_1_title');
if( $slide_counter == 0 ) { $class .= ' active'; }
?>
<div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
<!-- Set the first background image using inline CSS below. -->
<a href="<?php echo get_post_permalink(); ?>" target="_blank">
<div class="fill" style="background-image:url(<?php echo $carousel_image_1['url']; ?>); background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
<div class="carousel-caption">
<h2><?php echo $image_1_title; ?></h2>
<img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
</div>
</a>
</div>
<?php $slide_counter++; ?>
<?php endwhile; wp_reset_query(); ?>
You can't use media queries inline, and you won't be able to have the dynamic flexibility of your variables in CSS, because PHP is server-side.
But, you could do this with JavaScript as long as the JS is able to get the PHP variables (my example uses jQuery):
<?php
while( $loop->have_posts() ) : $loop->the_post();
$class = '';
// Custom Posts
$carousel_image_1 = get_field('carousel_image_1');
$carousel_image_2 = get_field('carousel_image_2'); // added this, for different size image
$image_1_title = get_field('image_1_title');
if( $slide_counter == 0 ) { $class .= ' active'; }
?>
<div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
<a href="<?php echo get_post_permalink(); ?>" target="_blank">
<div class="fill" style="background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
<div class="carousel-caption">
<h2><?php echo $image_1_title; ?></h2>
<img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
</div>
</a>
</div>
<script>
var resizeTimer;
function resizer() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
var windowWidth = $(window).width();
if (windowWidth >= 992) { // for width 992 pixels and up
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
});
} else { // smaller sizes
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
});
}
}, 200);
}
resizer();
$(window).on('resize', resizer);
</script>
<?php $slide_counter++; ?>
<?php endwhile; wp_reset_query(); ?>
I haven't tested it but I think it should work. You can also adjust the timeout to your preference (right now it's 200ms).
Or if you wanted to not make it truly responsive, and just set the background on page load, you could just write:
<script>
if (windowWidth >= 992) { // for medium size width and up
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
});
} else { // smaller sizes
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
});
}
</script>
The following Html CSS will show image in mobile view only
Html:
foreach($data as $item):
echo "
<div class='col-lg-4'>
<div class='panel panel-primary backImg' style='background-image:url({$item['imageLink']}); background-size:100% 100%;'>
Some Text
</div>
</div>";
endforeach;
Css:
#media(min-width: 480px){
.backImg{
background-image:none !important;
}
}
I am using the code below to loop through all simple products of a configurable within Magento. The code shows specific colour data from each simple product.
However if there is two simple products in different sizes but both have the same colour it will echo the information about that colour twice I only need it to show it once.
<div class="colour-swatch">
<h1>Other Colours Available</h1>
<?php
$conf = Mage::getModel('catalog/product_type_configurable')->setProduct($_product);
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions(); ?>
<div class="relative">
<?php
foreach($col as $simple_product){ ?>
<div class="container-swatch">
<img width="35" height="35" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . 'catalog/product' . $simple_product->getSwatch() ?>">
<div class="content">
<div class="inside-swatch-name"><?php echo $simple_product->getAttributeText('real_colour'); ?></div>
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . 'catalog/product' . $simple_product->getLargeSwatch() ?>">
</div>
</div>
<?php } ?>
<?php if ($synb == 'Yes') { ?>
<div class="swatch-order">
ORDER SAMPLES
</div>
<?php } else {
//do nothing
} ?>
</div>
</div>
$colors = array();
foreach($col as $simple_product){
$color = $simple_product->getAttributeText('real_colour');
if(!in_array($color, $colors)){
$colors[] = $color; ?>
//do the rest from your foreach
Change this:
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions(); ?>
to this:
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions()->addGroupByAttribute('real_colour'); ?>
and see if this works.
Here is the website I am attempting this on: http://increaseinwebtraffic.com/marywood/deals/
The top few deals are larger than 620 width, but the bottom ones are smaller. I tried to use the code below with no success. I've Googled around and only found permanent solutions.
<?php the_post_thumbnail( array(620,295) ); ?>
Any help is appreciated.
Please try the following code.
<?php
$thumbnail_id = get_post_thumbnail_id(get_the_ID());
if (!empty($thumbnail_id))
{
$thumbnail = wp_get_attachment_image_src($thumbnail_id, 'full');
if (count ($thumbnail) >= 3)
{
$thumbnail_url = $thumbnail[0];
$thumbnail_width = $thumbnail[1];
$thumbnail_height = $thumbnail[2];
$thumbnail_w = 620;
$thumbnail_h = floor($thumbnail_height * $thumbnail_w / $thumbnail_width);
}
}
if (!empty ($thumbnail_url)): ?>
<img class="thumbnail" src="<?php echo $thumbnail_url; ?>" alt="<?php the_title_attribute(); ?>"
width="<?php echo $thumbnail_w; ?>" height="<?php echo $thumbnail_h; ?>" />
<?php endif; ?>
http://www.boxoft.net/2011/10/display-the-wordpress-featured-image-without-stretching-it/
What about putting a around that an setting the above code and then using CSS to set the width and height? Something like this:
CSS
.deals img {
width: 620px;
max-height: 295px;
}
HTML / PHP
<div class="deals"><?php the_post_thumbnail( array(620,295) ); ?></div>