MULTI-LANG BANNER IMAGES

[ogov]

Hi,

When we want to add a banner in a multi-lang store;
we have multi-lang inputs for titles,
but no multi-lang inputs for images.
We can only chose one image for all languages.

The images used in the banners/slideshows mostly have headings and descriptions on them,
so; acording to the chosen language,
the slideshows and banners must also show the related language images.

Can you please add seperate image inputs for each language in the banner images area.

Thank you,
Best Regards

[jetpro]

Hi. Same problem here. If i have a banner in English, i dont want to show it to a french language user. I think we can change by code, but it seems good ideia to have an extra option on the insert banner page.

[ogov]

I will try to do it myself, and share it in here, if I success.

Some help would be great though

[remcofaasse]

Any luck. I am looking for this kind of feature too.
Thanks for reply.

[Nasko]

Same issue here too. I have some german text in the slideshow and some banners. Can't change the pictures for English or other languages so it looks kind of unprofessional
Don't forget to share if you find a solution please...

[straightlight]

Done. Although, this one is not VQMod due to the way the banner template was built from the admin.

Here's my admin/view/template/design/banner_form.tpl file:

Code: Select all

<?php echo $header; ?>
<div id="content">
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <?php if ($error_warning) { ?>
  <div class="warning"><?php echo $error_warning; ?></div>
  <?php } ?>
  <div class="box">
    <div class="heading">
      <h1><img src="view/image/banner.png" alt="" /> <?php echo $heading_title; ?></h1>
      <div class="buttons"><a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a><a onclick="location = '<?php echo $cancel; ?>';" class="button"><?php echo $button_cancel; ?></a></div>
    </div>
    <div class="content">
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
        <table class="form">
          <tr>
            <td><span class="required">*</span> <?php echo $entry_name; ?></td>
            <td><input type="text" name="name" value="<?php echo $name; ?>" size="100" />
              <?php if ($error_name) { ?>
              <span class="error"><?php echo $error_name; ?></span>
              <?php } ?></td>
          </tr>
          <tr>
            <td><?php echo $entry_status; ?></td>
            <td><select name="status">
                <?php if ($status) { ?>
                <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                <option value="0"><?php echo $text_disabled; ?></option>
                <?php } else { ?>
                <option value="1"><?php echo $text_enabled; ?></option>
                <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                <?php } ?>
              </select></td>
          </tr>
        </table>
        <table id="images" class="list">
          <thead>
            <tr>
              <td class="left"><?php echo $entry_title; ?></td>
              <td class="left"><?php echo $entry_link; ?></td>
              <td class="left"><?php echo $entry_image; ?></td>
              <td></td>
            </tr>
          </thead>
          <?php $image_row = 0; ?>
          <?php foreach ($banner_images as $banner_image) { ?>       
          <tbody id="image-row<?php echo $image_row; ?>">
            <tr>
              <td class="left"><?php foreach ($languages as $language) { ?>
                <input type="text" name="banner_image[<?php echo $image_row; ?>][banner_image_description][<?php echo $language['language_id']; ?>][title]" value="<?php echo isset($banner_image['banner_image_description'][$language['language_id']]['title']) ? $banner_image['banner_image_description'][$language['language_id']]['title'] : ''; ?>" />
                <img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /><br />
                <?php if (isset($error_banner_image[$image_row][$language['language_id']])) { ?>
                <span class="error"><?php echo $error_banner_image[$image_row][$language['language_id']]; ?></span>
                <?php } ?>
                <?php } ?></td>
              <td class="left">
           <?php $link_row = 0; ?>
           <?php foreach ($languages as $language) { ?>
            <input type="text" name="banner_image[<?php echo $image_row; ?>][banner_image_description][<?php echo $language['language_id']; ?>][link]" value="<?php echo (isset($banner_image['banner_image_description'][$language['language_id']]['link'])) ? $banner_image['banner_image_description'][$language['language_id']]['link'] : ''; ?>" />
            <img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /><br />
            <?php $link_row++; ?>
           <?php } ?>
           </td>
              <td class="left">
           <?php $language_row = 0; ?>
           <?php foreach ($languages as $language) { ?>
           <div class="image"><img src="<?php echo $banner_image['thumb']; ?>" alt="" id="thumb<?php echo $image_row; ?>" />
                  <input type="hidden" name="banner_image[<?php echo $image_row; ?>][banner_image_description][<?php echo $language['language_id']; ?>][image]" value="<?php echo (isset($banner_image['banner_image_description'][$language['language_id']]['image'])) ? $banner_image['banner_image_description'][$language['language_id']]['image'] : ''; ?>" id="image<?php echo $language_row; ?>"  />
                  <br />
                  <a onclick="image_upload('image<?php echo $language_row; ?>', 'thumb<?php echo $language_row; ?>');"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#thumb<?php echo $language_row; ?>').attr('src', '<?php echo $no_image; ?>'); $('#image<?php echo $language_row; ?>').attr('value', '');"><?php echo $text_clear; ?></a>
              <img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /><br />
              </div>
           <?php $language_row++; ?>
           <?php } ?>    
              </td>
              <td class="left"><a onclick="$('#image-row<?php echo $image_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td>
            </tr>
          </tbody>
          <?php $image_row++; ?>
          <?php } ?>
          <tfoot>
            <tr>
              <td colspan="3"></td>
              <td class="left"><a onclick="addImage();" class="button"><?php echo $button_add_banner; ?></a></td>
            </tr>
          </tfoot>
        </table>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
