|
Hello,
I have a stories list module on my home page, which looks very nice on desktop, tablet and horizontal mobile view.
However, in VERTICAL MOBILE VIEW (which is how almost all mobile viewers will be viewing it), the layout looks very silly – the display image for each story takes up about 70% of the display width, and then the entire intro text / tags / etc. is squished down a skinny column to the right, so the viewer has to scroll and scroll and will generally give up.
I do not want to make the images smaller, and that wouldn’t even fix the issue.
Can we instead have the option to change the vertical mobile view such that:
1) the display image retains the image shape or is full width view (instead of a square thumbnail), so it goes across the whole screen as it shows when you click into the article, and
2) **most importantly, the title, lead-in text and tags display BELOW the image, instead of next to the image?
If you could provide custom code to fix the issue until you have a chance to put the option in a new version, I’d really appreciate it.
Many thanks! I think these changes would make Pavilion sites using the stories list look much better!!!
All the best,
Megan
|
|
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums! |
|
|
Thanks so much! Worked like a charm. I chose to just center the thumbnail instead of stretching it. It looks much better than before.
As you look for a more elegant solution, please consider using a narrower (vertically) cropped image on the vertical mobile phone view so that the thumbnail does not take up so much vertical space when scrolling. (So that it would be a narrower horizontal image going across the full screen, instead of a square image.)
One further small issue with the stories list: How can I change the dates on the stories to show in the U.S. date order (mm/dd/yyyy) instead of the European/international date order (dd/mm/yyyy)? This would be for all places in which the stories date appears. Many thanks!
|
|
|
Hi,
Date format is taken from catalog/language/YOUR_LANGUAGE/your_language.php. You need to check:
$_['date_format_short'] = 'd/m/Y';
BR,
ThemeBurn team
|
|
|
Hi,
I only have 4 folders under my catalog folder:
Controller
Language
Model
View
Under Language, there is only 1 folder: English
Under English, I have the following file folders and 1 .php file:
account
affiliate
api
checkout
common
error
information
mail
module
openbay
pavilion
payment
product
shipping
tool
total
default.php
Please direct me where I find the your_language.php file?
Thanks!
|
|
|
Hi,
Sorry but we’ve posted a wrong url in our previous post (fixed now). In you case (OC 2.0) the date format should be in:
catalog/language/english/default.php
BR,
ThemeBurn team
|
|
|
Hi tb Support,
I do have the same problem as Megan. However, since you switched to using flex in the Article Module your solution does not work anymore. And I actually do not have any idea how to get this to work. I tried modifying the stories_list.tpl like this
<?php if ($title): ?>
<div class="panel-heading <?php echo $title_classes; ?> text-<?php echo $title_align; ?>">
<h2 class="panel-title"><?php if ($title_icon): ?><span class="tb_icon <?php echo $title_icon; ?>" style="font-size: <?php echo $title_icon_size; ?>%;"></span><?php endif; ?><?php echo $title; ?></h2>
</div>
<?php endif; ?>
<div class="panel-body">
<div class="tb_articles tb_listing tb_compact_view clearfix">
<?php foreach ($stories as $story): ?>
<div class="tb_article tb_item">
<?php if ($story['thumb']): ?>
<div class="row">
<div class="col col-xs-12 col-sm-12 col-md-6 col-lg-6 col-align-center">
<a class="thumbnail" href="<?php echo $story['url']; ?>">
<span class="image-holder" style="max-width: <?php echo $story['thumb_width']; ?>px;">
<span style="padding-top: <?php echo round($story['thumb_height'] / $story['thumb_width'], 4) * 100; ?>%">
<img
<?php if (!$tbData->system['image_lazyload']): ?>
src="<?php echo $story['thumb']; ?>"
<?php else: ?>
src="<?php echo $tbData->theme_catalog_image_url; ?>pixel.gif"
data-src="<?php echo $story['thumb']; ?>"
class="lazyload"
<?php endif; ?>
width="<?php echo $story['thumb_width']; ?>"
height="<?php echo $story['thumb_height']; ?>"
alt="<?php echo $story['title']; ?>"
style="margin-top: -<?php echo round($story['thumb_height'] / $story['thumb_width'], 4) * 100; ?>%" />
/>
</span>
</span>
</a>
</div>
<?php endif; ?>
<div class="col col-xs-12 col-sm-12 col-md-6 col-lg-6 article-listing-custom">
<h4><a href="<?php echo $story['url']; ?>"><?php echo $story['title']; ?></a></h4>
<?php if ($show_text): ?>
<p class="tb_description"><?php echo $story['description']; ?></p>
<?php endif; ?>
<div class="tb_meta">
<?php if ($show_date): ?>
<p class="tb_date">
<i class="fa fa-calendar"></i>
<?php echo $story['date_added']; ?>
</p><?php endif; ?><?php if ($show_tags && $story['tags']): ?><p class="tb_tags">
<i class="fa fa-tags"></i>
<?php $i=1; foreach ($story['tags'] as $tag): ?>
<a href="<?php echo $tag['url']; ?>"><?php echo $tag['name']; ?></a><?php if ($i < count($story['tags'])): ?>, <?php endif; ?>
<?php $i++; endforeach; ?>
</p><?php endif; ?><?php if ($show_comments && $main_settings['comments'] != 'disabled'): ?><p class="tb_commens_count">
<i class="fa fa-comments"></i>
<?php if ($main_settings['comments'] == 'disqus'): ?>
<a href="<?php echo $story['url']; ?>#disqus_thread"></a>
<?php endif; ?>
<?php if ($main_settings['comments'] == 'facebook'): ?>
<a href="<?php echo $story['url']; ?>#comments"><span class="fb-comments-count" data-href="<?php echo $story['url']; ?>"></span></a>
<?php endif; ?>
</p>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
However, this broke the layout of the stories listing in my sidebar.
Any ideas?
Thanks & best,
Torge
|
|
|
OK, for anyone who is interested, I “solved” the problem by modifying stories_list.tpl as follows:
<?php if ($title): ?>
<div class="panel-heading <?php echo $title_classes; ?> text-<?php echo $title_align; ?>">
<h2 class="panel-title"><?php if ($title_icon): ?><span class="tb_icon <?php echo $title_icon; ?>" style="font-size: <?php echo $title_icon_size; ?>%;"></span><?php endif; ?><?php echo $title; ?></h2>
</div>
<?php endif; ?>
<div class="panel-body">
<div class="tb_articles tb_listing tb_compact_view clearfix">
<?php foreach ($stories as $story): ?>
<div class="tb_article tb_item">
<?php if ($story['thumb']): ?>
<div class="row">
<div class="col col-xs-12 col-sm-12 col-md-6 col-lg-6 col-align-center">
<a class="thumbnail" href="<?php echo $story['url']; ?>">
<span class="image-holder" style="max-width: <?php echo $story['thumb_width']; ?>px;">
<span style="padding-top: <?php echo round($story['thumb_height'] / $story['thumb_width'], 4) * 100; ?>%">
<img
<?php if (!$tbData->system['image_lazyload']): ?>
src="<?php echo $story['thumb']; ?>"
<?php else: ?>
src="<?php echo $tbData->theme_catalog_image_url; ?>pixel.gif"
data-src="<?php echo $story['thumb']; ?>"
class="lazyload"
<?php endif; ?>
width="<?php echo $story['thumb_width']; ?>"
height="<?php echo $story['thumb_height']; ?>"
alt="<?php echo $story['title']; ?>"
style="margin-top: -<?php echo round($story['thumb_height'] / $story['thumb_width'], 4) * 100; ?>%" />
/>
</span>
</span>
</a>
</div>
<div class="col col-xs-12 col-sm-12 col-md-6 col-lg-6 article-listing-custom">
<h4><a href="<?php echo $story['url']; ?>"><?php echo $story['title']; ?></a></h4>
<?php if ($show_text): ?>
<p class="tb_description"><?php echo $story['description']; ?></p>
<?php endif; ?>
<div class="tb_meta">
<?php if ($show_date): ?>
<p class="tb_date">
<i class="fa fa-calendar"></i>
<?php echo $story['date_added']; ?>
</p><?php endif; ?><?php if ($show_tags && $story['tags']): ?><p class="tb_tags">
<i class="fa fa-tags"></i>
<?php $i=1; foreach ($story['tags'] as $tag): ?>
<a href="<?php echo $tag['url']; ?>"><?php echo $tag['name']; ?></a><?php if ($i < count($story['tags'])): ?>, <?php endif; ?>
<?php $i++; endforeach; ?>
</p><?php endif; ?><?php if ($show_comments && $main_settings['comments'] != 'disabled'): ?><p class="tb_commens_count">
<i class="fa fa-comments"></i>
<?php if ($main_settings['comments'] == 'disqus'): ?>
<a href="<?php echo $story['url']; ?>#disqus_thread"></a>
<?php endif; ?>
<?php if ($main_settings['comments'] == 'facebook'): ?>
<a href="<?php echo $story['url']; ?>#comments"><span class="fb-comments-count" data-href="<?php echo $story['url']; ?>"></span></a>
<?php endif; ?>
</p>
<?php endif; ?>
</div>
</div>
</div>
<?php else: ?>
<div class="tb_item_info">
<h4><a href="<?php echo $story['url']; ?>"><?php echo $story['title']; ?></a></h4>
<?php if ($show_text): ?>
<p class="tb_description"><?php echo $story['description']; ?></p>
<?php endif; ?>
<div class="tb_meta">
<?php if ($show_date): ?>
<p class="tb_date">
<i class="fa fa-calendar"></i>
<?php echo $story['date_added']; ?>
</p><?php endif; ?><?php if ($show_tags && $story['tags']): ?><p class="tb_tags">
<i class="fa fa-tags"></i>
<?php $i=1; foreach ($story['tags'] as $tag): ?>
<a href="<?php echo $tag['url']; ?>"><?php echo $tag['name']; ?></a><?php if ($i < count($story['tags'])): ?>, <?php endif; ?>
<?php $i++; endforeach; ?>
</p><?php endif; ?><?php if ($show_comments && $main_settings['comments'] != 'disabled'): ?><p class="tb_commens_count">
<i class="fa fa-comments"></i>
<?php if ($main_settings['comments'] == 'disqus'): ?>
<a href="<?php echo $story['url']; ?>#disqus_thread"></a>
<?php endif; ?>
<?php if ($main_settings['comments'] == 'facebook'): ?>
<a href="<?php echo $story['url']; ?>#comments"><span class="fb-comments-count" data-href="<?php echo $story['url']; ?>"></span></a>
<?php endif; ?>
</p>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<?php if ($show_text || $slider): ?>
<script type="text/javascript">
tbApp.init<?php echo $widget->getDomId(); ?> = function() {
tbApp.onScriptLoaded(function() {
<?php // ARTICLE SLIDER ?>
<?php if ($slider): ?>
tbApp.itemSlider<?php echo $widget->getDomId(); ?> = createItemSlider('#<?php echo $widget->getDomId(); ?>', <?php echo count($stories); ?>, <?php echo $slider_step; ?>, <?php echo $slider_speed; ?>, <?php $slider_pagination ? print '\'#' . $widget->getDomId() . ' .tb_slider_pagination\'' : print 'false' ; ?>, {"1200":{"items_per_row":1,"items_spacing":0}}, <?php echo $slider_autoplay; ?>, <?php echo $slider_loop; ?>);
<?php endif; ?>
});
}
<?php if ($slider): ?>
tbApp.exec<?php echo $widget->getDomId(); ?> = function() {
tbApp.onScriptLoaded(function() {
tbApp.itemSlider<?php echo $widget->getDomId(); ?>.refresh();
});
}
<?php endif; ?>
<?php if (empty($within_group)): ?>
tbApp.init<?php echo $widget->getDomId(); ?>();
<?php if ($slider): ?>
tbApp.exec<?php echo $widget->getDomId(); ?>();
<?php endif; ?>
<?php endif; ?>
</script>
<?php endif; ?>
Surely this is not ideal, but it does the trick.
@themeburn: Maybe you could provide a better solution once you find the time. However, I guess getting your awesome theme to work with OC 3 is priority now understandably.
Keep up the great work guys!
|
|
|
@diestadtgaertner
Can you provide a live example or/and a screenshot of what exactly you need? Lots of different requests here and we cannot fully understand yours.
BR,
ThemeBurn team
|
|
