Daemon Designs Blog

If you want a still image to be displayed on your Webpage with a play button on it and then when that image is clicked it is replaced with a streaming video you can do it with the following code. I have added 2 examples 1 for Youtube and 1 for Vimeo.

Youtube

<div style="width:620px; height:377px;">
<script type="text/javascript" src="http://www.daemondesigns.co.uk/blog/wp-content/uploads/2013/04/jquery-1.4.2.min_.js"></script> </p>
<div id="ytapiplayer2" style="display:none;">
<object width="620" height="377"><param name="movie" value="http://www.youtube.com/v/_0JXWplBsis?fs=1&hl=en_US&rel=0&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/_0JXWplBsis?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="620" height="377"></embed></object></p>
</div>
<p><img src="http://www.daemondesigns.co.uk/blog/wp-content/uploads/2013/04/Contact-Us-Image.jpg" id="imageID" /><br />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#imageID').hide();
});
</script>
</div>

Vimeo

<div style="width:620px; height:377px;">
<script type="text/javascript" src="http://www.daemondesigns.co.uk/blog/wp-content/uploads/2013/04/jquery-1.4.2.min_.js"></script></p>
<div id="ytapiplayer22" style="display:none;">
<iframe src="http://player.vimeo.com/video/21106256?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" width="620" height="377" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
</div>
<p><img src="http://www.daemondesigns.co.uk/blog/wp-content/uploads/2013/04/iPad-Lifestyle-Play-Button.jpg" id="imageID2" alt=" " /><br />
<script type="text/javascript">
$('#imageID2').click(function() {
$('#ytapiplayer22').show();
$('#imageID2').hide();
});
</script>
</div>

If we look at the Vimeo example. The div id=”ytapiplayer22″(div with video in) is set to display=none to begin with, then the code gets the image id=”imageID2″(the still image) and says when that is clicked show the hidden div ytapiplayer22(which is the one the video is in) and hide the div id=”imageID2″(which is the still image). The video is set to autoplay by adding ;autoplay=1 onto the end of the code.

The Youtube example is exactly the same method except for the way the video is embedded in an object instead of an iframe.

In the WordPress standard theme it is not always relatively straight forward to create a different page header for each page. So if you want a default header for the Website and then on a few pages this to alter you can do this using PHP in your theme.

What you need to do in the backend of your site in Apperance > Editor, copy the code out of your header.php file and then paste this code into a new file called headerdefault.php. Once you have done that then replace the code in your header.php file with the following code:

<?php
if (is_page('contact')){
include(TEMPLATEPATH.'/headercontact.php');}
elseif (is_page('portfolio')){
include(TEMPLATEPATH.'/headerportfolio.php');}
elseif (is_page('about-me')){
include(TEMPLATEPATH.'/headerabout.php');}
else {
include(TEMPLATEPATH.'/headerdefault.php');}
?> 

This code basically says if the page title is contact then use the header headercontact.php, or if the title is portfolio then use the header headerportfolio.php, or if the title is about-me then use the header headerabout.php and if the page title is something different to those titles then use the default header headerdefault.php which you have just created. So now you need to create the headers; headercontact.php, headerportfolio.php and headerabout.php use the code from the headerdefault.php in each of these and change the code accordingly to be whatever you want for each of the pages.

This can also be done for the sidebars and footers, you just need to use the same proceedure as above. This was the easiest and fastest way I found to code this up, this are probably plugins that can do this for you now but if you do not want all the additional bulk installed onto your site then use this method.

There maybe a time when you may want to create a page on your Magento site which pulls in products from multiple categories you have setup. I have recently setup a page where I needed to display a heading saying Summer clothing and then text underneath it and then under that a few example of Summer clothing and then under that the same again for Spring and Winter all on the same page.

The way I got round this was to create 3 new categories; Summer, Spring and Winter and then in each of those categories add in 4 products. Once these categories were setup and an index was run on the Website I then created a static page with all of the relevant text and heading that I wanted on the page and where I wanted the products to appear I used the following code:

{{block type="catalog/product_list" category_id="281" template="catalog/product/list.phtml"}}

The code basically pulls in all products from the category with the ID 281. The Category ID is found when you click on your category it will show the ID at the top next to the name. The link to the block type and the template in the above code may differ for each installation of Magento as the file structure maybe different but this can easily be located using FTP. The above code is used 3 times on the page for the Summer products, Spring products and Winter products each with their own ID numbers.

Once the products have been pulled in you can then style the CSS to make them look as you wish.

Using this method helped me out enormously as it is dynamic and the prices and links will always be correct even when they are altered. Previously I was adding in the images, prices and links manually and finding it to take a long time to do and also hard to make sure it is all up-to-date.

