Linkanpassung auf Bilder, php?

ivo
Autor
Offline
Neues Mitglied

Mehr

16 Juni 2015 17:48 #41081 von ivo

Linkanpassung auf Bilder, php? wurde erstellt von ivo

Hallo Zusammen

Webseite nur lokal
mit Joomla 3.3.3
Template ist SmartOn
Das Problem besteht bei einem Modul von Rocketthemes "Rocksprocket Mosaic", dass in diesem Template eingebaut ist.
Bei der Demosite kann man unter (Portfolio / Portfolio 4 Columns) schauen wie es auch bei mir lokal aussieht.

Ich hätte gerne das der Link zu den Bildern das ganze Bild betrifft, nicht nur die Mitte mit dem weissen div, das Icon sollte auch nicht angezeigt werden.
Das muss ich in wohl in der item.php ändern, nur leider verstehe ich fast nichts von php...

Kann mir Jemand helfen?
Für Jemanden der php kennt ist das sicher kei Problem.

Gruss Ivo

Hier ein Teil vom Code:

Code:

 * @var $item RokSprocket_Item
 */
?>
<li<?php echo strlen($item->custom_tags) ? ' class="'.$item->custom_tags.'"' : ''; ?> data-mosaic-item>
	<div class="sprocket-mosaic-item" data-mosaic-content>
		<?php echo $item->custom_ordering_items; ?>
		<div class="sprocket-padding">
			<?php if ($item->getPrimaryImage()) :?>
			<div class="sprocket-mosaic-image-container <?php if ($item->getPrimaryLink()) : ?>image-overlay zoom-image<?php endif; ?>">
				
				<img src="<?php echo $item->getPrimaryImage()->getSource(); ?>" alt="" class="sprocket-mosaic-image" />
				<?php if ($item->getPrimaryLink()) : ?>
					<div class="overlay-zoom">
						<a href="<?php echo $item->getPrimaryLink()->getUrl(); ?>">
							<i class="fa-overlay fa fa-link"></i>
						</a>
					</div>
				<?php endif; ?>
			</div>
			<?php endif; ?>
			
			
			
			<div class="portfolio-info-simple">
				<?php if ($item->getTitle()): ?>
				<h3 class="portfolio-title">
					<?php if ($item->getPrimaryLink()): ?><a href="<?php echo $item->getPrimaryLink()->getUrl(); ?>"><?php endif; ?><?php echo $item->getTitle();?><?php if ($item->getPrimaryLink()): ?></a><?php endif; ?>
				</h3>
				<?php endif; ?>
				
				<?php if (count($item->custom_tags_list)) : ?>
				<p class="mb0">
				<?php
					foreach($item->custom_tags_list as $key => $name){
				 		echo ' <span class="sprocket-tags-'.$key.'">'.$name.'</span> &nbsp;';
					}
				?>
				</p>
			<?php endif; ?>

Hier noch die CSS

Code:

.overlay-zoom {
	background:none;
	background: rgb(255, 255, 255) transparent;
	height:80px; 
	width:80px; 
	top:0; 
	position: absolute; 
	filter: alpha(opacity=0); 
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}	
		
.overlay-zoom a{
	height: 80px; 
	width: 80px; 
	margin: -40px 0 0 -40px;  
	position: absolute; 
	text-align: center; 
	top: 50%;  
	left: 50%; 
	line-height:80px; 
	cursor:pointer;
}

.overlay-zoom a .fa-overlay{
	margin:0:
	font-size:40px; 
	padding:-50px;
	width:80px;
	height:80px;
	line-height:80px;
	background:#fff;
}

