[SOLVED]Category image problems

[Studio1one]

Anyone who can help me with the solution of handling the subcategory /category images work?

 

I upload the image on the category top, and its connected to the subcategory image/page.

 

Can I have two diffrent images, or can I somehow make it looks good? because now it looks like crap.

 

(See image)

Edited May 20, 2012 by corecosmetic (see edit history)

[Carolina Custom Designs]

Just a suggestion but you could increase the size of your sub-category images which, IMO, would make it look better.

 

Marty Shue

[Studio1one]

Just a suggestion but you could increase the size of your sub-category images which, IMO, would make it look better.

 

Marty Shue

 

Hi Marty, yes I was thinking of that to. But if I then just want to have let say:

 

Category image: 600 x 268 pxl and then the Sub image can be 190x85 then it will look good, but then it is another problem.

Where do I change in the code that I only want to have 3 Sub´s in a row (there are not space for more)

And if I have 4 or more Sub´s I need to change that so next row comes below the first one.

And if I change the size of the sub (thumb) image the products image will change to.

 

So how will I do to have it work?

[Carolina Custom Designs]

You can easily do all this by editing your CSS. Just edit the width (or add a width) of your sub-category list-item (li) according to the width of your image. This will evenly distribute your columns.

 

Marty Shue

[Studio1one]

You can easily do all this by editing your CSS. Just edit the width (or add a width) of your sub-category list-item (li) according to the width of your image. This will evenly distribute your columns.

 

Marty Shue

 

In wich css file?

[Carolina Custom Designs]

Since you are using a customized theme it is hard to tell which CSS file it would be. If you can send me a link to the store I should be able to tell.

 

Marty Shue

[Studio1one]

Since you are using a customized theme it is hard to tell which CSS file it would be. If you can send me a link to the store I should be able to tell.

 

Marty Shue

 

www.hairofbeauty.com

[Carolina Custom Designs]

Appears to be category.css.

 

Marty Shue

[Studio1one]

Appears to be category.css.

 

Marty Shue

 

So if I change the size in this file, how do I code to only have 3 categorys in one row?

 

/* category.tpl */

body#category #subcategories, div.cat_desc {

border-bottom: 1px solid #C9BAA4;

margin-bottom: 30px;

padding-bottom: 30px;

}

body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }

body#category #subcategories li { height: 150px; margin-right: 3px; width: 108px; }

body#category #subcategories li a { display:block; }

body#category #subcategories li a:hover { color:#C48F44; }

body#category div#subcategories .inline_list a img { display: inline }

#category img#categoryImage { margin-top: 1em }

[helldog2004]

try this:

#category img#categoryImage { margin-top: 1em;
height: your height;
width: your width }

Edited May 17, 2012 by helldog2004 (see edit history)

[Studio1one]

try this:

#category img#categoryImage { margin-top: 1em;
height: your height;
width: your width }

 

You mean I add the last code into the original?? or?

 

Like this?:

/* category.tpl */

body#category #subcategories, div.cat_desc {

border-bottom: 1px solid #C9BAA4;

margin-bottom: 30px;

padding-bottom: 30px;

}

body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }

body#category #subcategories li { height: 150px; margin-right: 3px; width: 108px; }

body#category #subcategories li a { display:block; }

body#category #subcategories li a:hover { color:#C48F44; }

body#category div#subcategories .inline_list a img { display: inline }

#category img#categoryImage { margin-top: 1em ;

height: your height;

width: your width }

[helldog2004]

yes indeed, try it out and tell me if things changed.

Always make a back-up for if things get worse!

cheers helldog!

[Studio1one]

yes indeed, try it out and tell me if things changed.

Always make a back-up for if things get worse!

cheers helldog!

 

No no it was wrong, it just changed the Categorys image, thats not what I wanted.

 

The category image are linked to the subcategory (thumb) but to have it looks good I need to change it somewhere. thats the problem. See image above.

[helldog2004]

You mean I add the last code into the original?? or?

 

Like this?:

/* category.tpl */

body#category #subcategories, div.cat_desc {

border-bottom: 1px solid #C9BAA4;

margin-bottom: 30px;

padding-bottom: 30px;

}

body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }

body#category #subcategories li { height: 150px; margin-right: 3px; width: 108px; }

body#category #subcategories li a { display:block; }

body#category #subcategories li a:hover { color:#C48F44; }

body#category div#subcategories .inline_list a img { display: inline }

