Venture Blog article width and preview photo formatting.

Solved
UpperMountain
Tourist
16 0 0

Hello, 

First post here in the Shopify Community.  Thanks for any help you can send my way, I'd really appreciate it. 

I have 2 Venture Theme blog related questions:

1.  when you click on a blog post to read on my site, the actual article is in one narrow column to the left.  How can I get this to fill the screen to make it easier to read?

https://uppermountainllc.com/blogs/news-products-stories/paracord-pulleys

Screen Shot 2021-02-21 at 12.15.24 PM.png

 

2.  I have the blog previews at the bottom of my home page https://uppermountainllc.com.  I don't care for the way the images are "smushed" together.  Can these be easily separated in some way?

Screen Shot 2021-02-21 at 12.19.47 PM.png

 

0 Likes
JHKCreate
Shopify Partner
2052 334 448

This is an accepted solution.

Hello @UpperMountain 

For your squashed problem, add the following code to your theme.scss.css code:

.grid__item.small--one-whole.medium-up--one-third {
    padding: 15px;
}

 

As for the block not taking full width, it seems to be coded to be 1/3 width 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
UpperMountain
Tourist
16 0 0

That fixed my "smushed" problem perfectly:

Screen Shot 2021-02-21 at 1.34.28 PM.png

.. Thank you!

Would you mind directing me to the main article block code to change it from 1/3 to full width?

i.e. https://uppermountainllc.com/blogs/news-products-stories/h2optix-sunglasses

0 Likes
JHKCreate
Shopify Partner
2052 334 448

This has to be in the page code itself for the block. Can you go into the Article, click on the "</>" button and paste the code here so we can check?

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
UpperMountain
Tourist
16 0 0

This is from blog.liquid, is that what you meant?

{% paginate blog.articles by 5 %}

<div class="page-width">

  <h1>
    {% if current_tags %}
      {{ current_tags.first }}
    {% else %}
      {{ blog.title }}
    {% endif %}
    <a href="{{ shop.url }}{{ blog.url }}.atom" class="blog__rss-link link-accent-color">
      {% include 'icon-rss' %}
      <span class="icon__fallback-text">RSS</span>
    </a>
  </h1>

  <div class="grid">
    <div class="grid__item{% if blog.all_tags.size > 0 %} medium-up--three-quarters large-up--four-fifths{% endif %}">
      {% for article in blog.articles %}
        <div class="content-block">

          <p class="blog__meta">
            {% if article.tags.size > 0 %}
              {% for tag in article.tags %}
                <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="link-body-color"><strong>{{ tag }}</strong></a>{% if forloop.last %} - {% else %}, {% endif %}
              {% endfor %}
            {% endif %}
            {{ article.published_at | time_tag: format: 'date' }}
          </p>

          <h2 class="blog__title-link"><a href="{{ article.url }}">{{ article.title }}</a></h2>

          {% if article.image %}
          
            <div class="content-block__full-image content-block__full-image--large">
              <a href="{{ article.url }}">
                <noscript>
                  {{ article | img_url: '1024x1024' | img_tag: article.title | escape }}
                </noscript>
                <div class="article__photo-container">
                  <div class="article__photo-wrapper" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
                  {% assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="lazyload"
                      src="{{ article.image | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                      data-aspectratio="{{ article.image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ article.title | escape }}">
                  </div>
                </div>
              </a>
            </div>
          {% endif %}

          <div class="rte rte--indented-images">
            {% if article.excerpt.size > 0 %}
              {{ article.excerpt }}
            {% else %}
              <p>{{ article.content | strip_html | truncatewords: 100 }}</p>
            {% endif %}
          </div>

          <p><a href="{{ article.url }}"><strong>{{ 'blogs.article.read_more' | t }}</strong></a></p>

        </div>
      {% endfor %}
    </div>
    {% if blog.all_tags.size > 0 %}
      <div class="grid__item medium-up--one-quarter large-up--one-fifth small--hide">
        <div class="content-block content-block--small">
          <h6 class="content-block__title">{{ 'blogs.article.tags' | t }}</h6>
          <ul class="list--no-bullets list--bold">
            <li>
              <a href="{{ blog.url }}">{{ 'blogs.article.all_tags' | t }}</a>
            </li>
            {% for tag in blog.all_tags %}
              {% if current_tags contains tag %}
              <li>{{ tag }}</li>
              {% else %}
              <li>{{ tag | link_to_tag: tag }}</li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}
  </div>

  {% section 'featured-products-subsection' %}

  {% if paginate.pages > 1 %}
    <div class="pagination">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
    </div>
  {% endif %}

</div>

{% endpaginate %}
0 Likes
JHKCreate
Shopify Partner
2052 334 448

I actually meant the code of the  post itself that you can find inside "Online Store" -> "Blogs"

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
UpperMountain
Tourist
16 0 0

Wow, I've never noticed that or done that before thanks, I think these are it:

(deleted)

0 Likes
JHKCreate
Shopify Partner
2052 334 448

This seems to be the code to your Sunglasses collection, not your actual Blog post as it seems. Can we request collaborator access and check this on our end?

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
UpperMountain
Tourist
16 0 0

Sure, thank you.

Please let me know if I need to do something on my end for the collaboration, regards.

0 Likes
JHKCreate
Shopify Partner
2052 334 448

Hi @UpperMountain 

Invite sent, we'll have a look shortly after you approve it.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes