Image avec date dynamique superposée

-- url of the page with the problem -- : conscience-appliquee.com (localhost)
-- HikaShop version -- : 2.6.4 Business
-- Joomla version -- : 3.6.2
-- PHP version -- : 5.6.10
-- Browser(s) name and version -- : safari 9.0.2 (11601.3.9)

Bonjour et merci à Nicolas et Mohamed pour le soutien efficace apporté !

Ma nouvelle question :

Je souhaiterais pouvoir afficher sur l'image principal de certains produits une date qui sera récupérée dans un champ personnalisé event_date.

Pouvez-vous me donner une direction pour réaliser cela ? Dois-je l'intégrer dans un plug-in et de quelles en seraient les grandes lignes ?

Merci pour vos éclairages,
Bien à vous,
David

Bonjour Nicolas,

Merci pour ta réponse en ce jour dominical !

Merci,
David

Bonjour,

J'ai bien réussi à superposer une date sur l'image produit via la vue show_block_img.
J'ai tenté de trouver la vue pour pouvoir faire la même chose sur les images affichées via les catégories.
J'ai un menu qui me liste les catégories (en div) affichant les images correspondantes. Je n'arrive pas à accéder à ces images via une vue.

Pouvez-vous me dire quelle est la vue concernée ?

Merci!
David

les vues des image en list de categorie c'est un truc du genre /templates/TPL/html/com_hikashop/product/listing_img_title.php selon les vues utilisées

Merci pour ta réponse Eric. Je l'ai bien mise à profit.

Par contre, pour personnaliser la vue d'un module de contenu Hikashop, selon la doc, je devrais avoir sous Hikashop->Display : [content module] mais je n'ai rien! J'ai uniquement : View, Custom fields et Filters sans plus.

Y a-t-il quelque chose à activer pour faire apparaître Content module dans le menu Display i

Merci,
David

dans un module de contenu hikashop tu as un onglet hikashop options avec une section Mise en page de l'élément et un menu deroulant Type de mise en page , tu sélectionne la vue
tu peux meme créer un fichier /templates/TPL/html/com_hikashop/product/listing_ce_que_tu_veux.php
et tu verras dans ce menu deroulant ce_que_tu_veux

Excellent ! Clair et efficace. Merci Eric.
Hikashop continue de m'étonner par l'intelligence de sa conception.

Je vais à présent m'atteler à afficher une date personnalisée sur les images. Le code a l'air un peu différent que ce que l'on retrouve dans la vue show_block_img. Je vais un peu creuser.

Encore merci!

dans ton template tu peux dupliquer show_block_img --> show_block_img_date
que tu appelles dans show_default

$this->setLayout('show_block_img_date');
echo $this->loadTemplate()

$view_date = '';
if($montre_date == 1){
$view_date = '_date';
}
$this->setLayout('show_block_img' . $view_date);
echo $this->loadTemplate()

J'ai une mise en page de type listing_img_pane. Je suppose que c'est dans ce code que je dois apporter des modifications pour ne pas perdre la mise en page.

Je ne vois pas trop comment faire avec ce que tu proposes sans perdre l'affichage en "pane"'.

ha oui tu as raison mon exemple est pour les vue détaillées du produit

mais tu peux aussi adapter dans ton listing

tu peux tres bien loader une vue d'image perso qui n'existe pas d'origine avec des if selon tes criteres

						$this->setLayout('listing_panelimg');
						echo $this->loadTemplate();

J'essaie de transformer directement dans le code la ligne :

echo '<div class="hikashop_product_listing_image" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"></div>';

<?php if (!$event_date) : ?>
		<div class="???">
		<?php // Si image correspondant à un événement ?>
		<?php else : ?>
<div class="???" style="background-image:url(<?php echo $URL???; ?>); border-color: #fffff?; ?>">
		<?php endif; ?>
			<div class="ic-date">

				<?php // Day ?>
				<div class="ic-day">
					<?php echo $EVENT_DAY; ?>
				</div>

				<?php // Month ?>
				<div class="ic-month">
					<?php echo $EVENT_MONTH; ?>
				</div>

				<?php // Year ?>
				<div class="ic-year">
					<?php echo $EVENT_YEAR; ?>
				</div>

				<?php // Time ?>
				<div class="ic-time">
					<?php echo $EVENT_TIME; ?>
				</div>

			</div>
		</div>

