Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dh/slideshow preview #504

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Dh/slideshow preview #504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9fbc6fb
Started making slideshow thumbnails actually match slideshow content.
Jun 8, 2021
2b01e27
Slideshow edit thumbnails for image tiles display images and text lik…
Jun 21, 2021
6fa7fc4
Merge branch 'master' of github.com:castlecms/castle.cms into dh/slid…
Jun 22, 2021
6f75a3f
video thumbnail sizing and text variations configured.
Jun 22, 2021
3a4e0f2
Resource slide thumbnail added.
Jun 22, 2021
56fc6fa
compile resources
Jul 13, 2021
3ab696b
vertical alignment on thumbnails
Jul 13, 2021
c5a14fa
compiled changes
Jul 13, 2021
b54e4b5
Merge branch 'master' of github.com:castlecms/castle.cms into dh/slid…
Jan 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 103 additions & 3 deletions castle/cms/static/less/public/tiles.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -775,15 +775,115 @@ div.mejs-poster.mejs-layer {
margin: 0;
}

// Slideshow thumbnail styles
.slide-thumb {
width: 150px;
height: 150px;
width: 480px;
height: 320px;
background-size: cover;
display: inline-block;
text-align: center;
border: 1px solid black;
margin: 5px;
}

.slide-thumb-left-image {
width: 240px;
height: 320px;
background-size: cover;
}

.slide-thumb-body-text {
font-size: 10px;
}

.slide-thumb-text {
color: white;
text-shadow: 1px 1px 1px black;
width: 480px;
height: 320px;
overflow: auto;
}

.slide-thumb-right-text {
width: 240px;
height: 320px;
margin-left: 240px;
background-color: black;
}

.video-container {
position: absolute;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
height: 320px;
z-index: -100;
background-size: cover;
overflow: hidden;
background-color: black;
}

.slide-thumb-video-section {
position: relative;
}

.slide-thumb-video-section video {
position: relative;
z-index: 0;
}

.slide-thumb-video {
position: absolute;
width: inherit;
height: inherit;
}

.slide-thumb-video-text {
position: absolute;
width: 480px;
height: 320px;
overflow: auto;
top: 0;
left: 0;
z-index: 1;
color: white;
text-shadow: 1px 1px 1px black;
}

.slide-thumb-video-right-text {
width: 240px;
height: 320px;
margin-left: 240px;
background-color: black;
}

.slide-thumb-resource-container {
background-color: black;
color: white;
text-shadow: 1px 1px 1px black;
font-size: 10px;
overflow: auto;
}

.slide-thumb-resource {
display: flex;
align-items: center;
}

.slide-thumb-resource-text {
display: block;
margin-left: 5px;
}

.slide-thumb-resource-title {
color: rgb(56, 125, 255);
}

.resource-slide-image {
height: 80px;
width: 80px;
}