#category img#categoryImage { margin-top: 1em ;

height: your height;

width: your width }

 

The red line is the line to change for subcategorie pictures, the blue lines are the lines to change you would like.

Tell me if it worked out.

Cheers helldog!

[Studio1one]

The red line is the line to change for subcategorie pictures, the blue lines are the lines to change you would like.

Tell me if it worked out.

Cheers helldog!

 

Strange!! Nothing happens.

 

http://www.hairofbeauty.com/se/3-makeup-verktyg the thumb with the red are connected to:

http://www.hairofbeauty.com/se/9-makeup-borst-set

[helldog2004]

Go to your controllers/CategoryController.php file on line 133 - here you must add your new picture type:

 

self::$smarty->assign(array(
	 'products' => (isset($this->cat_products) AND $this->cat_products) ? $this->cat_products : NULL,
	 'id_category' => (int)($this->category->id),
	 'id_category_parent' => (int)($this->category->id_parent),
	 'return_category_name' => Tools::safeOutput($this->category->name),
	 'path' => Tools::getPath((int)($this->category->id)),
	 'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
	 'categorySize' => Image::getSize('category'),
	 'mediumSize' => Image::getSize('medium'),
	 'thumbSceneSize' => Image::getSize('thumb_scene'),
	 'homeSize' => Image::getSize('home'),
	 'SubCat' => Image::getSize('SubCat')
));

 

then change the code mentioned above

 

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 3px; width: 108px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
#category img#categoryImage { margin-top: 1em }

Edited May 17, 2012 by helldog2004 (see edit history)

[Studio1one]

Okay try this out:

 

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 3px; width: 108px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
#subcategories img#subcategoryImage {height: your height;
width: your width}
#category img#categoryImage { margin-top: 1em }

 

okey, the sizes change in the tables but the image is still 80x80 pxl becuase of the settings inside BO.

Dont I need to change there to?

 

It seems more obvious for me ???

But how to do that 100% I dont really know how to do...

[helldog2004]

Yes try to do the settings in BO first and see the changes, if not correct try the change I posted earlier with the controllers/categorycontroller.php

[Studio1one]

Yes try to do the settings in BO first and see the changes, if not correct try the change I posted earlier with the controllers/categorycontroller.php

But do I need to make a new size ID?

Because the medium is 80px x 80px and its connected to all thumb size.

 

I really dont know have that part work.

[helldog2004]

You can always first try to change the size in the BO

If it does not work properly we can always take a deeper look into your website, and see if we can add some code in the css style.

 

cheers helldog

[Studio1one]

You can always first try to change the size in the BO

If it does not work properly we can always take a deeper look into your website, and see if we can add some code in the css style.

 

cheers helldog

 

So how do I change the thumbs for the category? (subcategory only) in BO??

[helldog2004]

Go to your controllers/CategoryController.php file on line 133 - here you must add your new picture type:

 

self::$smarty->assign(array(
	 'products' => (isset($this->cat_products) AND $this->cat_products) ? $this->cat_products : NULL,
	 'id_category' => (int)($this->category->id),
	 'id_category_parent' => (int)($this->category->id_parent),
	 'return_category_name' => Tools::safeOutput($this->category->name),
	 'path' => Tools::getPath((int)($this->category->id)),
	 'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
	 'categorySize' => Image::getSize('category'),
	 'mediumSize' => Image::getSize('medium'),
	 'thumbSceneSize' => Image::getSize('thumb_scene'),
	 'homeSize' => Image::getSize('home'),
	 'SubCat' => Image::getSize('SubCat')
));

 

then change the code mentioned above

 

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 3px; width: 108px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
#category img#categoryImage { margin-top: 1em }

 

I posted you this earlier have you tried this?

This should work !

 

Cheers helldog

[Studio1one]

I posted you this earlier have you tried this?

This should work !

 

Cheers helldog

 

But if I make a new size that only will be for the thumb at the Subcategory (that is Medium today) If I make a new size in BO and call it medium2 and will be 190px X 85px how will I put in that in the code?