HTML

<figure class="lc-img-date">
	<img class="lc-img" src="image.jpg" />
	<div class="lc-date">15 janvier 2017</div>
	<figcaption class="lc-titre">Nom de l'image</figcaption>
</figure>

.lc-img-date{		   
		   display: inline-block;
		   width:50vw;
		   height:auto;
		   border:1px solid #111111;
	   }
	
	    .lc-img-date *{		   
		   display:inline-block;
		   width:100%;
		   text-align: center;
	   }
	   .lc-img{
		    width:100%;
		    height:auto;
		    display:block;
	   }
	   .lc-date{		   
		    height:50px;
		    line-height:50px;
	   }
	   
	   .lc-titre{
		    height:50px;
		    line-height:50px;   
	   }

ça a l'air de fonctionner avec les div sans pour autant perdre la mise en page.
Il me reste à positionner mes dates et cela devrait être bon...

Sorry, je n'avais pas vu ce que tu m'avais envoyé. Je le check de suite.

tu peux faire ta figure position relative et les elements en position absolute avec un z-index

Super intéressant ton code.
Il me faut juste séparer le texte date sous la forme suivante :

la figure est un container elle n'a pas de hauteur et comme ton image est en block tout le reste vient en dessous
pour repartir la date comme tu veux c'est facile chaque element en display:block;

ou alors si c'est complexe et que tu veux modifier les ordre a ta guise
regarde du cote de display:flex; j'utilise presque plus que ca

Merci pour tes conseils.
J'ai réalisé un premier design qui donne bien.
J'ai à ce stade travaillé avec plusieurs blocs div : l'un parent en relatif et l'autre enfant en absolu.
Je joue avec les deux propriétés dans le div enfant :
top: 50%;
transform: translateY(-10%);

Et ça a fait l'affaire.
Je vais exploré par la suite ton display:flex et voir ses possibilités;
Merci encore Eric!

Bonjour,

J'ai tenté de récupérer un champ personnalisé via $this->element->event_star_date (comme recommandé) et ce dans la vue listing_img_pane_df. Cette vue est sélectionnée comme conseillé par Eric dans le module et tout cela fonctionne très bien.

Mon problème :
- $this->element->event_star_date (ou tout autre champ personnalisé ne renvoie aucune valeur)
- $this->element->event_star_date (ou autre) appliqué dans listing_img_pane_df va-t-il récupérer la bonne valeur selon les images.

Pouvez-vous m'expliquer comment réaliser cette opération ?

Merci

Voici le code test non encore formaté :

if($img->success) {
				/**echo '<img class="hikashop_product_listing_image" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"/>';**/
				
		/** START DF1 -- 
		Superposition sur l'image de la date de l'événement en récupérant la date par un champs personnalisé -- 
		**/	
				echo 'la valeur date de début event est : '.$this->element->event_start_date.'<br />';
				echo 'la valeur date de début event est : '.$this->element->event_easy_readable_date.'<br />';
				echo '
				<div class="hikashop_product_listing_image" style="background-image:url('.$img->url.'); border-color:black;height:'.$this->image->main_thumbnail_y.'px; width:'.$this->image->main_thumbnail_x.'px; border: 0px solid black;">
				
					<div class="ic-date" style="background-color:orange;filter:alpha(opacity=70); opacity:0.8;">
				
								<?php // Day ?>
								<div class="ic-day">
									2 & 5'.$this->element->event_start_date.'
								</div>
				
								<?php // Month ?>
								<div class="ic-month">
									NOV
								</div>
				
								<?php // Year ?>
								<div class="ic-year">
									2016
								</div>
				
								<?php // Time ?>
								<div class="ic-time">
									9H-17H30
								</div>
				
					</div>
								
				</div>';
			
		/** EO DF1 -- **/

fait un

var_dump($this->element);