// Parallax edit tiles
.parallax-edit-tile {
position: relative;
Expand Down
4 changes: 2 additions & 2 deletions castle/cms/static/plone-compiled.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion castle/cms/static/plone-compiled.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion castle/cms/static/plone-compiled.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion castle/cms/static/plone-compiled.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion castle/cms/static/plone-logged-in-compiled.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion castle/cms/static/plone-logged-in-compiled.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion castle/cms/static/plone-logged-in-compiled.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

37 changes: 37 additions & 0 deletions castle/cms/tiles/slide.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
from castle.cms.widgets import ImageRelatedItemFieldWidget
from castle.cms.widgets import SlideRelatedItemsFieldWidget
from castle.cms.widgets import VideoRelatedItemsFieldWidget
from plone.app.uuid.utils import uuidToObject
from plone.autoform import directives as form
from plone.supermodel import model
from zope import schema
Expand All @@ -19,6 +20,42 @@ def relatedItems(self):
def slide_type(self):
return self.data.get('display_type', 'background-image')

@property
def slide_media(self):
image = self.data.get('image', None)
video = self.data.get('video', None)
if image is not None:
return uuidToObject(image).absolute_url()
elif video is not None:
return uuidToObject(video).absolute_url()

def slide_hor_align(self, alignment):
hor = self.data.get('hor_text_position', 'center')
if 'background' in self.slide_type:
if hor == 'start':
return '50%' if alignment == 'right' else '0%'
elif hor == 'end':
return '0%' if alignment == 'right' else '50%'
else:
return '0%'

def slide_vert_align(self):
vert = self.data.get('vert_text_position', 'middle')
if vert == 'top':
return '0px'
elif vert == 'middle':
return '100px'
else:
return '200px'

def get_related_resources(self):
if self.data.get('display_type') == 'resource-slide':
try:
related_uuids = self.data.get('related_items')
return [uuidToObject(uuid) for uuid in related_uuids]
except Exception:
pass


class ISlideTileSchema(model.Schema):

Expand Down
141 changes: 99 additions & 42 deletions castle/cms/tiles/templates/slide.pt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,108 @@
xml:lang="en-US" lang="en-US"
xmlns:tal="http://xml.zope.org/namespaces/tal">
<body>
<!-- Full Background Video Slide -->
<div class="slide-thumb" tal:condition="python: view.slide_type == 'background-video'">
<div tal:condition="view/data/video|nothing">
Background Video Slide
</div>
<div tal:condition="not: view/data/video|nothing">
Background Video Slide with no video selected.
</div>
</div>
<tal:defs tal:define="title python: view.data.get('title', '');
text python: view.data.get('text', '');
left_align python: view.slide_hor_align('left');
right_align python: view.slide_hor_align('right');
alignment python: view.data.get('text_alignment', 'center');
vert_align python: view.slide_vert_align();
media view/slide_media;
related_resources python: view.get_related_resources();">
<!-- Full Background Video Slide -->
<section class="slide-thumb slide-thumb-video-section" tal:condition="python: view.slide_type == 'background-video'">
<div class="video-container">
<video class="slide-thumb-video" muted>
<source src="${media}"/>
</video>
<div class="slide-thumb-text-container"
style="text-align: ${alignment};">
<section class="slide-thumb-video-text">
<div style="margin-right: ${right_align};
margin-left: ${left_align};
margin-top: ${vert_align};">${title}</div>
<div class="slide-thumb-body-text"
style="margin-right: ${right_align};
margin-left: ${left_align};">${text}</div>
</section>
</div>
</div>
<div tal:condition="not: view/data/video|nothing">
Background Video Slide with no video selected.
</div>
</section>

<!-- Left Video w/ Right Text Slide-->
<div class="slide-thumb" tal:condition="python: view.slide_type == 'left-video-right-text'">
<div tal:condition="view/data/video|nothing">
Video Slide with right text
</div>
<div tal:condition="not: view/data/video|nothing">
Video Slide with no video selected.
</div>
</div>
<!-- Left Video w/ Right Text Slide-->
<section class="slide-thumb slide-thumb-video-section" tal:condition="python: view.slide_type == 'left-video-right-text'">
<div class="video-container"
style="text-align: ${alignment};">
<video class="slide-thumb-video" muted>
<source src="${media}"/>
</video>
<section class="slide-thumb-video-text slide-thumb-video-right-text">
<div style="margin-top: ${vert_align};">${title}</div>
<div class="slide-thumb-body-text">${text}</div>
</section>
</div>
<div tal:condition="not: view/data/video|nothing">
Video Slide with no video selected.
</div>
</section>

<!-- Full Background Image Slide -->
<div class="slide-thumb" tal:condition="python: view.slide_type == 'background-image'">
<div tal:condition="view/data/image|nothing">
Background Image slide
</div>
<div tal:condition="not: view/data/image|nothing">
Background Image slide with no image selected.
</div>
</div>
<!-- Full Background Image Slide -->
<section class="slide-thumb slide-thumb-bg-image"
tal:condition="python: view.slide_type == 'background-image'"
style="background-image: url('${media}');">
<div tal:condition="not: view/data/image|nothing">
Background Image slide with no image selected.
</div>
<div class="slide-thumb-text-container"
style="text-align: ${alignment};">
<section class="slide-thumb-text">
<div style="margin-right: ${right_align};
margin-left: ${left_align};
margin-top: ${vert_align};">${title}</div>
<div class="slide-thumb-body-text"
style="margin-right: ${right_align};
margin-left: ${left_align};">${text}</div>
</section>
</div>
</section>

<!-- Left Image w/ Right Text Slide -->
<div class="slide-thumb" tal:condition="python: view.slide_type == 'left-image-right-text'">
<div tal:condition="view/data/image|nothing">
Image slide with right text.
</div>
<div tal:condition="not: view/data/image|nothing">
Image slide with no image selected.
</div>
</div>
<!-- Left Image w/ Right Text Slide -->
<section class="slide-thumb-left-image"
tal:condition="python: view.slide_type == 'left-image-right-text'"
style="background-image: url('${media}');">
<div tal:condition="not: view/data/image|nothing">
Image slide with no image selected.
</div>
<div class="slide-thumb-text-container"
style="text-align: ${alignment};">
<section class="slide-thumb-text slide-thumb-right-text">
<div style="margin-top: ${vert_align};">${title}</div>
<div class="slide-thumb-body-text">${text}</div>
</section>
</div>
</section>

<!-- Resource Slide -->
<div class="slide-thumb" tal:condition="python: view.slide_type == 'resource-slide'">
<div>
Resource Slide.
</div>
</div>
<!-- Resource Slide -->
<section class="slide-thumb slide-thumb-resource-container"
tal:condition="python: view.slide_type == 'resource-slide'">
<div>Close slideshow and return to previous page on...</div>
<hr style="margin: 0;">
<div>See also:</div>
<tal:item tal:repeat="resource related_resources">
<div class="slide-thumb-resource">
<img src="${resource/absolute_url}/@@images/image/preview" class="resource-slide-image"/>
<div class="slide-thumb-resource-text">
<p class="slide-thumb-resource-title">${resource/Title}</p>
<p>${python: resource.effective_date.strftime('%B %e, %Y')}</p>
<p class="description">${resource/Description}</p>
</div>
</div>
<hr style="margin: 0;">
</tal:item>
</section>
</tal:defs>
</body>
</html>
Loading