Skip to content

Yokihito Oki / kanoya-univercity-prod

Go to a project
Toggle navigation
Toggle navigation pinning
58f2c7b1 by TaishiTokudome
Options

Merge branch 'interview_dev' into 'master' 

インタビューページのスタイル指定

See merge request !10
2 parents 52365c65 dc16b074
Inline Side-by-side
Showing 4 changed files with 645 additions and 0 deletions
components/com_jce/editor/libraries/classes/browser.php
......@@ -1238,6 +1238,63 @@ class WFFileBrowser extends JObject
throw new InvalidArgumentException(JText::_('WF_MANAGER_FILE_LIMIT_ERROR'));
}
}
/**
* 画像リサイズ処理
*/
$fieldid = (string) $app->input->get('fieldid', '', 'STRING');
// ファイルがイントロ画像としてアップロードされていることを確認
if ($fieldid === 'jform_images_image_intro') {
// tmpディレクトリに一時保存されているupload予定のファイルパスを取得
$tmp_file = $file['tmp_name'];
// 画像情報を取得
$image_info = getimagesize($tmp_file);
// 画像情報から画像の幅を取得
$width = (int) $image_info[0];
// リサイズ後の幅を定義
$new_width = 1600;
// 登録する画像の幅がリサイズ後の幅(1600px)より大きいことを確認(1600px以上でリサイズ処理)
// 記事詳細ページでの画像表示と、サムネイル画像としての画像表示両方に対応できるように1600でリサイズ
if ($width > $new_width) {
// 画像情報から画像の高さを取得
$height = (int) $image_info[1];
// 画像タイプを取得
$image_type = $image_info['mime'];
// アスペクト比(縦横比を取得)
$aspect_ratio = $height / $width;
// リサイズ後の高さを定義(アスペクト比を維持して定義)
$new_height = $new_width * $aspect_ratio;
switch ($image_type) {
// 画像タイプがPNGの場合の処理
case 'image/png':
// 元の画像から新しい画像を作る準備
$base_image = imagecreatefrompng($tmp_file);
// サイズを指定して新しい画像のキャンバスを作成
$new_image = imagecreatetruecolor($new_width, $new_height);
// 画像のコピーと伸縮
imagecopyresampled($new_image, $base_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
// コピーした画像を出力
imagepng($new_image, $tmp_file);
break;
// 画像タイプがJPEGの場合の処理
case 'image/jpeg':
// 元の画像から新しい画像を作る準備
$base_image = imagecreatefromjpeg($tmp_file);
// サイズを指定して新しい画像のキャンバスを作成
$new_image = imagecreatetruecolor($new_width, $new_height);
// 画像のコピーと伸縮
imagecopyresampled($new_image, $base_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
// コピーした画像を出力
imagejpeg($new_image, $tmp_file);
break;
default:
break;
}
}
}
// Check total file size limit
if (!empty($upload['total_size'])) {
......
templates/protostar/css/style_org.css
......@@ -3431,6 +3431,122 @@ body.itemid-132 table {
}
/* -------------------------------------------------------------------------
　OB・OGインタビューページに対するスタイル指定
------------------------------------------------------------------------- */
.interview .items-leading > div {
border-top: 2px solid #003894;
display: flex;
flex-direction: row-reverse;
align-items: center;
position: relative;
}
/* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */
.interview .items-leading > div > * {
display: none;
}
.interview .items-leading div .page-header {
display: block;
width: 100%;
padding: 0;
margin: 32px 0;
}
.interview .items-leading div .page-header h2 {
/* .blogに対して指定されているスタイルを取り消し */
border-top: none;
border-bottom: none;
margin: 0;
padding: 0;
font-size: 100%;
}
/* 記事情報(公開日など)にデフォルトでかかっているスタイルを取り消し */
.interview .items-leading div .article-info > * {
margin-bottom: 0;
}
.interview .items-leading div .article-info {
/* 記事情報が一つ以上表示された場合に横並びにする */
display: block;
/* 記事情報のpositionを右下に指定 */
position: absolute;
margin: 0;
bottom: 8px;
right: 0;
}
.interview .items-leading div .item-image {
display: flex;
/* flexによる圧縮をさせない */
flex-shrink: 0;
/* 配下のimage要素とa要素を縦方向にセンタリング */
align-items: center;
width: 140px;
height: 105px;
/* デフォルトでかかっているfloatプロパティの解除 */
float: none;
/* 配下の画像のはみ出した部分は非表示にし、トリミングする */
overflow: hidden;
margin: 12px 24px 12px 0;
}
.interview .items-leading div .item-image a {
width: 100%;
}
.interview .items-leading div .item-image img {
/* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */
width: 100%;
}
/* 記事装飾スタイル */
.interview-first {
padding: 12px;
background-color: #e9f1ff;
}
.interview-profile {
padding: 12px;
border: 1px solid #ccc;
}
.interview-profile::before {
display: block;
content: "【プロフィール】";
}
/* 記事装飾スタイルここまで */
/* レスポンシブ */
@media (max-width: 500px) {
.interview .items-leading > div {
/* 縦並びに変更 */
flex-direction: column-reverse;
}
.interview .items-leading div .page-header {
/* 記事情報が入るのでmargin-bottomは大きめにする */
margin: 16px 0 32px;
}
.interview .items-leading div .item-image {
width: 100%;
/*max-height = 画面幅 - 両サイドのpadding * 0.75として4(幅):3(高さ)とする*/
max-height: calc((100vw - 30px) * 0.75);
height: auto;
margin: 20px 0 0;
}
}
/* OB・OGインタビューページタイトル */
.interview .category-desc {
margin-bottom: 8px;
}
.interview .category-desc p {
margin-bottom: 6px;
}
/* -------------------------------------------------------------------------
　app/modules/mod_information_articles_archive_custom/tmpl/default.phpのスタイルを変更
------------------------------------------------------------------------- */
.archive-module-custom {
......@@ -3462,3 +3578,311 @@ body.itemid-132 table {
bottom: 47px;
}
}
/* -------------------------------------------------------------------------
　ビデオライブラリページ
------------------------------------------------------------------------- */
.videos-custom h5 {
padding-left: 0;
font-size: 1.125rem;
background: none;
}
.videos-custom-item-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.videos-custom-item-wrapper:before {
content: "";
display: block;
min-width: 190px;
width: 30%;
height: 0px;
order: 1;
}
.videos-custom-item-wrapper:after {
content: "";
display: block;
min-width: 190px;
width: 30%;
height: 0px;
}
.videos-custom-item {
min-width: 190px;
width: 30%;
margin-bottom: 16px;
}
.videos-custom-item-title {
font-size: 1.125rem;
}
.videos-custom-item-explanation {
font-size: 1rem;
}
/* ビデオライブラリページ レスポンシブ*/
@media (max-width: 900px) {
.videos-custom-item {
width: 45%;
}
.videos-custom-item-wrapper:before {
width: 45%;
}
.videos-custom-item-wrapper:after {
width: 45%;
}
}
@media (max-width: 550px) {
.videos-custom-item-wrapper {
display: block;
}
.videos-custom-item {
height: auto;
width: 100%;
padding-bottom: 8px;
border-bottom: #003894 4px solid;
margin-bottom: 24px;
}
.videos-custom-item-title {
font-size: 1rem;
}
.videos-custom-item-explanation {
font-size: 0.875rem;
}
}
/* -------------------------------------------------------------------------
　フォトライブラリ (メニュー(記事一覧))
------------------------------------------------------------------------- */
.blog.photos-custom .items-leading {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-between;
}
.blog.photos-custom .items-leading > div {
position: relative;
width: calc(50% - 16px);
box-sizing: border-box;
margin: 0 auto 16px 0;
}
/* 記事本文が表示されないようにdisplay: none; */
.blog.photos-custom .items-leading > div > * {
display: none;
}
/* 記事一覧に必要な要素をdisplay: block; */
.blog.photos-custom .items-leading > div .page-header {
display: block;
}
/* 記事一覧に必要な要素をdisplay: block; */
.blog.photos-custom .items-leading > div .article-info {
display: block;
position: absolute;
bottom: -56px;
right: 0;
margin: 0;
padding: 0;
}
/* 記事一覧に必要な要素をdisplay: block; */
.blog.photos-custom .items-leading > div .item-image {
display: block;
float: none;
margin: 0;
overflow: hidden;
}
.blog.photos-custom .items-leading > div .item-image a {
transition: all 1s;
}
.blog.photos-custom .items-leading > div .item-image a img {
transition: all 0.5s;
}
.blog.photos-custom .items-leading > div .item-image:hover a img {
transform: scale3d(1.1, 1.1, 1.1);
}
/* レスポンシブ */
@media (max-width: 500px) {
.blog.photos-custom .items-leading {
display: block;
}
.blog.photos-custom .items-leading > div {
width: 100%;
margin-bottom: 24px;
}
.blog.photos-custom .items-leading > div .article-info {
right: 6px;
}
}
/* -------------------------------------------------------------------------
　フォトライブラリ (記事)
------------------------------------------------------------------------- */
.item-page.photos-custom .page-header {
display: block;
}
.item-page.photos-custom > div {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.item-page.photos-custom > div p {
position: relative;
/* 親要素が最大の幅である840pxのときに幅268pxになる */
width: calc(268/840*100%);
height: 0;
/* paddingで高さを用意する */
/* 自分自身の幅が(840*100%)を基準にしているので、それに対して3:4のアスペクト比になるように高さを用意する */
padding-bottom: calc(201/840*100%);
box-sizing: border-box;
margin-bottom: calc(16/840*100%);
overflow: hidden;
/* border: 2px solid #999999; */
background-color: #fff;
}
.item-page.photos-custom > div p img {
display: block;
/* 親要素の真ん中に表示 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
transition: all 0.5s;
}
.item-page.photos-custom > div p:hover img {
transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1);
}
@media (max-width: 500px) {
.item-page.photos-custom > div p {
width: calc(228/470*100%);
padding-bottom: calc(171/470*100%);
}
}
/* -------------------------------------------------------------------------
フォトライブラリポップアップ
------------------------------------------------------------------------- */
.item-page.photos-custom #photo-popup-wrapper {
display: none;
}
.item-page.photos-custom #photo-popup {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 220;
max-width: 1260px;
max-height: 90%;
overflow: auto;
}
.item-page.photos-custom #photo-popup.Vertical {
width: 60%;
}
.item-page.photos-custom #photo-popup.horizontal {
width: 90%;
}
.item-page.photos-custom #photo-popup #photo-popup-img {
width: 100%;
transition: all 0.5s;
}
.item-page.photos-custom #photo-popup-under {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 210;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
}
.item-page.photos-custom .popup-button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.6);
color: #222;
text-decoration: none;
z-index: 230;
border: 1px solid #999;
transition: all 0.2s;
}
.item-page.photos-custom .popup-button:hover {
box-shadow: #222 0px 0px 3px 1px;
margin-bottom: 1px;
font-weight: bold;
}
.item-page.photos-custom .popup-button:active {
box-shadow: #222 0px 0px 0px 0px;
margin: 0;
font-weight: normal;
}
.item-page.photos-custom #photo-popup-close {
position: fixed;
top: 5%;
right: 5%;
}
.item-page.photos-custom #photo-popup-pre {
position: fixed;
top: 50%;
left: 5%;
transform: translate(0, -50%);
}
.item-page.photos-custom #photo-popup-next {
position: fixed;
top: 50%;
right: 5%;
transform: translate(0, -50%);
}
@media (max-width: 800px) {
.item-page.photos-custom #photo-popup-close {
right: 0;
}
.item-page.photos-custom #photo-popup-pre {
left: 0;
}
.item-page.photos-custom #photo-popup-next {
right: 0;
}
}
\ No newline at end of file
......
templates/protostar/index.php
......@@ -198,6 +198,7 @@ if ($this->params->get('logoFile')) {
<link rel="stylesheet" href="/templates/protostar/css/print.css" media="print">
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/slick.min.js"></script>
<script src="/templates/protostar/js/photo_popup.js"></script>
<link rel="stylesheet" href="./js/slick.css" media="screen" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
......
templates/protostar/js/photo_popup.js 0 → 100644
jQuery(function($) {
/**
* フォトライブラリ用のpopupのためのHTMLをセット
*/
$(document).ready(function() {
const photosCustom = $('.item-page.photos-custom');
if (photosCustom[0]) {
let photosCustomHtml = '';
photosCustomHtml += '<div id="photo-popup-wrapper">';
photosCustomHtml += '<div id="photo-popup">';
photosCustomHtml += '<img id="photo-popup-img" src="" alt="">';
photosCustomHtml += '</div>';
photosCustomHtml += '<a id="photo-popup-close" class="popup-button" href="#">×</a>';
photosCustomHtml += '<a id="photo-popup-pre" class="popup-button" href="#"><</a>';
photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>';
photosCustomHtml += '<div id="photo-popup-under">';
photosCustomHtml += '</div>';
photosCustomHtml += '</div>';
photosCustom.append(photosCustomHtml);
}
// 自動生成されたp要素を削除
let $imgWrppers = $('.item-page.photos-custom > div p');
for (let i = 0; i < $imgWrppers.length; i++) {
// 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない)
if ($imgWrppers[i]['children'].length === 0) {
$('.item-page.photos-custom > div p').eq(i).remove();
}
}
});
/**
* 画面サイズが4:3より縦長の場合は、写真を画面幅いっぱいに表示する。
*/
function setPopup() {
const winW = $(window).innerWidth();
const winH = $(window).innerHeight();
// 画面表示領域のアスペクト比を取得
const asp = winH / winW;
if (asp < 0.75) {
$('#photo-popup').removeClass('horizontal');
$('#photo-popup').addClass('Vertical');
} else {
$('#photo-popup').removeClass('Vertical');
$('#photo-popup').addClass('horizontal');
}
}
/**
* 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
* popupの制御を行う関数の実行。
*/
$('.item-page.photos-custom > div p').on('click', function() {
// クリックされた画像のインデックス番号を取得
let index = $('.item-page.photos-custom > div p').index(this);
// 画像の数を取得
const imagesLength = $('.item-page.photos-custom > div p').length;
changePopup(index, imagesLength);
// popupで表示させる画像URLを取得
const src = $(this).children('img').attr('src');
const $img = $('#photo-popup-img');
// popupに画像URLをセット
$img.attr('src', src);
setPopup();
$(window).resize(function () {
setPopup();
});
setTimeout(function () {
// popupの表示
$('#photo-popup-wrapper').fadeIn();
// popupのみスクロール可とする。
$('body').css('overflow','hidden');
}, 50);
setTimeout(function () {
popupScrollSet($img);
}, 100);
});
/**
* ポップアップの状態の制御
* ･ 画像の切り替え
* ･ ポップアップの表示、非表示
*
* @param {*} index クリックされた画像の親要素の中での順番
* @param {*} imagesLength 画像のインデックス番号の最大値を取得
*/
function changePopup(index, imagesLength) {
$('#photo-popup-pre').off('click').on('click', function() {
const $img = $('#photo-popup-img');
let src = '';
// 透明にする
$img.css('opacity',0);
if (index === 0) {
index = imagesLength - 1;
src = $('.item-page.photos-custom > div p').eq(imagesLength).children('img').attr('src');
} else {
index--;
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
}
setTimeout(function () {
// transitionで透明になりきった時点で画像の差し替えを実行
$img.attr('src', src);
}, 400);
setTimeout(function () {
popupScrollSet($img);
}, 500);
setTimeout(function () {
$('#photo-popup').css('display','');
$img.css('opacity','');
}, 600);
});
$('#photo-popup-next').off('click').on('click', function() {
const $img = $('#photo-popup-img');
let src = '';
// 透明にする
$('#photo-popup-img').css('opacity',0);
if (index === imagesLength - 1) {
index = 0;
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
} else {
index++;
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
}
setTimeout(function () {
// transitionで透明になりきった時点で画像の差し替えを実行
$img.attr('src', src);
}, 400);
setTimeout(function () {
popupScrollSet($img);
}, 500);
setTimeout(function () {
$('#photo-popup').css('display','');
$img.css('opacity','');
}, 600);
});
$('#photo-popup-close').off('click').on('click', function() {
$('#photo-popup-wrapper').fadeOut();
$('body').css('overflow','');
});
$('#photo-popup-under').off('click').on('click', function() {
$('#photo-popup-wrapper').fadeOut();
$('body').css('overflow','');
});
}
/**
* 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。
* @param {*} $img ポップアップに表示している画像
*/
function popupScrollSet($img) {
const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
if (imgHeight > imgWidth) {
const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅
const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率
const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%)
$('#photo-popup').scrollTop(scrollTop);
console.log('test');
}
}
});
\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!