If you find that this does not work for you then first make sure that you categories are enabled and your products that are in your categories are live and are in stock. Then run an index and clear your cache, then check that your IDs are correct and also check to make sure that the links to the product_list and list.phtml are correct.

You can also create your own phtml file and link to that. So if you want extra features added to your products such as a Javascript gallery effect to them, then you can duplicate the list.phtml file and name it something different and in that file add in the relevant javascript code and then upload this file and change the links to the file in your static page.

There are a number of ways to build Websites for different devices, you can have an app that renders a Website just for an iphone or an android device or maybe creating a desktop Website and a seperate mobile Website to work on all mobile devices.

The method I prefer to use is Responsive Design. Basically Responsive Web Design is building 1 Website which will resize and adapt to all different sized devices, so your site will look differently on a desktop machine to a tablet and a mobile phone. It works by using media queries, which allows you to specify how a page should be displayed when the screens max-width is a certain pixel size or when its min-width is a certain size.

Media Queries look like this:

@media only screen and (min-width: 768px) and (max-width: 959px) {

}

The above says if the screen width is between 768px and 959px then use the css that is specified between the {}. That example is a good size to use for tablet devices.

With media queries you have a few options of how you can code up and move items around your pages.

• The first option would be the easiest option, which is to give all images a percentage size instead of a pixel size, as this will automatically scale down when you view your Website on different devices, so if you had 2 images floated next to each other you could give each of them a 50% width and this will then alter automatically for you.
• The second option is to have a different sized image for each device and then when you are on a certain device show 1 image and hide all of the others. An example of this is:

  
  <html>
  <body>
  <div class="largeimage"><img src="imagelarge.jpg"></div>
  
  <div class="tabletimage"><img src="imagetablet.jpg"></div>
  
  <div class="mobileimage"><img src="imagemobile.jpg"></div>
  
  <div class="widemobileimage"><img src="imagewidemobile.jpg"></div>
  </body>
  </html>
  
  /*CSS below*/
  
  /*Default Layout: 980px*/
  
  .largeimage{display:block;}
  .tabletimage{display:none;}
  .mobileimage{display:none;}
  .widemobileimage{display:none;}
  
  /*Tablet Layout: 768px*/
  @media only screen and (min-width: 768px) and (max-width: 959px) {
  .largeimage{display:none;}
  .tabletimage{display:block;}
  .mobileimage{display:none;}
  .widemobileimage{display:none;}
  }
  
  /*Mobile Layout: 320px*/
  @media only screen and (max-width: 767px) {
  .largeimage{display:none;}
  .tabletimage{display:none;}
  .mobileimage{display:block;}
  .widemobileimage{display:none;}
  }
  
  /*Wide Mobile Layout: 480px*/
  @media only screen and (min-width: 480px) and (max-width: 767px) {
  .largeimage{display:none;}
  .tabletimage{display:none;}
  .mobileimage{display:none;}
  .widemobileimage{display:block;}
  }
  

  So as you can see you can specify which images you want to show or hide depending on what the screen size is. The good part about this is that you do not need to work out any percentage sizes for your images and you can make your page look as accurate as you wish for each device. The bad points about this method are that it can be time consuming to do this for each page and it also puts more of a load on your server as the site loads up all of the image on the page and once the style sheet is loaded it hides them accordingly, the user will not see all of your images be loaded but the size of your page and style sheet will increase so keep this in mind.

• The final way that you can use media queries is to have everything displayed on desktop mode and when you go down to smaller devices such as a mobile phone you can hide items by using display:none. This reduces the amount of functionality that a user will have when using your Website on a smaller device however some fucntions are not always neciserally needed, it also makes it easier for you sometimes to just hide something instead of completly changing the layout of your page to fit it in. If you want to hide an item for a smaller device but still want to give the user the option to have all of the functionality you can provide them a link to your full desktop site.

There is no specific sizes to use for which widths should be used for your media queries and this will be altering constantly as new sized devices are coming out all the time, but the above sizes are good ones to use.

Responsive Design is done by using CSS3 and certain browsers mainly older versions of Internet Explorer do not use CSS3. The way to get around this is to load in Javascript into your page, a popular libary using is Response JS. This Javascript finds out what browser you are using and then loads in the script if your browser requires it.

Developing template/ theme on a Content Management System or E-Commerce system such as WordPress or Magento from scratch is not always an easy option if it is your first time and it can be quite time consuming to complete. There are options you have if you do not wish to start building a responsive theme from scratch.

