サポート
トップページの新着エントリーに画像を表示したい
たかし (2018/08/14 11:04)
設置URL ： https://www.google.com/
ダミーURLにて失礼します。
トップページの新着エントリーに日付とタイトルだけでなく、画像を表示したいと考えています。
エントリーギャラリーを活用しようかと試行錯誤しましたが、プログラミング知識が乏しくて上手く設置することができませんでした。
設置することができるのかどうか？できるのであれば設置方法を教えていただけないでしょうか。よろしくお願いします。
ccc (2018/08/14 16:40)
URL ： http://cccabinet.jpn.org/
トップページの新着エントリーに日付とタイトルだけでなく、画像を表示したいと考えています。
エントリーギャラリーを活用しようかと試行錯誤...
一番手っ取り早いのは、エントリーギャラリーを使ったものですが、templates/utility.html の110～114行目あたりにある
<ul class="gallery">
<!--{foreach from=$plugin_entry_galleries|smarty:nodefaults item='plugin_entry_gallery'}-->
<li><a href="{$freo.core.http_file}/view/{if $plugin_entry_gallery.code}{$plugin_entry_gallery.code}{else}{$plugin_entry_gallery.id}{/if}"><!--{if $plugin_entry_gallery.image}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$plugin_entry_gallery.id}/{$plugin_entry_gallery.image}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" /><!--{elseif $plugin_entry_gallery_thumbnails[$plugin_entry_gallery.id]}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_thumbnails/{$plugin_entry_gallery.id}/{$plugin_entry_gallery.file}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" /><!--{elseif $plugin_entry_gallery.file}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$plugin_entry_gallery.id}/{$plugin_entry_gallery.file}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" /><!--{elseif $plugin_entry_gallery_medias[$plugin_entry_gallery.id].file}--><img src="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].file}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" /><!--{else}-->{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}<!--{/if}--></a></li>
<!--{/foreach}-->
</ul>を templates/internals/default/default.html の任意の場所に貼り付ければとりあえず表示はされるはずです。
あとはcss/default.css で設定を調整すればよろしいかと。
（続く）
ccc (2018/08/14 16:41)
URL ： http://cccabinet.jpn.org/
（続き）
また、エントリーギャラリーを使わない場合は、上記コードを
<ul class="gallery">
<!--{foreach from=$entries|smarty:nodefaults item='entry'}-->
<li><a href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}"><!--{if $entry.image}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$entry.id}/{$entry.image}" alt="{$entry.memo|default:$entry.title}" title="{$entry.memo|default:$entry.title}" /><!--{elseif $entry_thumbnails[$entry.id]}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_thumbnails/{$entry.id}/{$entry.file}" alt="{$entry.memo|default:$entry.title}" title="{$entry.memo|default:$entry.title}" /><!--{elseif $entry.file}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/{$entry.id}/{$entry.file}" alt="{$entry.memo|default:$entry.title}" title="{$entry.memo|default:$entry.title}" /><!--{elseif $entry_medias[$entry.id].file}--><img src="{$entry_medias[$entry.id].file}" alt="{$entry.memo|default:$entry.title}" title="{$entry.memo|default:$entry.title}" /><!--{else}-->{$entry.memo|default:$entry.title}<!--{/if}--></a></li>
<!--{/foreach}-->
</ul>にしてはいかがでしょうか？
※上記は plugin_entry_galleries の部分を entries に、plugin_entry_gallery の部分を entry に変更したものです。
たかし (2018/08/14 21:28)
URL ： https://www.google.com/
ccc 様
返信ありがとうございます。
無事にトップページに画像を表示することが出来ました。
後はcssでレイアウトの調整をしてみます。
とても助かりました。
ありがとうございます。
たかし (2018/08/15 08:42)
URL ： https://www.google.com/
ccc 様
すみません、今度はcssでつまづいてしまいました。
画像 ｜画像 ｜画像 ｜
日付 ｜日付 ｜日付 ｜
タイトル｜タイトル｜タイトル｜
このように配置することはできそうなのですが、スマホで表示することを考慮して
-------
画像
日付
タイトル
-------
画像
日付
タイトル
-------
画像
日付
タイトル
-------
このように配置したいですが、可能でしょうか？
可能であれば方法を教えていただきたいです。
度々申し訳ありませんがよろしくお願いします。
ミツ (2018/08/26 22:22)
URL ： http://32877.xii.jp
こんにちは。
あくまで一例ですが、
#entry{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.entry{
width: 30%;
margin: 10px 1%;
}
@media screen and (min-width : 480px) {
.entry{
width: 100%;
margin: 10px 0;
}
}のようにすれば、PC表示では３カラム、スマホ表示では１カラムにできると思います。
display: flexを使わない場合でも、
.entry{
width: 30%;
margin: 10px 1%;
float: left;
}
@media screen and (min-width : 480px) {
.entry{
width: 100%;
margin: 10px 0;
float: none;
}
}などのようにすればよろしいのではないでしょうか。
「レスポンシブデザイン」「display: flex」「カラム数変更」などで検索してみてください。
たかし (2018/08/31 09:24)
ミツ様
返信ありがとうございます。
参考例の記載までしていただきありがとうございます。
無事に思い描いたレイアウトにすることができました！
助かりました。本当にありがとうございました。
返信
- この記事に返信します。
- 返信の際は、設置URL以外の項目は入力必須です。