■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。

画像をクリックしてページ遷移する方法は?

partita > 画像をクリックしてページ遷移する方法は? @ 2012/6/9 1:07
最近baserCMSを始めました。

ブログトップページやカテゴリーリンクをクリックしたときの記事一覧画面について質問です。

個別記事の本文内に画像が配置されているとき、上記の一覧画面でも画像が表示されます。
この画像をクリックすると別ウィンドウ(?)で同じ画像が表示されます。
現在私が作成中のサイトでは、記事内の画像は画像プロパティでwidthを120に設定して強制的に縮小させ、クリックしたときに原寸拡大表示(width=600程度の画像)させるようにしています。

これを、
「一覧画面で画像をクリックすると記事にページ遷移する」
「個別記事のページで画像をクリックすると原寸拡大表示させる」
ようにしたいのですが、このようなことは可能でしょうか。

可能な場合、どのようにすればよろしいでしょうか。

よろしくお願いします。

■ BaserCMSのバージョン:2.0.0
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用: ON
■ 設置フォルダ: サブフォルダ →www.xxx.com/basercms/
■ 利用しているデータベース: SQLite3
■ PHPスキル(自己評価): E
goichi > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/9 21:46
こんにちは(^^

引用:
これを、
「一覧画面で画像をクリックすると記事にページ遷移する」
「個別記事のページで画像をクリックすると原寸拡大表示させる」
ようにしたいのですが、このようなことは可能でしょうか。


つまり、一覧ページでは画像クリックで記事ページに飛ぶけれども、飛んだ先の記事ページで画像をクリックすると、通常通り拡大画像が表示されるという事ですよね。

一覧ページも記事ページも、データ(管理画面で打ち込まれたブログ記事の内容)としては同じものを引っ張ってきているので、一覧ページでの表示の際に細工をしないと難しそうですね。

こうなってくると、技術や知識もさることながら、アイディア勝負といった感じがするので、他の方がもっと良いアイディアを出してくれるかも知れませんが、そもそも一覧ページで画像が拡大表示されるのは、aタグのhrefプロパティで画像のURLを指定し、relプロパティでポップアップウィンドウ(colorbox)を使う為の指定がしてあるからですよね。もし、画像をクリックして記事ページに飛んで欲しいということであれば、このrelプロパティを持っているリンクタグのhrefプロパティを、記事のURLに書き換えればOKですよね。

書き換えるファイルは一覧表示用のレイアウトファイルになります。本来であれば「/app/webroot/themed/demo/view/blog/default/index.php」をいじりますが、デモテーマを利用されている場合、インストール直後はこの場所に入っていないと思います。以下の手順を踏めば、自動的に上記場所にコピーされ編集できるようになりますので、順番に実施してみてください。

1.管理画面にログインする。
2.画面右上のメニューの「プラグイン管理」をクリック。
3.プラグインの一覧表から「blog」(一番上かな?)を探し、一覧表の左側にある操作アイコンの「管理」をクリック。
4.ブログの一覧が出てくるので、処理を施したいブログを選び、先程と同様、操作アイコンの「管理」をクリック。
5.画面の一番上の方に色々とメニューがあるので、「ブログ管理メニュー」の中から「ブログ基本設定」をクリック。
6.今度は画面の一番下に「オプション」というのがあるので、クリックする。すると、項目がズラっと出てくる。
7.出てきた項目の中の下の方に「コンテンツテンプレート名」という部分がある。「default」になっていると思うので、その横の「編集する」をクリック。(設定を保存して編集画面へ飛んでもいいか?と聞かれるので、OKする。)
8.自動的にレイアウトファイルが生成され、編集できるようになるので、以下の通り編集を加える。

出てきたレイアウト編集画面に、PHPファイルの中身が表示されていると思います。(で、念のためこの内容を全部、メモ帳か何かにコピーして、あとで不具合が起きたら復旧できるようにしておてください。)

で、編集画面を見て、この中から
<?php $blog->postContent($post,true,true) ?>

という部分を探して下さい。(50行目付近かな)

そこを以下のように書き換えます。
	<?php 
	
	//あなたのサイトのURL(最後のスラッシュまで必要!)
	$yourSite = 'http://www.xxx.com/basercms/';
	
	//記事内容を取得
	$blogPostData = $blog->getPostContent($post,true,true);
	//aタグを検索対象とする。
	preg_match('/<a("[^"]*"|\'[^\']*\'|[^\'">])*>/',$blogPostData,$aTags);
	//ブログの名前取得
	$blogName = $post['BlogContent']['name'];
	//ブログの記事id取得
	$blogPostId = $post['BlogPost']['id'];
	//colorboxの対象になっている画像リンクを置き換える。
	foreach($aTags as $aTag){
		if(strpos($aTag, 'rel="colorbox"')){
			//置き換え実施。
			$blogPostData = preg_replace($aTag,'a href="'.$yourSite.$blogName.'/archives/'.$blogPostId.'"',$blogPostData);
		}
	}
	//表示を行う。
	echo $blogPostData;
		
	?>


あなたのサイトのURLを記述する場所がありますので、書いておいて下さい。今回、スマートURLを利用しているという事ですが、もし何かの事情でOFFにする場合は、このURLの箇所の最後に「index.php/」というスラッシュまで付けたindex.phpという文字を足して下さい。

書き換えが終わったら、更新ボタンを押して下さい。これで作業は終わりです。いかがでしょうか?
goichi > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/9 21:49
追記です。。。
一応、ウチのローカルで動いたので、このファイルの編集後の全文を載せておきます。
<?php
/* SVN FILE: $Id$ */
/**
 * [PUBLISH] ブログトップ
 * 
 * PHP versions 5
 *
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright 2008 - 2012, baserCMS Users Community <http://sites.google.com/site/baserusers/>
 *
 * @copyright		Copyright 2008 - 2012, baserCMS Users Community
 * @link			http://basercms.net baserCMS Project
 * @package			baser.plugins.blog.views
 * @since			baserCMS v 0.1.0
 * @version			$Revision$
 * @modifiedby		$LastChangedBy$
 * @lastmodified	$Date$
 * @license			http://basercms.net/license/index.html
 */
$bcBaser->css(array('/blog/css/style','colorbox/colorbox'), array('inline' => true));
$bcBaser->js('jquery.colorbox-min', false);
$bcBaser->setDescription($blog->getDescription());
?>
<script type="text/javascript">
$(function(){
	if($("a[rel='colorbox']").colorbox) $("a[rel='colorbox']").colorbox({transition:"fade"});
});
</script>
<!-- title -->
<h2 class="contents-head">
	<?php $blog->title() ?>
</h2>

<!-- description -->
<?php if($blog->descriptionExists()): ?>
<p class="blog-description">
	<?php $blog->description() ?>
</p>
<?php endif ?>

<!-- list -->
<?php if(!empty($posts)): ?>
	<?php foreach($posts as $post): ?>
<div class="post">
	<h4 class="contents-head">
		<?php $blog->postTitle($post) ?>
	</h4>
	<?php 
	
	//あなたのサイトのURL(最後のスラッシュまで必要!)
	$yourSite = 'http://localhost/basercms2.0/';
	
	//記事内容を取得
	$blogPostData = $blog->getPostContent($post,true,true);
	//aタグを検索対象とする。
	preg_match('/<a("[^"]*"|\'[^\']*\'|[^\'">])*>/',$blogPostData,$aTags);
	//ブログの名前取得
	$blogName = $post['BlogContent']['name'];
	//ブログの記事id取得
	$blogPostId = $post['BlogPost']['id'];
	//colorboxの対象になっている画像リンクを置き換える。
	foreach($aTags as $aTag){
		if(strpos($aTag, 'rel="colorbox"')){
			//置き換え実施。
			$blogPostData = preg_replace($aTag,'a href="'.$yourSite.$blogName.'/archives/'.$blogPostId.'"',$blogPostData);
		}
	}
	//表示を行う。
	echo $blogPostData;
		
	?>
	<div class="meta"><span>
		<?php $blog->category($post) ?>
		&nbsp;
		<?php $blog->postDate($post) ?>
		&nbsp;
		<?php $blog->author($post) ?>
	</span></div>
	<?php $bcBaser->element('blog_tag', array('post' => $post)) ?>
</div>
	<?php endforeach; ?>
<?php else: ?>
<p class="no-data">記事がありません。</p>
<?php endif; ?>

<!-- pagination -->
<?php $bcBaser->pagination('simple'); ?>


参考にしてください(^^
partita > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 0:58
引用:

早速のご回答ありがとうございます。

実は、うまくいきませんでした。

<h4>のテキストのリンクは正しかったのですが、画像の参照しているリンクのIDが2つずれていました。
ずれが発生している原因はわかりません。

そこで


//置き換え実施。
--$blogPostId;
--$blogPostId;
$blogPostData = preg_replace($aTag,'a href="'.$yourSite.$blogName.'/archives/'.$blogPostId.'"',$blogPostData);


というように事前に$blogPostIdの数値を2つ減らして、うまくいきました。

ところが

他のブログで確認したところ、リンクIDが16もずれています。
(当サイト、複数のブログを作成しています)
2つ目のブログの「管理画面>記事一覧」で確認してみると、一つ目の記事Noは1なのですが、その記事の編集画面のURL末尾は「/17」なんです。

この末尾数字がどのような法則で作られているかわかりません。

どうしたらよろしいでしょうか?
goichi > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 11:10
どうもです(^^
まずは修正させてください(すみません・・・)
とりあえず、リンクが複数あると先の記述では対応できませんでした。すみません。「preg_match_all」を使わなきゃいけなかったんですね。ウチのローカルでは画像リンクだけしか作らなかったので、気が付きませんでした。。。

書き換えの箇所を
	<?php 
	
	//あなたのサイトのURL(最後のスラッシュまで必要!)
	$yourSite = 'http://localhost/basercms2.0/';
	
	//記事内容を取得
	$blogPostData = $blog->getPostContent($post,true,true);
	//aタグを検索対象とする。
	preg_match_all('/<a ("[^"]*"|\'[^\']*\'|[^\'">])*>/',$blogPostData,$aTags);
	//ブログの名前取得
	$blogName = $post['BlogContent']['name'];
	//ブログの記事id取得
	$blogPostId = $post['BlogPost']['id'];
	//colorboxの対象になっている画像リンクを置き換える。
	foreach($aTags as $aTag){
		for($i=0;$i<count($aTag);$i++){
			if(strpos($aTag[$i], 'rel="colorbox"')){
				//置き換え実施。
				$blogPostData = preg_replace($aTag[$i],'a href="'.$yourSite.$blogName.'/archives/'.$blogPostId.'"',$blogPostData);
			}
		}
	}
	//表示を行う。
	echo $blogPostData;
		
	?>

のようにしてみてください。これで、とりあえず複数のリンクがあっても対応できるのではないかと思います。
ただ、idがずれるというのとは別の問題かもしれません。

2つ目のブログの「管理画面>記事一覧」で確認してみると、一つ目の記事Noは1なのですが、その記事の編集画面のURL末尾は「/17」なんです。
この末尾数字がどのような法則で作られているかわかりません。

記事NOはブログごとに振り分ける番号ですが、idはブログの別に関わらず、トータルで振られる番号です。いま、2つ目のブログの記事NOが1番で、url末尾のidが17というのは、おそらく「2つめのブログの記事としては1番目、全体では17番目の記事」という事になると思います。

処理中で使っている
$post['BlogPost']['id']

の中には記事idが入るはずですが、何かしらの事情で、上手に動かなかったのかもしれません。私のローカル環境は、同じく「2.0.0」で試していますが、複数ブログの時でも、きちんとidが入っています。

何はともあれ、上記の処理を修正してみてください。もしかしたら、そのうちもっと詳しい方が出てきてくださるかも知れません。。。m(__)m
partita > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 13:50
お世話になります。
2回目のご回答コードでもうまくいかなかったので、じーっとコードを見て思いつきました。

//ブログの記事id取得
$blogPostId = $post['BlogPost']['id'];


のところ、

//ブログの記事no取得
$blogPostNo = $post['BlogPost']['no'];


とすると成功!

idというパラメータがあるならnoもあるだろう、と書き換えてみたら結果オーライ。
今回はあくまで「ひとつの」ブログ内での連番を取得するべきたっだ、ということでしょうか。

とにもかくにも、正規表現やpreg_match等、いろいろ勉強するきっかけができたのでよかったです。
goichi > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 16:41
おめでとうございます!
何とかなってよかったです!(^^
partita > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 20:01
ありがとうございました。
ログイン
ユーザー名:
パスワード:


  新規登録 / パスワード紛失

検索

facebook
フォーラムで悩みが解決した場合など、よかったら「いいね!」をポチっとクリックしてください!質問の回答者や開発者の励みになります

フォーラムガイド


関連リンク

オンライン状況
11 人のユーザが現在オンラインです。 (10 人のユーザが フォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 11