Because if I today change the Medium size I will also change the thumbs in the product section :-(

[helldog2004]

That is excactly why I gave you the first code:

 

self::$smarty->assign(array(

'products' => (isset($this->cat_products) AND $this->cat_products) ? $this->cat_products : NULL,

'id_category' => (int)($this->category->id),

'id_category_parent' => (int)($this->category->id_parent),

'return_category_name' => Tools::safeOutput($this->category->name),

'path' => Tools::getPath((int)($this->category->id)),

'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),

'categorySize' => Image::getSize('category'),

'mediumSize' => Image::getSize('medium'),

'thumbSceneSize' => Image::getSize('thumb_scene'),

'homeSize' => Image::getSize('home'),

'SubCat' => Image::getSize('SubCat')

));

 

 

The blue line has been added, now only the subcat will change!

[Studio1one]

That is excactly why I gave you the first code:

 

self::$smarty->assign(array(

'products' => (isset($this->cat_products) AND $this->cat_products) ? $this->cat_products : NULL,

'id_category' => (int)($this->category->id),

'id_category_parent' => (int)($this->category->id_parent),

'return_category_name' => Tools::safeOutput($this->category->name),

'path' => Tools::getPath((int)($this->category->id)),

'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),

'categorySize' => Image::getSize('category'),

'mediumSize' => Image::getSize('medium'),

'thumbSceneSize' => Image::getSize('thumb_scene'),

'homeSize' => Image::getSize('home'),

'SubCat' => Image::getSize('SubCat')

));

 

 

The blue line has been added, now only the subcat will change!

 

OKey I changed that in the CategoryController.php (SubCat) and also made a new size inside BO called the same.

 

And then I need to change in category.tpl ? right?

[helldog2004]

No not the .tpl

You need to go to themes/your theme/css/product.css

Change the

body#category #subcategories li { height: 150px; margin-right: 3px; width: 108px; }

 

to your liking..

Cheers helldog!

[Studio1one]

No not the .tpl

You need to go to themes/your theme/css/product.css

Change the

body#category #subcategories li { height: 150px; margin-right: 3px; width: 108px; }

 

to your liking..

Cheers helldog!

 

Must be wrong because that file is inside the category.css and I have allready change the sizes inside there, and nothing happens.

[Studio1one]

Must be wrong because that file is inside the category.css and I have allready change the sizes inside there, and nothing happens.

 

Are you not sure I need to change anything in this file? (category.tpl) to change the link to SubCat size instead of Medium size??

 

<!-- Subcategories -->

<div id="subcategories">

<h3>{l s='Subcategories'}</h3>

<ul class="inline_list">

{foreach from=$subcategories item=subcategory}

<li>

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">

{if $subcategory.id_image}

<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{else}

<img src="{$img_cat_dir}default-medium.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{/if}

</a><br />

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>

</li>

{/foreach}

</ul>

<br class="clear"/>

</div>

{/if}

 

{if $products}

{include file="$tpl_dir./product-compare.tpl"}

{include file="$tpl_dir./product-sort.tpl"}

{include file="$tpl_dir./product-list.tpl" products=$products}

{include file="$tpl_dir./product-compare.tpl"}

{include file="$tpl_dir./pagination.tpl"}

{elseif !isset($subcategories)}

<p class="warning">{l s='There are no products in this category.'}</p>

{/if}

{elseif $category->id}

<p class="warning">{l s='This category is currently unavailable.'}</p>

{/if}

{/if}

[Studio1one]

Must be wrong because that file is inside the category.css and I have allready change the sizes inside there, and nothing happens.

 

NOW its 99% working, the only problem is now its not fitting the size correctly. :-(

 

see the red stripe: http://www.hairofbeauty.com/se/3-makeup-verktyg

[Studio1one]

NOW its 99% working, the only problem is now its not fitting the size correctly. :-(

 

see the red stripe: http://www.hairofbea...-makeup-verktyg

 

The things that is not right are the proportions to be a good looking thumb from the big image inside category...

How I now will do that ? ;-)

[helldog2004]

Okay what should be the size of the red image?

And what size is the white image around it?

 

cheers helldog!

[Studio1one]

Okay what should be the size of the red image?

And what size is the white image around it?

 

cheers helldog!

 

The big one http://www.hairofbeauty.com/se/9-makeup-borst-set is 600 x 268

And want it scaled down to 190 x 85 so I still have right proportions ;-)

[helldog2004]

Go to your category.css and change it to this code:

 

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 10px; width: 190px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
#subcategories img#subcategoryImage {height: 85px;
width: 190px}
#category img#categoryImage { margin-top: 1em;
height: 190;
width: 85 }

 

let me know if this makes things correct for you..

Cheers helldog!

[Studio1one]

Go to your category.css and change it to this code:

 

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 10px; width: 190px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
#subcategories img#subcategoryImage {height: 85px;
width: 190px}
#category img#categoryImage { margin-top: 1em;
height: 190;
width: 85 }

 

