Image avec date dynamique superposée

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251872

-- 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

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
7 years 5 months ago #251893

Bonjour,

Si vous voulez simplement superposer la date, alors le plus simple est d'éditer le fichier "show_block_img" via le menu Affichage>Vues et de rajouter votre texte dans un div ( il sera dans la variable $this->element->event_date ).
Et avec un peu de CSS vous pouvez bouger le div de votre texte par dessus l'image.

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251911

Bonjour Nicolas,

Merci pour ta réponse en ce jour dominical !

Merci,
David

Last edit: 7 years 5 months ago by david_filip@hotmail.com.

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251915

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

Last edit: 7 years 5 months ago by david_filip@hotmail.com.

Please Log in or Create an account to join the conversation.

  • Posts: 2595
  • Thank you received: 62
  • Hikashop Business
7 years 5 months ago #251917

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

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251922

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

Please Log in or Create an account to join the conversation.

  • Posts: 2595
  • Thank you received: 62
  • Hikashop Business
7 years 5 months ago #251924

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

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251927

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!

Please Log in or Create an account to join the conversation.

  • Posts: 2595
  • Thank you received: 62
  • Hikashop Business
7 years 5 months ago #251928

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()

et tu adaptes a ton gre
tu peux meme montrer la date que sur certaine listes
$view_date = '';
if($montre_date == 1){
$view_date = '_date';
}
$this->setLayout('show_block_img' . $view_date);
echo $this->loadTemplate()

Last edit: 7 years 5 months ago by erickb.

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251929

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"'.

Please Log in or Create an account to join the conversation.

  • Posts: 2595
  • Thank you received: 62
  • Hikashop Business
7 years 5 months ago #251931

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();

ou bien sur traiter directement l'image dedans directement

Last edit: 7 years 5 months ago by erickb.

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251932

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>';

que je devrais adapter avec à peu près ceci :
<?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>

La balise d'origine est de type image et je pense que je devrais passer par un div pour mettre l'image en background et ainsi placer le texte des dates par-dessus. Cela fonctionne bien que je le fais en solo. Ici, je crains de perturber le code car il y a le fait que quand on passe avec la souris, il y a un panneau grisé qui apparaît montrant alors le nom et le cart bouton. J'ai mis des points d'interrogation dans la balise div au niveau de la classe car je ne sais pas si je peux tout simplement récupérer la classe de IMG d'HK ou pas...

Je suis preneur de tout conseil.
Merci anyway!

Please Log in or Create an account to join the conversation.

  • Posts: 2595
  • Thank you received: 62
  • Hikashop Business
7 years 5 months ago #251938

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>
CSS
.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;   
	   }

Last edit: 7 years 5 months ago by erickb.

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251939

ç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.

Last edit: 7 years 5 months ago by david_filip@hotmail.com.

Please Log in or Create an account to join the conversation.

  • Posts: 2595
  • Thank you received: 62
  • Hikashop Business
7 years 5 months ago #251940

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

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251941

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

12
Nov
2016
Week-End

Avec formatage des tailles textes, couleurs, etc.

Je vais faire un explode sur la champs personnalisé event_date (bizarrerie au passage, la date est stockée sous forme : 12112016000000 en utilisant le calendrier avancé. Dommage qu'on ne puisse utilisant les heures avec ce calendrier :( )
Pour le mot Week-End, c'est un autre champ texte que je récupérerai également.

Avec ta méthode, l'affichage peut-être directement centrée en hauteur et en largeur ou alors faut-il placer des références x, y ?

Merci pour ton soutien.
David

Last edit: 7 years 5 months ago by david_filip@hotmail.com.

Please Log in or Create an account to join the conversation.

  • Posts: 2595
  • Thank you received: 62
  • Hikashop Business
7 years 5 months ago #251942

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

The following user(s) said Thank You: david_filip@hotmail.com

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251945

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!

Please Log in or Create an account to join the conversation.

  • Posts: 23
  • Thank you received: 0
7 years 5 months ago #251995

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 -- **/

Please Log in or Create an account to join the conversation.

  • Posts: 2595
  • Thank you received: 62
  • Hikashop Business
7 years 5 months ago #251998

fait un

var_dump($this->element);
ça te donnera ce que tu as dedans

mais un coup tu utilise $this->element et un coup $this->row

as tu essayé $this->row->event_star_date ?

Last edit: 7 years 5 months ago by erickb.
The following user(s) said Thank You: david_filip@hotmail.com

Please Log in or Create an account to join the conversation.

Time to create page: 0.071 seconds
Powered by Kunena Forum