var image_row = <?php echo $image_row; ?>;
var language_row = <?php echo $language_row; ?>;

function addImage() {
    html  = '<tbody id="image-row' + image_row + '">';
   html += '<tr>';
    html += '<td class="left">';
   <?php foreach ($languages as $language) { ?>
   html += '<input type="text" name="banner_image[' + image_row + '][banner_image_description][<?php echo $language['language_id']; ?>][title]" value="" /> <img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /><br />';
    <?php } ?>
   html += '</td>';   
   html += '<td class="left">';   
   <?php foreach ($languages as $language) { ?>
   html += '<input type="text" name="banner_image[' + image_row + '][banner_image_description][<?php echo $language['language_id']; ?>][link]" value="" />';
   html += '<img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /><br />';
   <?php } ?>
   html += '</td>';   
   html += '<td class="left">';   
   <?php foreach ($languages as $language) { ?>
   html += '<div class="image">';   
   html += '<img src="<?php echo $no_image; ?>" alt="" id="thumb' + language_row + '" /><input type="hidden" name="banner_image[' + image_row + '][banner_image_description][<?php echo $language['language_id']; ?>][image]" value="" id="image' + language_row + '" /><br /><a onclick="image_upload(\'image' + language_row + '\', \'thumb' + language_row + '\');"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$(\'#thumb' + language_row + '\').attr(\'src\', \'<?php echo $no_image; ?>\'); $(\'#image' + language_row + '\').attr(\'value\', \'\');"><?php echo $text_clear; ?></a>';
   html += '<img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /><br />';
   html += '</div>';
   language_row++;
   <?php } ?>
   html += '</td>';
   html += '<td class="left"><a onclick="$(\'#image-row' + image_row  + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>';
   html += '</tr>';
   html += '</tbody>';
   
   $('#images tfoot').before(html);
   
   image_row++;
}
//--></script>
<script type="text/javascript"><!--
function image_upload(field, thumb) {
   $('#dialog').remove();
   
   $('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $token; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
   
   $('#dialog').dialog({
      title: '<?php echo $text_image_manager; ?>',
      close: function (event, ui) {
         if ($('#' + field).attr('value')) {
            $.ajax({
               url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>&image=' + encodeURIComponent($('#' + field).attr('value')),
               dataType: 'text',
               success: function(data) {
                  $('#' + thumb).replaceWith('<img src="' + data + '" alt="" id="' + thumb + '" />');
               }
            });
         }
      },   
      bgiframe: false,
      width: 700,
      height: 400,
      resizable: false,
      modal: false
   });
};
//--></script>
<?php echo $footer; ?>


Here's my admin/model/design/banner.php file and the following are the two methods you need to change:

Code: Select all

<?php
class ModelDesignBanner extends Model {
   public function addBanner($data) {
      $this->db->query("INSERT INTO " . DB_PREFIX . "banner SET name = '" . $this->db->escape($data['name']) . "', status = '" . (int)$data['status'] . "'");
   
      $banner_id = $this->db->getLastId();
   
      if (isset($data['banner_image'])) {
         foreach ($data['banner_image'] as $banner_image) {
            $this->db->query("INSERT INTO " . DB_PREFIX . "banner_image SET banner_id = '" . (int)$banner_id . "'");
            
            $banner_image_id = $this->db->getLastId();
            
            foreach ($banner_image['banner_image_description'] as $language_id => $banner_image_description) {            
               $this->db->query("INSERT INTO " . DB_PREFIX . "banner_image_description SET banner_image_id = '" . (int)$banner_image_id . "', language_id = '" . (int)$language_id . "', banner_id = '" . (int)$banner_id . "', title = '" .  $this->db->escape($banner_image_description['title']) . "', link = '" .  $this->db->escape($banner_image_description['link']) . "', image = '" .  $this->db->escape($banner_image_description['image']) . "'");
            }
         }
      }      
   }
   
   public function editBanner($banner_id, $data) {
      $this->db->query("UPDATE " . DB_PREFIX . "banner SET name = '" . $this->db->escape($data['name']) . "', status = '" . (int)$data['status'] . "' WHERE banner_id = '" . (int)$banner_id . "'");

      $this->db->query("DELETE FROM " . DB_PREFIX . "banner_image WHERE banner_id = '" . (int)$banner_id . "'");
      $this->db->query("DELETE FROM " . DB_PREFIX . "banner_image_description WHERE banner_id = '" . (int)$banner_id . "'");
         
      if (isset($data['banner_image'])) {
         foreach ($data['banner_image'] as $banner_image) {
            $this->db->query("INSERT INTO " . DB_PREFIX . "banner_image SET banner_id = '" . (int)$banner_id . "'");
            
            $banner_image_id = $this->db->getLastId();
            
            foreach ($banner_image['banner_image_description'] as $language_id => $banner_image_description) {            
               $this->db->query("INSERT INTO " . DB_PREFIX . "banner_image_description SET banner_image_id = '" . (int)$banner_image_id . "', language_id = '" . (int)$language_id . "', banner_id = '" . (int)$banner_id . "', title = '" .  $this->db->escape($banner_image_description['title']) . "', link = '" .  $this->db->escape($banner_image_description['link']) . "', image = '" .  $this->db->escape($banner_image_description['image']) . "'");
            }
         }
      }         
   }
   
   public function deleteBanner($banner_id) {
      $this->db->query("DELETE FROM " . DB_PREFIX . "banner WHERE banner_id = '" . (int)$banner_id . "'");
      $this->db->query("DELETE FROM " . DB_PREFIX . "banner_image WHERE banner_id = '" . (int)$banner_id . "'");
      $this->db->query("DELETE FROM " . DB_PREFIX . "banner_image_description WHERE banner_id = '" . (int)$banner_id . "'");
   }
   
   public function getBanner($banner_id) {
      $query = $this->db->query("SELECT DISTINCT * FROM " . DB_PREFIX . "banner WHERE banner_id = '" . (int)$banner_id . "'");
      
      return $query->row;
   }
      
   public function getBanners($data = array()) {
      $sql = "SELECT * FROM " . DB_PREFIX . "banner";
      
      $sort_data = array(
         'name',
         'status'
      );   
      
      if (isset($data['sort']) && in_array($data['sort'], $sort_data)) {
         $sql .= " ORDER BY " . $data['sort'];   
      } else {
         $sql .= " ORDER BY name";   
      }
      
      if (isset($data['order']) && ($data['order'] == 'DESC')) {
         $sql .= " DESC";
      } else {
         $sql .= " ASC";
      }
      
      if (isset($data['start']) || isset($data['limit'])) {
         if ($data['start'] < 0) {
            $data['start'] = 0;
         }               

         if ($data['limit'] < 1) {
            $data['limit'] = 20;
         }   
      
         $sql .= " LIMIT " . (int)$data['start'] . "," . (int)$data['limit'];
      }      
      
      $query = $this->db->query($sql);

      return $query->rows;
   }
      
   public function getBannerImages($banner_id) {
      $banner_image_data = array();
      
      $banner_image_query = $this->db->query("SELECT * FROM " . DB_PREFIX . "banner_image WHERE banner_id = '" . (int)$banner_id . "'");
      
      foreach ($banner_image_query->rows as $banner_image) {
         $banner_image_description_data = array();
         
         $banner_image_description_query = $this->db->query("SELECT * FROM " . DB_PREFIX . "banner_image_description WHERE banner_image_id = '" . (int)$banner_image['banner_image_id'] . "' AND banner_id = '" . (int)$banner_id . "'");
         
         foreach ($banner_image_description_query->rows as $banner_image_description) {         
            $banner_image_description_data[$banner_image_description['language_id']] = array('title' => $banner_image_description['title'],
                                                                         'link'  => $banner_image_description['link'],
                                                                         'image' => $banner_image_description['image']
                                                                        );
            
         }
      
         $banner_image_data[] = array(
            'banner_image_description' => $banner_image_description_data,            
         );
      }
      
      return $banner_image_data;
   }
      
   public function getTotalBanners() {
         $query = $this->db->query("SELECT COUNT(*) AS total FROM " . DB_PREFIX . "banner");
      
      return $query->row['total'];
   }   
}
?>


In admin/controller/design/banner.php file,

find:

Code: Select all

if ($banner_image['image'] && file_exists(DIR_IMAGE . $banner_image['image'])) {
            $image = $banner_image['image'];
         } else {
            $image = 'no_image.jpg';
         }


replace with:

Code: Select all

if (!empty($banner_image['image']) && file_exists(DIR_IMAGE . $banner_image['image'])) {
            $image = $banner_image['image'];
         } else {
            $image = 'no_image.jpg';
         }


Then, find:

Code: Select all

'link'                       => $banner_image['link'],
'image'                    => $image,


Remove them.

In your PHPMyAdmin, go to your OpenCart database and remove the field: image on your banner_image table. Then, go to the SQL tab and paste the following command:

Code: Select all

ALTER TABLE `oc_banner_image_description` ADD `link` varchar(255) COLLATE utf8_bin NOT NULL;
ALTER TABLE `oc_banner_image_description` ADD `image` varchar(255) COLLATE utf8_bin NOT NULL;


Note: Change the oc_ prefix if incorrect.

Execute. Then, go to your Admin - > system - > design - > banners and when you add / edit banners, you should now see images along with titles in multi-language mode.

[straightlight]

Code edited above, simply replace all the indicated files to speed up the process and re-follow instructions on what needs to be edited.

[josee225]

Hi!

This is extremely useful! But I get an error after following your instructions:
Undefined variable: image in /xxxx/OpenC/admin/controller/design/banner.php on line 382
Line 382 being:

Code: Select all

'thumb'                    => $this->model_tool_image->resize($image, 100, 100)

Actually, when I try to add images to my banners, the first one works fine, but when I click on the link for the other language, it just replaces the first image. Therefore, no image for the second language, no thumbnail and bam, I get an error....

I emptied browser cache, emptied my vqmod cache, I am using FF10.0.2 Mac and OC 1.5.1.3. I also tried editing my banners with Chrome and got the same result... Help?

[straightlight]

Thanks josee225. With the precise details above, I was able to reproduce the action and corrected my instructions entirely above. I now even added the link as linguistic as a supplement with my correction in case the URL would involve separated languages as well.

To all users who tried this contribution before, revert the process and re-follow the updated version: viewtopic.php?f=110&t=46918&p=244051#p244051 . This subject should now work as intented.

Assure to import your current links and image you already from database into the banner description table. If you see from the admin banner page that your images does not appear as they should is obviously because from the description table, no images has been added yet.

[josee225]

Hi Straightlight,

thanks for the quick update! One quick question:

Do I have to "undo" the sql query or it is still the same? I'm asking because I am definitely NOT good with SQL queries, so I would not know how to revert that...

[straightlight]

Right. The SQL queries of the previous instructions does not need to be re-done except simply to add the link field from the query. There's no need to re-add the image field into the description table.

[Ebenezer18]

Some help would be great though

[josee225]

Hi!

Reverted everything, including the database, and started from scratch (I really need this mod!!!)

I still have the error on the thumb variable, just at different line number now:

Code: Select all

Notice: Undefined variable: image in /xxxxx/cartamagicastore.com/OpenC/admin/controller/design/banner.php on line 380

I still had similar problems adding the images.

So I removed everything and saved my banner. And started from scratch, with just one banner. All went fine! So I went back to add more and my thumbnails had disappeared and the error about the thumbnails was back.

But my banners looks fine in the front-end

[straightlight]

Looks like the Ajax code wasn't coded to allow multiple images at the time during upload since I can't see anywhere else in the admin where this is coded except by individual rows to accept individual images only.

If you add link names and URL names as multi-language, do you still see erroneous despite of the images ?

[josee225]

I'm not sure what you mean by:

If you add link names and URL names as multi-language, do you still see erroneous despite of the images ?

[straightlight]

1 - Add some titles into any text boxes you have.
2 - Add some URLs into any text boxes you have.
3 - Get back to the page and see if the results maintains.

[josee225]

Oh! That is exactly what I did in the previous step

I filled out everything, all was fine and when I came back, well, you know the rest...

[josee225]

I even tried to add different links an all turned out fine in the front end side. I just get errors in the admin when I go into System/design/banners

[droconut]

you could use captions for your images instead of hard painting the text into you images. this would be even better because of the seo benefit having the text you are displaying on your site, not just in your image.

though commercial, my module can exactly do that (adding captions to images, multilingual). for more info see my signature.

greets,

dropping coconut

[jalmir]

Great, works like a charm but I have the same error as josee225

Though everything works fine in the admin section and on the storefront too ...

and BTW, my open cart is 1.5.2.1