let me know if this makes things correct for you..

Cheers helldog!

 

Nothing happen :-(

[helldog2004]

Can you send me this css file please?

 

I might fix it for you..

[helldog2004]

I changed your code:

http://www.hairofbeauty.com/se/9-makeup-borst-set

 

Is this how you would like to have it?

Cheers Helldog!

[Studio1one]

I changed your code:

http://www.hairofbea...akeup-borst-set

 

Is this how you would like to have it?

Cheers Helldog!

 

No no..... you missunderstod me, THAT image there is gonna be 600px X 268px as it was,

THAT image is linked by code to the thumb you see : http://www.hairofbeauty.com/se/3-makeup-verktyg

 

The only problem that was is that the thumbs proportions did not match, so it looks streched and wrong.

 

so what I most of all wanted is to have it shrimped right. :-(

[helldog2004]

haha chill made, I set things back to normal.

I made a change for the subcategories and hope I understood you now haha

Here is the link of changes I made:

http://www.hairofbeauty.com/se/3-makeup-verktyg

[Studio1one]

haha chill made, I set things back to normal.

I made a change for the subcategories and hope I understood you now haha

Here is the link of changes I made:

http://www.hairofbea...-makeup-verktyg

hahahah NONO..... the size was right there but the image was not. If you make changes back again, you see its not filled out the space, its white above and below the red stripe.

 

The proportions is/was wrong.

[helldog2004]

Okay I set it back to normal and finnaly understood what you ment haha.

 

Try this code in your Product.css

 

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 10px; width: 190px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
body#category #subcategories li {
height: 190px;
margin-right: 3px;
width: 85px;
}
#category img#categoryImage { margin-top: 1em }

[Studio1one]

Okay I set it back to normal and finnaly understood what you ment haha.

 

Try this code in your Product.css

 

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 10px; width: 190px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
body#category #subcategories li {
height: 190px;
margin-right: 3px;
width: 85px;
}
#category img#categoryImage { margin-top: 1em }

 

In Product.css there is not that kind of code, its inside category.css and its not right, it looks like this now http://www.hairofbeauty.com/se/3-makeup-verktyg

[helldog2004]

I am sorry I ment category.css

 

This is your code now:

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 10px; width: 190px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
#subcategories img#subcategoryImage {height: 85px;
width: 190px}
#category img#categoryImage { margin-top: 1em }

 

Change it to:

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 10px; width: 190px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
body#category #subcategories li {
height: 190px;
margin-right: 3px;
width: 85px;
}
#category img#categoryImage { margin-top: 1em }

 

tell me what happened!

[Studio1one]

I am sorry I ment category.css

 

This is your code now:

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 10px; width: 190px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
#subcategories img#subcategoryImage {height: 85px;
width: 190px}
#category img#categoryImage { margin-top: 1em }

 

Change it to:

/* category.tpl */
body#category #subcategories, div.cat_desc {
border-bottom: 1px solid #C9BAA4;
margin-bottom: 30px;
padding-bottom: 30px;
}
body#category #subcategories h3{ color: #6D4D1C; font-weight: bold; }
body#category #subcategories li { height: 150px; margin-right: 10px; width: 190px; }
body#category #subcategories li a { display:block; }
body#category #subcategories li a:hover { color:#C48F44; }
body#category div#subcategories .inline_list a img { display: inline }
body#category #subcategories li {
height: 190px;
margin-right: 3px;
width: 85px;
}
#category img#categoryImage { margin-top: 1em }

 

tell me what happened!

 

still the same: http://www.hairofbeauty.com/se/3-makeup-verktyg

[Studio1one]

still the same: http://www.hairofbea...-makeup-verktyg

 

Do I need to regenerate the thumbs?

In that case I got this error: Cannot write "No picture" image to (categories) images folder. Please check the folder's writing permissions.

[Studio1one]

Do I need to regenerate the thumbs?

In that case I got this error: Cannot write "No picture" image to (categories) images folder. Please check the folder's writing permissions.

 

Its strange that the new thumb does not show up, see what shows now in the code:

 

<img width="190" height="85" alt="" src="/c/9-medium/makeup-borst-set.jpg"> It seems like it can´t connect to the 9-subcat image. wonder how I can make that happen.

[helldog2004]

Did you empty your cache and gave the folders all write permissions in FTP?

 

Cheers Helldog!