Перейти к содержимому


Фотография
- - - - -

list of images related products


Лучший Ответ Kess , 17 July 2014 - 18:16

Small update.

 

I looked at your website and saw that the original size of your category images are around 2500px wide so it takes a lot of time to load that page. Here is the updated code to replace the previous line. It will use cached thumbnails using "Subcategories" image width and height from application configuration (like 150x100px, for example). So, replace that previous line of code with these lines:

$opts = $category->getParams('site');
$image = $this->app->jbimage->get('category_teaser_image', $opts);
$category_links[] = '<a href="'.$this->app->route->category($category).'"><img src="'.$image['src'].'" alt="'.$category->name.'" title="'.$category->name.'" /></a>';

Should be a lot better for your website. If the images are still large, check that you have some width or height set in the application params.

Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 4

#1 Steven Vandermeulen

Steven Vandermeulen

Отправлено 16 July 2014 - 10:26

I have the following category structure in my website:

 

- Products

        - carrots

                 - washing

                 - drying

        - potatoes

                 - washing

                 - drying

 

My items are machines. Some machines can be used for washing different products other machines can only be used to wash potatoes ect...

 

Now I would like to have an inline list of images on the item detail page to show what products this machine is used for.

 

On the edit element page I have an option to select the related products.

 

edit element.JPG  

 

And it displays the following list on the item detail page:

 

itemdetailpage.JPG

 

now I would like the words to be replaced by images. Does anyone know how I could do this?

 

 

 


  • 0

#2 Kess

Kess

Отправлено 17 July 2014 - 06:46

I see that you tried to use simple "select" for this. I think it's hard way to do this. Since your products that you need to display as images are actually your categories and already have images, it's easier to use them instead. There are two elements that can be used for that (with some modifications): "Categories" and "Related categories". I've tried to do it using the second one and everything works fine.

 

1. Add this element and enable multiselect. In my example I named this element "Products":

 

kvp_200x0.png

 

2. Select categories that you need to display:

 

tvz_200x0.png

 

3. That's how it looks in the item full view:

 

rvo_200x0.png

 

4. Now we need to replace that with categories teaser images. Open this file:

media/zoo/elements/relatedcategories/relatedcategories.php

Find this line:

$category_links[] = '<a href="'.$this->app->route->category($category).'">'.$category->name.'</a>';

and replace it with this one:

$category_links[] = '<a href="'.$this->app->route->category($category).'"><img src="'.$category->params->get('content.category_image').'" alt="'.$category->name.'" title="'.$category->name.'" /></a>';

Some CSS styling might be needed depending on your template. Here is the result:

 

ng3_200x0.png


Сообщение отредактировал Kess: 17 July 2014 - 06:47

  • 0

#3 Steven Vandermeulen

Steven Vandermeulen

Отправлено 17 July 2014 - 08:46

thanks for the great help!


  • 0

#4 Kess

Kess

Отправлено 17 July 2014 - 18:16   Лучший Ответ

Small update.

 

I looked at your website and saw that the original size of your category images are around 2500px wide so it takes a lot of time to load that page. Here is the updated code to replace the previous line. It will use cached thumbnails using "Subcategories" image width and height from application configuration (like 150x100px, for example). So, replace that previous line of code with these lines:

$opts = $category->getParams('site');
$image = $this->app->jbimage->get('category_teaser_image', $opts);
$category_links[] = '<a href="'.$this->app->route->category($category).'"><img src="'.$image['src'].'" alt="'.$category->name.'" title="'.$category->name.'" /></a>';

Should be a lot better for your website. If the images are still large, check that you have some width or height set in the application params.


  • 0

#5 Steven Vandermeulen

Steven Vandermeulen

Отправлено 18 July 2014 - 08:15

Thanks for the update, it works like a charm. The support here is really great!


  • 0




Click to return to top of page in style!