image article mélangé au contenu

david44 · août 2011

Bonjour,

Je viens demander un coup de main pour un template que je modifie depuis quelques jours.
Sur la page d'accueil, j'affiche l'ensemble des articles.

Chaques articles possèdent dans son chapo une seul image sans les balise <img> (aussi, je comprend pas comment elles s'affichent sans leurs balises)

Et elle servent "d'annonce" en quelques sorte. J'ai oublié de préciser que c'était pour un portfolio. Là je pense que vous comprenez mieux.
Puis avec un rollover, j'affiche (dans l'ordre) :

- Titre du post (Qui fait office de lien vers l'article)
- Contenu tronqué à 160 caractères
- Date de publication
- Catégories

En faite, lorsque j'affiche le contenu du post (tronqué), forcément, il m'affiche les images qui sont aussi dans ce contenu. C'est ça le problème. Je souhaite dire par une fonction ou autres tricks si vous en avez :

"Tu m'affiches seulement le texte du contenu et les images présentes dans le contenu tu ne me les affiches pas"

Je vous joins le code source de la HOME.php :

<?php include(dirname(__FILE__).'/header.php'); # On insere le header ?>
<?php include(PLX_ROOT.'/themes/imbalance/php/resume.php'); # On ajoute la fonction truncate ?>
              <ul class="mcol">
              <?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
              <?php $chapo_content = $plxShow->plxMotor->plxRecord_arts->f('chapo'); ?>
              	<li class="article" id="post-<?php echo $plxShow->artId(); ?>">
                
			<?php
			if ( ($chapo_content != '') ) { ?>
                        <div class="preview"><a href="<?php $plxShow->artUrl($type='relatif'); ?>"><img class="attachment-background" src="<?php $plxShow->template(); ?>/php/timthumb.php?src=<?php echo $chapo_content; ?>&w=240&&zc=1" title="<?php $plxShow->artTitle(''); ?>" width="240px" height="160px" /></a></div>
                    
                    <?php } else {?>
                        <div class="preview"><a href="<?php $plxShow->artUrl($type='relatif'); ?>"><img src="<?php $plxShow->template(); ?>/images/default-thumbnail.jpg" alt="<?php $plxShow->artTitle(''); ?>" width="240px" height="160px" /></a></div>
                    <?php } ?>
                    
                    <div class="article-over">
                      <h2> 
					  
					  
					  <?php $plxShow->artTitle('link'); ?></h2><p><?php $text = $plxShow->plxMotor->plxRecord_arts->f('content');
                      echo truncate($text, 160, '...', true, false) ?></p>

                      <div class="postmetadata">
                          Réalisé en <?php $plxShow->artDate('#month #num_year(4)'); ?></br>
                          <?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?>
                      </div>
                    </div>
                </li>
            <?php endwhile; ?>
            </ul>

			<div class="wp-pagenavi"
            <?php # On affiche la pagination ?>
           	<?php $plxShow->pagination(); ?>
           	</div>

<?php include(dirname(__FILE__).'/footer.php'); # On insere le footer ?>

Je remercie d'avance ceux qui auront l'amabilité de me répondre, car ça fait 5heures facile que je cherche une solution.

J'ai même essayé un jeu avec CSS : .imgcontent{display:none} .imgcontent img{display:block !important}.

Pas moyen.
Merci.

david44 · août 2011

UP un peu rapide, mais toujours présent.

Bloody · août 2011

Un lien vers une bonne utilisation : http://www.the-art-of-web.com/php/truncate/

Je crois que l’adaptation du thème Septikal par Damien utilises cette fonction truncate : http://www.customtaro.fr/blog/article737/theme-pluxml-skeptical-wordpress

Sinon, autre solution utiliser le plugin "ornament" et ne pas mettre d'image dans le chapô. C'est ce que fais sur mon portfolio, mais sans truncate.

david44 · août 2011

Merci de ta réponse mais en fait, tronquer le text est déja effectué. En faite, je cherche à :

- Ne pas afficher les img dans $artContent sur la home.php (Attention, je souhaite tout de même garder l'image dans le chapo)

De ce fait, seul les images du contenu ne seront visibles sur la page article.
Merci

Stéphane · août 2011

une remarque sur la home:

si le chapo n'est pas vide, le contenu de l'article n'est pas affiché (affichage du lien lire la suite)
donc ça ne devrait pas poser de problèmes puisque que seul le chapo est affiché (comme tu ne veux voir que les images du chapo)

si le chapo est vide, on affiche que le contenu. donc forcément pas d'images à afficher venant du chapo parce que y a rien à afficher.

j'ai du mal à voir le cas de figure où ça coince dans ce que tu veux faire

david44 · août 2011

Merci pour votre réponse,

Effectivement si le chapo n'est pas vide, il va récupérer ce qui est dedans, puis l'afficher. Connaissant mal php, tout ce que je peux vous dire c'est que lorsque je met une deuxième image, ou ne serais-ce qu'une lettre, il ne m'affiche plus rien. (toujours sur la home).

Ce qui se produit, c'est qu'il va aussi récupérer l'ensemble du contenu de l'article puis va l'afficher l'or du rollover. C'est grâce à ça que je peux afficher les 160 premiers caractères de l'article.

Mais, comme dans l'article je met 2-3 photos, et bien il me les affiche avec. Et tout y est, même l'effet d'opacité du rollover.

Alors ce que je me disais. J'ai déja afficher dans ma sidebar, le contenu de l'article en jouant avec le CSS de manière à faire un "display:none" sur mes images. Du coup la sidebar me sert de présentation (placé sur la droite) et je souhaite afficher seulement les images sur la gauche en retirant le texte.

Etant donné que, c'est deux problèmes aux quels je suis confronté, je pense qu'il faudrait une fonction qui place le texte d'un coté et les images d'un autre. Pour pouvoir gérer facilement les deux qui construisent l'article.

Si j'arrive à séparer les deux avec cette fonction, ça résoudra mon problème d'image dans le rollover MAIS aussi la séparation de l'article (me permettant de cibler seulement les images).

Voilà, tout un roman pour vous l'expliquer

Merci pour vos réponses.

david44 · août 2011

Up

Bloody · août 2011

les images d'un autre : plugin pluxornament

Pour ton truncate essaie ça :

<?php

function truncate($string, $max_length = 30, $replacement = '', $trunc_at_space = false)
{
	$max_length -= strlen($replacement);
	$string_length = strlen($string);
	
	if($string_length <= $max_length)
		return $string;
	
	if( $trunc_at_space && ($space_position = strrpos($string, ' ', $max_length-$string_length)) )
		$max_length = $space_position;
	
	return substr_replace($string, $replacement, $max_length);
}

?>

Exemple d'usage

<?php
 
$str = "Suspendisse at magna non lectus lacinia gravida.";
$str = truncate($str, 40, '...', true);
echo $str; // Suspendisse at magna non lectus...
 
?>

Source : http://code.seebz.net/p/truncate/

david44 · août 2011

Merci je vais essayer

Bloody · août 2011

Donnes nous ton retour.

david44 · août 2011

Non, j'arrive pas à le faire fonctionner. D'ailleurs j'ai pas tilité lorsque j'ai récupéré le code, mais le truncate fonctionne. Puisqu'il limite le contenu de l'article à 160 caratère dans le roll over. Ca c'est bon.

Ce qu'il me faut c'est une astuce pour seulement autoriser le texte de l'article dans le roll over, exception du chapo puisque c'est lui qui joue le rôle d'image de présentation. Je vous joins une image.

Remarquez le carnet blanc au fond. C'est l'image de mon chapo.

L'affiche en noir avec des filets jaunes est la première image du contenu qui est suivis par l'image de la voiture surcharger (me demandez pas ou je trouve les images qui me servent à avoir un rendu le temps de developper xD ).

Et enfin, le texte de subsitution en bas est le texte de mon contenu. Ce que je souhaite c'est qu'il ne m'affiche que l'image du chapo et le texte du contenu.

Merci de votre aide

Bloody · août 2011

Dis David tu n'as pas plus grand comme image.

Utilises un service de screenshot en ligne comme Aviary Screen Capture. Ça sera plus lisible : http://www.aviary.com/capture (il existe une extension Chrome et Firefox)

Je commence à comprendre ce que tu veux exactement. Je pense qu'en CSS ça doit être jouable

david44 · août 2011

Voici la page avec l'article au complet.

Voici la home avec le roll over actif

Voici la home sans le rollover

Merci pour votre aide.

Bloody · août 2011

Beaucoup mieux.

C'est bien ce que j'avais compris.

le texte de l'article dans le roll over, exception du chapo puisque c'est lui qui joue le rôle d'image de présentation.

En fait l'inverse est plus simple.

Je ne sais pas si tu as lu ce que je t'ai mis plus.

Pour avoir une image séparée de ton contenu, tu utilises le plugin plxornament par ologram qui te permet d'indiquer une url dans un champ; dans ton cas l'image que tu as pour l'instant mis dans ton chapô :
http://forum.pluxml.org/viewtopic.php?id=2574

C'est ce que j'ai fait ici et là.

david44 · août 2011

Super je vais tenter d'intégrer ça et je vous tiens au courant.

EDIT : J'arrive pas à l'integrer.Il ne m'affiche pas d'erreur mais j'ai plus d'annonce, or j'ai bien mis une image sur le projet 4 dans ornament.
Php est vraiment trop abstrait pour ma logique.
Voilà le code :

<?php include(dirname(__FILE__).'/header.php'); # On insere le header ?>
<?php include(PLX_ROOT.'/themes/imbalance/php/resume.php'); # On ajoute la fonction truncate ?>
              <ul class="mcol">
              <?php while($plxShow->plxMotor->plxRecord_arts->loop()): # On boucle sur les articles ?>
              <?php $chapo_content = $plxShow->plxMotor->plxRecord_arts->f('chapo'); ?>
              	<li class="article" id="post-<?php echo $plxShow->artId(); ?>">
                

                        <div class="preview"><a href="<?php $plxShow->artUrl($type='relatif'); ?>">
<?php if ($plxShow->plxMotor->plxRecord_arts->f('ornament') != '') {
$thumbID = $plxShow->plxMotor->plxRecord_arts->f('ornament');} ?>
</div>

                    <div class="article-over">
                      <h2> 
					  
					  
					  <?php $plxShow->artTitle('link'); ?></h2><p><?php $text = $plxShow->plxMotor->plxRecord_arts->f('content');
                      echo truncate($text, 160, '...', true, false) ?></p>
					  
					<div class="postmetadata">
                          Réalisé en <?php $plxShow->artDate('#month #num_year(4)'); ?></br>
                          <?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?>
                    </div>
                    </div>
                </li>

            <?php endwhile; ?>
            </ul>
			

			<div class="wp-pagenavi"
            <?php # On affiche la pagination ?>
           	<?php $plxShow->pagination(); ?>
           	</div>

<?php include(dirname(__FILE__).'/footer.php'); # On insere le footer ?>

Petite info à part, peut être que tu ne la pas remarqué,

Il y a un décalage sur Club Aquariophile d'Eymoutier.

Je vous tiens au courant.

Bloody · août 2011

Merci david44.

Je n'ais pas ce décalage.

J'ai spécifié une width pour l'image dans ma classs css, ça devrait être bon maintenant.

Tu as quoi comme résolution d'écran ?

david44 · août 2011

1920x1080 - Pour ton site c'est ok

Par contre toujours ce problème d'intégration, si tu pouvais m'indiquer ou le placer et surtout correctement parce que j'ai eu des erreurs $end qui on été résolus mais ça m'affiche rien. Je sais plus quoi faire

Merci

Bloody · août 2011

Ok je vois ça.

Bloody · août 2011

Je suis reparti du thème Imbalance ( http://www.customtaro.fr/blog/article736/theme-pluxml-imbalance-wordpress ) qui présente un home identique à ce que tu veux (effet over du texte sur l'image avec opacité de l'image, truncate)

Après avoir installé le plugin plxornament, j'ai modifié le home.php du thème à la ligne 10
Remplaces :

<div class="preview"><a href="<?php $plxShow->artUrl($type='relatif'); ?>"><img class="attachment-background" src="<?php $plxShow->template(); ?>/php/timthumb.php?src=<?php echo $chapo_content; ?>&w=305&&zc=1" title="<?php $plxShow->artTitle(''); ?>" width="305px" /></a></div>

Par

<div class="preview"><a href="<?php $plxShow->artUrl($type='relatif'); ?>"><img class="attachment-background" src="<?php $plxShow->template(); ?>/php/timthumb.php?src=<?php echo $plxShow->plxMotor->plxRecord_arts->f('ornament'); ?>

Ensuite, vas chercher dans "médias" l'url de l'image que tu désires associer à ton article.

J'ai fait 2 fois le test en local, ça fonctionne impeccable.

Cerise sur le gâteau, comme l'image en home est générée avec timthumb.php, ton image mis dans le champ de pluxornament peut être de taille supérieure à l'image en home.

Dis moi si ça te convient ?

david44 · août 2011

Merci pour ces réponses désolé du retard. Bon en faite ça fonctionne mais ça bug à cause du css. Le problème est donc résolu, je règlerais le css plus tard. Merci encore.

Bloody · août 2011

Pas grave.

Content que tu es (presque) l'effet voulu.

Tu nous met le lien de ton portfolio définitif dès que c'est ok.

Et de rien.

image article mélangé au contenu

Réponses