I'm looking find a nice way to resize images uploaded by my client using CloudCannon.
I've looked at Jekyll plugins for doing this but they don't seem to play nicely with CloudCannon.
Does anyone have any tips or tricks for getting this to work?
Here is the code I am currently using:
<div class="section blog">
<div class="container">
<div class="row blog__items">
{% for post in site.posts %}
<div class="blog__item col-xs-6 col-sm-4">
<div class="article">
<div class="article__head">
<a href="{{ site.baseurl }}{{ post.url }}" class="article__media">
<img src="{{ site.baseurl }}{{ post.image }}">
</a>
<h3 class="article__title">{{ post.title }}</h3>
</div>
<div class="article__body">
<div class="article__meta">
<p class="article__date"><small>Posted on {{ post.date | date: "%d %B, %Y" }}</small></p>
</div>
<div class="article__text">
{{ post.description }}
</div>
Read More
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
I would use an 'image resize service' or 'image resize CDN'.
I have benchmarked a few. They all work kind-of the same, but all have their specifics. Some are free, some not. Google even has its own unofficial free image resize service (somebody got the link?). ImgIX is nice, but performed really bad at low-traffic websites when I tested it some time ago. They seem to have addressed the issue recently (2017), but I did not retest it.
For low-traffic websites I recommend to use the free images.weserv.nl.
To use this solution, replace this part:
<img src="{{ site.baseurl }}{{ post.image }}">
with this:
<img src="//images.weserv.nl?url={{ site.baseurl | replace:'http://','' }}{{ post.image }}&w=600">
This will create a default compressed image with a width of 600 pixels, with a quality setting of 85% (if jpg). For more info, see the documentation.
Note that with images.weserv.nl you will have only one shot at creating the resized image. There is no option to change or clear the cache if the request failed (or the image changed). The cache will automatically be deleted/expire in a month or so.
CEO of CloudCannon here. We find a lot of people are running into problems with image sizing. Joost's suggestion is great and is the best answer we have right now.
With that said we are working on a way to resize images on upload which we think is a better solution for a couple of reasons:
Large images won't bloat your repository as much
There's no need to rely on a 3rd party to resize them on the live site
If you'd like for information feel free to get in touch with our support :-)
Related
I’m new and don’t know CSS. I used a template on my Django site.
When I add image links directly on the html page, they automatically size into the picture grid.
However, when I add code and upload the pictures from the website, they all display with different sizes.
I want them all consistent and fitting the pre-determined box size.
<div class="container-fixed">
<div class="adoption1">
<h1 class="wow fadeIn animated">Meet our Penguins</h1>
<div class="grid-cats wow">
{% for post in posts %}
<div class="col-md-4 thumbs">
<a href="">
<figure class="effect-marley">
<img src="{{ post.image2.url }}" alt=""/>
<figcaption>
<h2>SUPER<span>CUTE</span></h2>
<p>{{ post.content }}</p>
</figcaption>
</figure>
</a>
</div>
{% endfor %}
if you want to resize the image size override your model save method
from PIL import Image
def save(self,*args,**kwargs):
super().save(*args,**kwargs)
img = Image.open(self.image2.path)
if img.height>your_max_height or img.width>your_max_width:
out_size =(your_desired_height ,your_desired_width)
img.resize(out_size)
img.save(self.image2.path)
I know that it has to do womething with category.twig which is in /catalog/view/theme/YOURTHEME/template/product/category.twig
I tried to do whatever instructions I found in forums.
I tried this and I tried that
I tried to refresh Cache.
I need more help. What I am doing wrong? Or maybe these instructions that I tried are wrong?
Seems like you are doing everything right. Make sure that in /catalog/view/theme/YOURTHEME/template/product/category.twig YOURTHEME is actually your current theme. From the tutorial for thumb and description take this code
{% if thumb or description %}
<div class="row"> {% if thumb %}
<div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
{% endif %}
{% if description %}
<div class="col-sm-10">{{ description }}</div>
{% endif %}
</div>
<hr>
{% endif %}
Or only for description take
{% if description %}
<div class="col-sm-10">{{ description }}</div>
{% endif %}
And replace it anywhere in this template file (almost everywhere actually).
The most important is to clear twig cache. On howto do that i have described the process in the other article earlier, please read
https://stackoverflow.com/a/61524855/3187127
After that - click Ctrl F5 if you are using Chrome or Firefox (or other combination in your browser which reloads page with cache cleaning) while you are on a category page.
As a novice starting out on GitHub Pages, I am lost among the sea of materials on the web that seem to help with my following problem:
I am using Jekyll to build my blog hosted via GitHub Pages and would like to add a background image in my default homepage like this.
So, how do I do it? I have started out, but have little to no knowledge of HTML / CSS and would thus be grateful for a simple way to do the same.
I am currently using the default minima theme! :)
Minima doesn't have a provision to easily render a "cover photo" like you expect to. But that doesn't mean, it is impossible to render one.
When using Minima, your homepage is rendered via the file ./index.md and layout file _layouts/home.html. So, if your working directory doesn't contain the home layout, create the _layouts directory with a file named home.html.
The home layout in Minima
I'll explain what the layout contains so that you'll be able to use that knowledge in other areas.
The layout contains the following code. Copy the entire code below into the _layouts/home.html file you just created in the above step:
---
layout: default
---
<div class="home">
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
{{ content }}
{%- if site.posts.size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{%- for post in site.posts -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</h3>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<p class="rss-subscribe">subscribe via RSS</p>
{%- endif -%}
</div>
Let's dissect the layout chunk by chunk:
---
layout: default
---
This is a front matter block that tells Jekyll the 'home' layout is a subset of the 'default' layout.
<div class="home">
This opens up a container for everything else on the home page and is closed by the </div> on the very last line.
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
This a template instruction that would render the home page's title if it was provided in the front matter inside file ./index.md.
{{ content }}
This is another template instruction that pulls in content (anything apart fron the front matter) from the file using this layout. In our case, that would be ./index.md.
The remaining chunk {%- if site.posts.size > 0 -%} cycles through the posts in your site and renders a list of those posts.
The cover image
We now have a fair idea regarding what our template is made of. But there is no mention of the code to render the cover-photo.
Agreed. So, let us code that in then. Insert the code from the following steps before the line with {{ content }} in the layout
First, add a container for the image.
<div class="hero">
</div>
Then insert the HTML markup to render the image of your choice (say, ./assets/home-feature.jpg) within it:
<div class="hero">
<img class="feature-img" src="{{ 'assets/home-feature.jpg' | relative_url }}" />
</div>
With just the above markup, your image would perhaps be too big for your page. So we should constrain the size with some CSS styling.
Minima uses Sass partials to generate the CSS for your site. Therefore, we'll need to overwrite a partial with some custom code.
Create a new directory named _sass with a subdirectory named minima and finally a file inside the _sass/minima directory named _layout.scss. Copy the contents at this link into that file.
Now add the following custom code towards the end of the file:
/* Cover Image */
.hero {
.feature-img: {
max-width: 100%;
}
}
Rendering background image
All of the above is to just render a cover-photo. To render the image as a proper background-image, you can do the following..
First, we need to adjust the markup to render text in the foreground and image only as the background:
<div class="hero">
{{ page.hero_text }}
</div>
With the above in place you are now able to control the text over your background-image via front matter in ./index.md.
And then bring back the image using CSS:
/* Cover Image */
.hero {
background: url('../home-feature.jpg');
}
Getting the url to your image is a little tricky since we can't use Liquid instructions inside sass partials in vanilla Jekyll. So you'll have to experiment with it for your particular site.
For more tips regarding CSS backgrounds, check this link
Have you look into the inspector tool? Another easy way is to look at the code snippet of that website which you can find here: https://github.com/mnp-club/mnp-club.github.io
I'm pulling up the exact code for what they do to achieve that effect this will :
https://github.com/mnp-club/mnp-club.github.io/blob/master/_layouts/page.html
<div id="main" role="main">
<article class="entry">
{% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}"{% endif %}
// Alternatively a simpler way will be to just include the img src code.
// <img src="insert-image-url.jpg" class="entry-feature-image"/>
// Whole bunch of code for body here
</article>
</div>
And to make it a full-width header image, just give it a css of
.entry-feature-image {
width: 100%;
}
My blog run on jekyll minima and github pages as well and I have a default header for certain pages. Making it full width is just a matter of CSS.
https://github.com/wing-puah/thegeekwing-jekyll/blob/master/_layouts/default.html
What you can do is just add the html code for the image to the _layouts/default.html file.
There are different ways to achieve what you want. Understand that you have little experience with html and css but I will suggest to pull up the inspector tools and see the code to identify which code does what. Hope that helps!
I am building a classroom bulletin board (40" display). I want to be able to choose articles to display. The site is Django2 driven.
However, I can not get the content to display. All I get is an empty iframe. I've read some articles that say that this is blocked by most web servers as click stealing.
The only posts I find on the subject are either too simple or too old.
Can someone knowledgeable tell me if this is at all possible?
{% with scheduledArticles|first as sArticle %}
<div class="card">
<img class="card-img-top img-fluid" src="{{ MEDIA_URL }}/{{ sArticle.image }}" alt="">
<div class="card-header ml-auto">
<img src="{{ MEDIA_URL }}/{{ sArticle.qrcCodeImage }}" alt="" width="50">
</div>
<div class="card-body">
<h4 class="card-title">{{ sArticle.title }}</h4>
<iframe src="{{ sArticle.articleURL }}" width="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</div>
{% endwith %}
(BTW, I am crediting the author, this shouldn't violate copyright.)
After searching for a long time the answer was literally right under my nose! (Always ;-)
IN the console of my web browser was the following message...
Refused to display 'https://www.w3schools.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
iFrames are USELESS with 3rd party content, as most of the sites block their usage!
So the quest continues, I know that sites like Flipboard display article snippets, but I still don't know how.
so I just started working with Jekyll and GitHub-Pages so I can run my own portfolio website. Since making things pretty is a weak point of mine, I picked up a Jekyll version of the HTML5UP Helios Template to modify for my purposes. Here is the current website (work in progress I know)
I decided to make my project pages each into posts, such that it'd be easy to add a new one if need be; each post would also have the left sidebar layout as its template, which you can see on the nav-bar.
I thought it would be easy enough to just link the markdown files to their own pages, and just use the template. Here is an example of what I was trying to do with one of the "carousel" posts:
---
layout: left-Sidebar
title: C++ Big Int Class
desc: This is a sample post that is added under the "desc" part of the YAML.
img: pic01.jpg
categories: carousel
---
and here is where I link it in the carousel:
{% for post in site.categories.carousel %}
<article>
<img src="images/{{ post.img }}" alt="" />
<header>
<h3>{{ post.title }}</h3>
</header>
<p>{{ post.desc }}</p>
</article>
{% endfor %}
now I'd think that that would work, however I instead get a post that looks like this: (I don't have enough reputation to post more than two links, so you can find it by clicking the carousel link called "C++ Big Int Class")
If anyone could tell me what is wrong (as well as any other errors you may find I'm new to this) that would be very appreciated.
I'd post the file tree structure, but it's way to large, so if you'd like to see the other files, you can check them out in my Github repo here
Pages are losing the style because you are including css and js with relative paths, e.g.:
in https://joe-mccann.github.io/carousel/2015/02/01/carousel1.html
<script src="js/jquery.min.js"></script>
That script would be expected to be at https://joe-mccann.github.io/carousel/2015/02/01/js/jquery.min.js.
To fix it, include them with the full path using this filter absolute_url:
<script src="{{ 'js/jquery.min.js' | absolute_url }}"></script>