Add pixel image on top of the image in "Image Show GK4" ?

Hello,

we want to add a image (pixel square) on the top of the background image.
But there is already a background image
I know that it is possible but I d'ont how to place the .pixel. In the module "Image Show GK4" (header position) ?

.pixel {
background-image: url("http://www.website.com/images/pixel.png");
background-repeat: repeat;
float: left;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}

Regard.

Hi

Can You please tell me what is it for ? Is it to cover a whole Image Show to make it not clicable ? Do You need it once for all module of per every slide ?

Hello,

thank for your anwser.

it is only for this module, for each images of this slide. The bakgound image is big (100Ko) so we put a lighter image (jpeg compress 5% with a little blur) > 15Ko
And we put a pixel square on it to make it more nice > 1Ko

Regard.

Hi

I'm afraid I still do not understand, but please try use this script. Add it to /layout/blocks/head.php

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
$('.gkIsWrapper-gk_photo figure').each(function(){
$(this).append('<div class="pixel"></divc>');
});
});})(jQuery)</script>


Hi, sorry. We saw this idea on a lot of template, from many years.
The idea is to save space with a feature like put squares in front of a big image (image vey compressed).

Example here in a template from JoomlaBamboo (Focus2) : http://demo.joomlabamboo.com/index.php?theme=jan15

Regard.

Hi

Ok. Now I understand In this case my solution should work. Please try it and show me the site with this working or not, so I'll come up with some adjustments.

Ok, but in the script there isn't the link to the pixel.png (see attachement)
And I used the script but it change nothing.

I think it would be better to add a css inside the module with the "Module Class Suffix", no ?

Regard.

pixel.png

Code: Select all

.pixel {
background-image: url("http://www.website.com/images/pixel.png");
background-repeat: repeat;
float: left;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}

Hi

Script is adding a layer which can be adjusted by the css You've pasted above. I see a small typo in my code, should be:

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
$('.gkIsWrapper-gk_photo figure').each(function(){
$(this).append('<div class="pixel"></div>');
});
});})(jQuery)</script>


So put my code to /layout/blocks/head.php and Your code to override.css and make sure override is enabled in template settings.

Than I need to see the site with both this codes and the png file placed as adviced. Than I will know what needs to be adjusted. Right now I'm just guessing.

Ok,
>> pixel.png is in the image folder in the template.
>> extra css code is in the override.css (which is enabled in the template parameter)

Code: Select all