There are quite a few Responsive themes you can purchase for Magento, one of them is: http://www.magentocommerce.com/magento-connect/response-responsive-magento-theme-7523.html. There was a free Responsive Theme that I used myself on a Website called Respond and I have looked around and this theme seems to have been taken down now from the Website, I do however still have a copy of the theme if you wish to use it here: http://www.daemondesigns.co.uk/blog/wp-content/uploads/2013/04/Respond-Theme-master.zip. Both of these themes are designed for Magento COmmunity, I have used the free Respond theme on Magento Enterprise and it works for that version however there are some parts where code has been stripped out for some of the extra funtionality of Magento Enterprise, this is not a big issue tho as you can just download the basic MAgento Enterprise theme and copy and paste them missing code into your Respond theme.

There are options for WordPress the best free theme I have found is http://www.dessign.net/simple-photo-responsive-theme/. This is really easy to setup and modify.

Once you have you themes installed you can modify them as much as you like to look just like your design. The above themes work in all modern browsers and older versions of Internet Explorer by using Javascript.

You do not need any mobile devices really to test out how your Website looks in the smaller resolutions. The easiest way to test out your Website is to grab the courner of your browser Window and drag it inward to reduce the size and you will see your Website automatically reducing to the correct size.

Give it a go and have fun creating your first mobile Websites!

If you do not have access to the Core PHP files in Magento you may struggle to change the layout of the left hand navigation. However you can add addition static blocks to the left hand or right hand sides by doing the following:

Create a static block and add in the content you want displaying in the sidebar. Then in Catalog > Manage Categories select the subcategory you wish to assign the static block to and then click the Custom Design tab. In the Custom Design tab you should have the Page Layout set to how you want the page laying out so 2 columns with Left bar or right bar or 3 columns, then in the Custom Layout Update box add in the following code:

<reference name="left">
     <block type="cms/block" before="block-compare" name="menspagedescription">
        <action method="setBlockId"><block_id>menspagedescription</block_id></action>
     </block>
</reference>

This basically gets the ID of the static block you created menspagedescription and assigns it to the left hand column. It also adds it above the item in the left hand column called block-compare this block will obviously be different on your site as this is a plugin I have installed on the left hand side. You can find out what the block are called for your left hand side either by looking at the IDs in the backend of Magento or by using Firebug and it will show you the block class when hovered over the item.

This is the most simple method I have come across for positioning static content in the sidebars.

Magento does not use Jquery by default it uses prototype.js.

Prototype is not something that I enjoy coding with really and quite a few other people I have spoken to say the same, it is much easier in my oppinion to create image sliders and other functionality using JQuery and there seems to be much more open source code available for JQuery than Prototype.

If you add a JQuery gallery for example into a magento page you will see certain features like the top menu drop down list not work and other little things like that. This is because there are certain variable that Prototype use as well as JQuery. The way to get them to work together is to use no conflict at the start when you are calling your JQuery function.

So usually your JQuery function would look something like this:

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Now this needs altering to the following:

$.noConflict();
  jQuery(document).ready(function($) {
  $("p").click(function(){
    $(this).hide();
  });
});

You should now find that your code all works together.

There are some occasions developing a Website you need the HTML to be dynamically altered and you may not have any access to the core PHP files to create an if statement to do this.
One solution to this is to use Javascript as shown below.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$.noConflict();
  jQuery(document).ready(function($) {
  if ($('.currently').length > 0) {      $(".bigcategoryimages").append('<style>.bigcategoryimages{display:none;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:block;}</style>');
    }    
else
 {
 $(".bigcategoryimages").append('<style>.bigcategoryimages{display:block;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:none;}</style>');
    }    
  });
</script>
<div class="refinedheader"> Header to show</div>

<div class=" bigcategoryimages ">Header to hide </div>

The script example above was used on an ecommerce Website I developed and the idea of it was when a search was performed in the left hand side navigation it would hide one div on the page and display another.

I found that when something was clicked in the left hand side of the page the div class currently was being used (I found this out using Firebug) So the above code says when the class currently is being used then append the style display:block to the div class=” refinedheader” which will show that div and append the style display:none to the div class=” bigcategoryimages” which will hide that div. Then there is an else statement that says if the class currently is not being used then refinedheader is hidden and bigcategoryimages is shown.

There are other ways you can use this script, one way is to say if a certain page title is displayed then run the same script. The below example runs the script if the page name is called Homepage:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$.noConflict();
  jQuery(document).ready(function($) {
  if (document.title = "Homepage";) {      $(".bigcategoryimages").append('<style>.bigcategoryimages{display:none;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:block;}</style>');
    }    
else
 {
 $(".bigcategoryimages").append('<style>.bigcategoryimages{display:block;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:none;}</style>');
    }    
  });
</script>
<div class="refinedheader"> Header to show</div>

<div class=" bigcategoryimages ">Header to hide </div>

This can be a much easier option for people to use if they are not familiar to PHP or if they do not have access to the core files of a Website and it is possible to do many things to the page. A good example maybe with an ecommerce Website, if something is added to the shopping basket then change the styling or hide something on a page or show a checkout button.