.image-overlay:hover .overlay-zoom{
	filter: alpha(opacity=100); 
	opacity: 1;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.zoom-image img{ 
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

Tribal6
Offline

Mehr

16 Juni 2015 21:36 #41088 von Tribal6

Tribal6 antwortete auf Linkanpassung auf Bilder, php?

Heu Ivo

Eine Möglichkeit wäre, du packst den Link um das div rum, in dem er ursprünglich enthalten ist, also aus

Code:

<?php if ($item->getPrimaryLink()) : ?>
					<div class="overlay-zoom">
						<a href="<?php echo $item->getPrimaryLink()->getUrl(); ?>">
							<i class="fa-overlay fa fa-link"></i>
						</a>
					</div>
	<?php endif; ?>

machst du

Code:

<?php if ($item->getPrimaryLink()) : ?>
                  <a href="<?php echo $item->getPrimaryLink()->getUrl(); ?>">
					<div class="overlay-zoom">
						<i class="fa-overlay fa fa-link"></i>
					</div>
                  </a>
				<?php endif; ?>

So 'verschwindet' aber das kleine Quadrat mit dem Linksybol, vermutlich durch die geänderte Selektoren-Hirarchie. Falls du das wieder anzeigen möchtest, müsstest du die entsprechende CSS-Anweisung für

Code:

<i class="fa-overlay fa fa-link"></i>

ändern. Gefällt mir ohne aber einen Tick besser. Muttu selber

gucken.

Tue das, was du kannst, mit dem was du hast, da wo du bist.

Folgende Benutzer bedankten sich: ivo

ivo
Autor
Offline
Neues Mitglied

Mehr

17 Juni 2015 02:24 #41096 von ivo

ivo antwortete auf Linkanpassung auf Bilder, php?

Jaa Danke, viel besser jetzt!
So einfach ist es, wenn man weiss wie:) Und ja, das Linksymbol störte mich schon die ganze Zeit. Hab es entfernt.

Leider hab ich noch so ein Linksymbol das ich weg bekommen möchte, und auch der Link sollte das ganze Bild betreffen.

Ich hab also in einem Beitrag ein Bild, das ich per Klick in einer Lightbox öffnen kann. Ich nutzte dazu das "WS Shortcode System" indem ich 2 Bilder wählte, eines das im Beitrag sichtbar ist, und eben eines, dass sich nach Klick in der Lightbox öffnet.
Bei dem Bild im Beitrag besteht nun das Problem. Wieder das kleine Quadrat mit dem Linksymbol. Hab diese php datei gefunden.

Kannst du mir da auch weiterhelfen?

Gruss Ivo

ws_shortcode.php

Code:

// Image Overlay
case $tags['image-overlay']:
  if (
  	isset ($opti['image']) && isset($opti['link']) ) { $ersatz = '<div class="image-overlay zoom-image image-padding-thumb"><img src="'.$opti['image'].'" class="img-thumbnail" alt="'.$opti['alt'].'"><div class="overlay-zoom"><a '.$opti['data'].' href="'.$opti['link'].'" data-rokbox><i class="fa-overlay fa fa-search-plus"></i></a></div></div>';  
  } 
break;

Tribal6
Offline

Mehr

17 Juni 2015 07:36 #41097 von Tribal6

Tribal6 antwortete auf Linkanpassung auf Bilder, php?

Da kann ich nur raten, das erste Beispiel war ja online, würde hier aber mal dasselbe versuchen: den Link um das ganze (Mini-)Bild legen, resp. um das Bild enthaltene Div. Also aus

Code:

// Image Overlay
case $tags['image-overlay']:
  if (
  	isset ($opti['image']) && isset($opti['link']) ) { $ersatz = '<div class="image-overlay zoom-image image-padding-thumb"><img src="'.$opti['image'].'" class="img-thumbnail" alt="'.$opti['alt'].'"><div class="overlay-zoom"><a '.$opti['data'].' href="'.$opti['link'].'" data-rokbox><i class="fa-overlay fa fa-search-plus"></i></a></div></div>';  
  } 
break;

dasda machen

Code:

// Image Overlay
case $tags['image-overlay']:
  if (
  	isset ($opti['image']) && isset($opti['link']) ) { $ersatz = '<a '.$opti['data'].' href="'.$opti['link'].'" data-rokbox><i class="fa-overlay fa fa-search-plus"><div class="image-overlay zoom-image image-padding-thumb"><img src="'.$opti['image'].'" class="img-thumbnail" alt="'.$opti['alt'].'"><div class="overlay-zoom"></i></div></div></a>';  
  } 
break;

Je nachdem wie es dann aussieht kannst du ja ev. noch das i-Tag entfernen.

Du machst diese Dinge aber schon mit Overrides, oder? Denn sonst sind die Änderungen eventuell mit dem nächsten Update der Erweiterungen wieder futsch :woohoo:

Tue das, was du kannst, mit dem was du hast, da wo du bist.

ivo
Autor
Offline
Neues Mitglied

Mehr

17 Juni 2015 13:56 #41103 von ivo

ivo antwortete auf Linkanpassung auf Bilder, php?

Danke, ich habs Gestern, oder eher heute früh am Morgen, noch hin bekommen in dem ich aus dem hier:

Code:

<div class="overlay-zoom">
						<a href="<?php echo $item->getPrimaryLink()->getUrl(); ?>"><i class="fa-overlay fa fa-link"></i>
					</div>
                    </a>

das gemacht haben

Code:

<a href="<?php echo $item->getPrimaryLink()->getUrl(); ?>">
                    	<div class="overlay-zoom">
						</div>
                    </a>

sieht ein wenig anders aus als bei dir, es funktioniert, hoffe es ist auch korrekt?

hmm wegen den Overrides...
bis jetzt hab ich die Änderungen direkt in den Template Dateien geändert.
Ich kenn das nur so halb mit den Joomla Core Dateien, dass diese dann in den html Ordner des Templates kommen.
Die Dateien die ich hier aber ändere sind ja Dateien des Templates selber, wie läuft des?
Muss ich einfach die Dateien plus Ordnerstruktur kopieren, und die dann auch in den html Ordner des Templates einfügen? :unsure:

Tribal6
Offline

Mehr

17 Juni 2015 14:19 #41104 von Tribal6

Tribal6 antwortete auf Linkanpassung auf Bilder, php?

Muss ich einfach die Dateien plus Ordnerstruktur kopieren, und die dann auch in den html Ordner des Templates einfügen?

Ja, so ungefähr, nur das die Ordnerstruktur leicht abweicht:
Z.B. von
/components/com_content/views/article/tmpl/default.php
nach
/templates/deinTemplate/html/com_content/default.php

oder bei Modulen von
/modules/mod_article_latest/tmpl/default.php
nach
/templates/deinTemplate/html/mod_article_latest/default.php
so als Bleistift.

Einfach alle Dateien in den jeweiligen 'tmpl'-Ordnern sind 'overridebar'.

Es gibt Tut's und Anleitungen dazu wie Sand am Meer, sogar Videos, guck mal da:
www.google.ch/search?q=joomla+template+override+anleitung

...Tschack

Tue das, was du kannst, mit dem was du hast, da wo du bist.

ivo
Autor
Offline
Neues Mitglied

Mehr

18 Juni 2015 00:57 #41112 von ivo

ivo antwortete auf Linkanpassung auf Bilder, php?

Ok Danke, über google hab ich natürlich schon gesucht, aber nichts brauchbares zu meinem Fall gefunden. Die Dateien kommen ja nicht aus dem components Ordner, auch nicht vom Ordner modules. Die einte Datei war in den Plugins, die Andere wie schon erwähnt im Template Ordner. Deine Tip ist aber Hilfreich, falls das mal der Fall sein wird.

Moderatoren: pascale, adiheutschi.ch, Tribal6, RePao, Dragonlord, Chris Hoefliger

Joomla! Forum Schweiz wird Teil der D-A-CH Community

forum.joomla.de

Linkanpassung auf Bilder, php?