Ссылка С Картинкой

International Russian
1

Добрый день… задача сделать ссылку картинкой и текстом(возможно поверх картинки), чтобы вид был такой: текст ссылки, а под ним картинка с этой же ссылкой. пока получается либо просто ссылка, а под ней еще одна ссылка картинкой, что не очень красиво с точки зрения кода., либо просто картинка ссылкой, но текст не вставляется. пока дошел вот до такого кода:

echo CHtml::link(CHtml::image(Yii::app()->baseUrl.’./images/catalog/section/’.$image.’.jpg’, ‘’.$title.’’), array(‘catalog/section’, ‘id’ => $child->id));

т.е в ссылку вместо текста вставил картинку, а как сделать и текст и картинку в одной ссылке?

2

Это чисто css-задача.

Самый простой вариант:

<a href="/catalog" style=“display: block; width: 200px; height: 200px; backgroung-image: url(’…’);”>текст ссылки</a>

3

суть в том что в каталоге для каждого подраздела и категории используется своя картинка и средствами css переменные не передать

4

В каком смысле не передать?

Я ж выкатил рабочий пример.

В href подставить <?= ссылку::на(товар) ?>, в background - <?= $изображение->товара ?>

Остальное в классы выкинуть.

Ну, соответственно, есть еще куча всяких решений с относительным позиционированием элементов и прочими margin-padding.

Скажем, такая структура:

<a class="catalog-item">

<div class="image"><img></div>

<div class="description">описание</div>

</a>

Дальше классами расставить все по местам.

5

у меня к примеру 10 категорий и в зависимости от id категории присваивается картинка, разве в css я могу указать background-image: $image ? немного просто недопонял вашего предложения(если не трудно подробнее о решении)…и вобще средствами yii возможно это решить?? вот у меня картинка определяется так $image = CHtml::encode($child->id); название ссылки $title = CHtml::encode($child->title); в итоге имею echo CHtml::link(CHtml::image(Yii::app()->baseUrl.’./images/catalog/section/’.$image.’.jpg’, ‘’.$title.’’), array(‘catalog/section’, ‘id’ => $child->id)); возможно как то в ссылку обьединить и (CHtml::image(Yii::app()->baseUrl.’./images/catalog/section/’.$image.’.jpg’, ‘’.$title.’’) и CHtml::encode($child->title); или это просто не возможно?

6

Шаг 1. Забудьте про все CHtml::whatever().

Шаг 2. Создайте необходимую html-разметку для представления списка товаров

Например:


<a class="catalog-item">

    <div class="image"><img src="/img/i1.jpg"></div>

    <div class="description">описание 1</div>

</a>

<a class="catalog-item">

    <div class="image"><img src="/img/i2.jpg"></div>

    <div class="description">описание 1</div>

</a>

<a class="catalog-item">

    <div class="image"><img src="/img/i3.jpg"></div>

    <div class="description">описание 1</div>

</a>

Вообще говоря, это задача верстальщика, но предположим его нет на проекте.

Шаг 3. Внесите повторяющиеся элементы в цикл, заменив изменяющиеся элементы на соответствующие переменные

Например:


<?php foreach ($items as $item): ?>

<a class="catalog-item">

    <div class="image"><img src="$item->image->thumbnail"></div>

    <div class="description"><?= $item->title ?></div>

</a>

<?php endforeach; ?>

Шаг 4. При желании замените html-теги на CHtml-хелперы (не очень понятно, нафига, но пусть)

Профит.

7 

<a href="/catalog" class="catalog-link" style="backgroung-image: url('<?= $item->image->file ?>');">

PS. для удобства все длинные элементы типа пути к изображению можно вынести в геттер модели:


public function getThumbnail()

{

    return '/path/to/image' . $this->file;

}