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.
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 am trying to build a justified mixed image and video carousel with the owl-carousel plugin withiin wordpress. I am building this based on a Twig engine environment "Unlimited Elements Widget Creator for Elementor" and using a ACF repeater with two subfields for the content. One for the image and one for the video.
Now I try to setup the logic that "when there is a video in the acf repeater video field then use the video DIV, if not use the image DIV." So the carousel shows either an image or a video depending if there is a video uploaded to the item.
Problem is, what ever I try to check against within the ACF Repeater item loop the carousel either uses only the Image DIVs for all items OR the video DIVs for all items, regardless of either there is a video for the specific item or not.
Here is my testsetup:
<div class="owl-carousel owl-theme" style="direction:ltr; overflow:hidden;" id="{{uc_id}}">
{% for item in current_post.cf_projekt_gallery %}
{% if ".mp4" in "{{item.projekt_gallery_video}}" %}
<div class="item-video">
<video controls preload="none" width="auto" height="{{desktop_height}}" poster="{{item.projekt_gallery_image}}">
<source src="{{item.projekt_gallery_video}}" type='video/mp4' />
</video>
</div>
{% else %}
<div class="item" style="position:relative;">
<a ><img src="{{item.projekt_gallery_image}}" style="width:auto;"></a>
</div>
{% endif %}
{% endfor %}
</div>
Anyone seeing what I am doing wrong?
Thanks!
Solved it:
No {{ }} within {% %} statements!
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.
Am creating my first Jekyll (using version 4.0.0) powered site. Problem is the variables in Front Matter are not recognized.
HTML in _includes (writing-post-featured-image.html)
<figure>
<img class="feat-img" src="{{ site.baseurl }}/assets/images/{{ include.images }}" alt="{{ include.alt | default: 'lorem ipsum' }}" />
<figcaption>{{ include.caption }}</figcaption>
</figure>
In _layout having layout for text based post pages (writings-post.html)
{% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}
Last, in .md file (under _posts) the following Front Matter
layout: writings-post
title: my title
permalink: /writings/:title
featured-image: photo.jpg
featured-image-alt: about photo
caption: photo caption
Output is empty
<figure>
<img class="feat-img" src="" alt="lorem ipsum" />
<figcaption></figcaption>
</figure>
Please help understanding why so. Thanks in advance.
Your syntax is incorrect.
1.) As your passing variables from your page, your include tag should look like this :
{% include writing-post-featured-image.html
image=page.featured-image
alt=page.featured-image-alt
caption=page.caption %}
2.) In your include you have a syntax problem with include.images that should be include.image.
Note : as you're passing existing variables (not computed ones), you can skip passing them to your include, because from within an include you can see page's variables.
{% include writing-post-featured-image.html %}
And your include :
<figure>
<img class="feat-img"
src="{{ site.baseurl }}/assets/images/{{ page.featured-image }}"
alt="{{ page.featured-image | default: 'lorem ipsum' }}" />
<figcaption>{{ page.caption }}</figcaption>
</figure>
The correct syntax on the page of the post is:
{% include writing-post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}
Note the page. syntax, instead of the post. syntax. However, when you have a loop in your layout, you can use this:
{% for post in site.posts %}
{% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}
{% endfor %}
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 :-)