.pixel {
    background-image: url("../images/pixel.png");
    background-repeat: repeat;
    float: left;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

>> code is added at the end of the head.php

Code: Select all

<?php

// This is the code which will be placed in the head section

// No direct access.
defined('_JEXEC') or die;

$this->addTemplateFavicon();
// check the color version
$template_style = $this->getTemplateStyle('style');
// load the CSS files
if(!file_exists(JPATH_SITE.DS.'components'.DS.'com_k2'.DS.'helpers'.DS.'route.php')) {
   $this->API->addCSS($this->API->URLtemplate() . '/css/k2.css');
}

$doc = JFactory::getDocument();
$doc->setTitle(preg_replace('@--@', ' - ', $doc->getTitle()));

$this->API->addCSS($this->API->URLtemplate() . '/css/font-awesome.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/normalize.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/layout.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/joomla.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/system/system.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/template.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/menu.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/gk.stuff.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/style'.$template_style.'.css');

if($this->API->get('typography', '1') == '1') {
   $this->API->addCSS($this->API->URLtemplate() . '/css/typography/typography.style'.$template_style.'.css');
}

$this->API->addCSSRule($this->API->get('css_custom', ''));

// include fonts
$font_iter = 1;

while($this->API->get('font_name_group'.$font_iter, 'gkFontNull') !== 'gkFontNull') {
 $font_data = explode(';', $this->API->get('font_name_group'.$font_iter, ''));
 if(isset($font_data) && count($font_data) >= 2) {
      $font_type = $font_data[0];
      $font_name = $font_data[1];
      if($this->API->get('font_rules_group'.$font_iter, '') != ''){
           if($font_type == 'standard') {
                $this->API->addCSSRule($this->API->get('font_rules_group'.$font_iter, '') . ' { font-family: ' . $font_name . '; }'."\n");
           } elseif($font_type == 'google') {
                $font_link = preg_replace('/https?:/m', '', $font_data[2]);
                $font_family = $font_data[3];
                $this->API->addCSS($font_link);
                $this->API->addCSSRule($this->API->get('font_rules_group'.$font_iter, '') . ' { font-family: \''.$font_family.'\', Arial, sans-serif; }'."\n");
           } elseif($font_type == 'squirrel') {
                $this->API->addCSS($this->API->URLtemplate() . '/fonts/' . $font_name . '/stylesheet.css');
                $this->API->addCSSRule($this->API->get('font_rules_group'.$font_iter, '') . ' { font-family: ' . $font_name . ', Arial, sans-serif; }'."\n");
           } elseif($font_type == 'adobe') {                   
                 $this->API->addJS('//use.edgefonts.net/'.$font_name.'.js');
                  $font_name = explode(":", $font_name);
                  $font_name = $font_name[0];
                  $this->API->addCSSRule($this->API->get('font_rules_group'.$font_iter, '') . ' { font-family: ' . $font_name . ', Arial, sans-serif; }'."\n");
            }
           
      }
 }
 $font_iter++;
}

// add responsive stylesheets
$this->generateLayout();

// include JavaScript
$this->API->addJS($this->API->URLtemplate() . '/js/modernizr.js');
$this->API->addJS($this->API->URLtemplate() . '/js/gk.scripts.js');
$this->API->addJS($this->API->URLtemplate() . '/js/gk.menu.js');
$this->API->addJS($this->API->URLtemplate() . '/js/fitvids.jquery.js');
$this->API->addJS($this->API->URLtemplate() . '/js/lazyload.jquery.js');
$this->API->addJS($this->API->URLtemplate() . '/js/scrollreveal.js');
$this->API->addJSFragment( "\n".'$GK_TMPL_URL = "' . $this->API->URLtemplate() . '";'."\n" );
$this->API->addJSFragment( "\n".'$GK_URL = "' . $this->API->URLbase() . '";'."\n" );

if($this->API->get("css_prefixer", '0')) {
   $this->API->addJS($this->API->URLtemplate() . '/js/prefixfree.js');
}

if($this->API->get('css_compression', '0') == 1 || $this->API->get('css_cache', '0') == 1) {
   $this->cache->registerCache();
}

if($this->API->get('js_compression', '0') == 1 ) {
   $this->cache->registerJSCompression();
}

?>

<!--[if IE 9]>
<link rel="stylesheet" href="<?php echo $this->API->URLtemplate(); ?>/css/ie/ie9.css" type="text/css" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" href="<?php echo $this->API->URLtemplate(); ?>/css/ie/ie8.css" type="text/css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" href="<?php echo $this->API->URLtemplate(); ?>/css/ie/ie7.css" type="text/css" />
<![endif]-->

<!--[if lte IE 9]>
<script type="text/javascript" src="<?php echo $this->API->URLtemplate() . '/js/ie.js'; ?>"></script>
<![endif]-->

<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="<?php echo $this->API->URLtemplate() . '/js/respond.js'; ?>"></script>
<script type="text/javascript" src="<?php echo $this->API->URLtemplate() . '/js/selectivizr.js'; ?>"></script>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script type="text/javascript">(function($) {$(document).ready(function() {
$('.gkIsWrapper-gk_photo figure').each(function(){
$(this).append('<div class="pixel"></divc>');
});
});})(jQuery)</script>

>> all caches are cleared

Nothing appears. I just pm you the website link (it is a website under developpement)

Regard.

Hi

Ok. I've checked and everything is working great. Just one thing. In css class for .pixel in override.css change z-index value from -1 to 0.

Hello,

excellent, thank you so much for this great solution.
It is clean and very useful.

Have a nice day.
Regard.

Hi

No problem. Glad I could help

Hi,

sorry to re-open this thread, but do you think it is possible to do the same with the K2 images in a simple article ?

Because the picture are big, we need to use a jpg at 30% compression. So it is important to have a trick to mask the bad quality of the picture.

Regard.

Hi

I can try. Please tell me the url to the page You want to add the overlay background to.

Yes of course.
Here for example : http://www.spoonconcept.com/world-in-action/war/les-etat-unis-en-politique-internationale-imbecilite-ou-cretinisme (big image at top of article)

Regard.

Hi

Try with this code in /layout/blocks/head.php

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
$('.single-page .header').each(function(){
$(this).append('<div class="pixel"></div>');
});
});})(jQuery)</script>


YES !

Excellent it is working very well.
Thank you very much for your help.

Regard.

Hi

No problem. Glad I could help