tech day 2015 - fokus på fokus

Fokus på fokusRobin Helly, .NET-utvecklare

Fokus på fokusVarför blev det så krångligt att beställa en fotobok?

Robin Helly, .NET-utvecklare

Ordbok

• Egenskap

• Format

Varför behövs ett bildredigeringsverktyg?

• Responsiva webbar

• Högupplöst vs normal upplösning

• Samma bild i olika sammanhang

Vad vore ett bra sätt att hantera bilder på?

• Det ska finnas en bra överblick över tillgängliga bilder

• Bilden ska bara behöva laddas upp en gång och inte 1 gång/format

• Inget större kunskapskrav för att kunna hantera systemet

• All bildredigering ska bara behövas göras en gång och gälla överallt

• Det ska finnas stöd för responsivitet

• Det ska gå snabbt och vara enkelt

Verktyget

• Listning

• Öppning av bild

• Redigering av bild

Demo

Listning

_client.Query<ImageToolThumbnail>()

.OrderByDescending(t => t.DateAdded)

.ToList();

Listning

_client.Query<ImageToolThumbnail>()

.OrderByDescending(t => t.DateAdded)

.ToList();

Listning

_client.Query<ImageToolThumbnail>()

.OrderByDescending(t => t.DateAdded)

.ToList();

Listning

_client.Query<ImageToolThumbnail>()

.OrderByDescending(t => t.DateAdded)

.ToList();

Hämta formaten

var imageFormats = _client.Query<MediaFormatBase>()

.Where(p => p.SystemFormat == false)

.ToList()

.Select(format => _imageFormatService

.GetOrCreateSystemFormatFor(format as ImageFormat, id))

.ToList();

Hämta formaten

var imageFormats = _client.Query<MediaFormatBase>()

.Where(p => p.SystemFormat == false)

.ToList()

.Select(format => _imageFormatService

.GetOrCreateSystemFormatFor(format as ImageFormat, id))

.ToList();

Hämta formaten

var imageFormats = _client.Query<MediaFormatBase>()

.Where(p => p.SystemFormat == false)

.ToList()

.Select(format => _imageFormatService

.GetOrCreateSystemFormatFor(format as ImageFormat, id))

.ToList();

Hämta formaten

var imageFormats = _client.Query<MediaFormatBase>()

.Where(p => p.SystemFormat == false)

.ToList()

.Select(format => _imageFormatService

.GetOrCreateSystemFormatFor(format as ImageFormat, id))

.ToList();

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Hämta eller skapa ett format

if (matchingSystemIds.IsNullOrEmpty())

{

systemId = CreateDefaultSystemFormatFrom(editorFormat);

PersistFormatMapping(imageId, editorFormat.Id, systemId);

}

else { systemId = matchingSystemIds.FirstOrDefault(); }

return

_client.Query<ImageFormat>().FirstOrDefault(s => s.Id == systemId);

Hämta bilden med formaten

var populateQuery = new MediaItemPopulationQuery

{

MediaFormats = systemFormats.ToList(),

PublishIdentifier = _client.PublishIdentifier

};

Hämta bilden med formaten

var populateQuery = new MediaItemPopulationQuery

{

MediaFormats = systemFormats.ToList(),

PublishIdentifier = _client.PublishIdentifier

};

Hämta bilden med formaten

var mediaService = _client.CreateChannel<IMediaService>();

populateQuery = mediaService.PreparePopulateQuery(populateQuery);

var query = new MediaItemQuery

{

Filter = { Id = { id } },

Populate = populateQuery

};

return mediaService.Find(query);

Hämta bilden med formaten

var mediaService = _client.CreateChannel<IMediaService>();

populateQuery = mediaService.PreparePopulateQuery(populateQuery);

var query = new MediaItemQuery

{

Filter = { Id = { id } },

Populate = populateQuery

};

return mediaService.Find(query);

Hämta bilden med formaten

var mediaService = _client.CreateChannel<IMediaService>();

populateQuery = mediaService.PreparePopulateQuery(populateQuery);

var query = new MediaItemQuery

{

Filter = { Id = { id } },

Populate = populateQuery

};

return mediaService.Find(query);

Hämta rätt bildformat

var editorFormats =

_client.Query<MediaFormatBase>()

.Where(f =>

AspectRatioFor(((ImageFormat)f)).Equals(ratioOriginal))

.ToList()

.Select(f => (ImageFormat)f)

.ToList();

Hämta rätt bildformat

var editorFormats =

_client.Query<MediaFormatBase>()

.Where(f =>

AspectRatioFor(((ImageFormat)f)).Equals(ratioOriginal))

.ToList()

.Select(f => (ImageFormat)f)

.ToList();

Hämta rätt bildformat

var editorFormats =

_client.Query<MediaFormatBase>()

.Where(f =>

AspectRatioFor(((ImageFormat)f)).Equals(ratioOriginal))

.ToList()

.Select(f => (ImageFormat)f)

.ToList();

Uppdatera formaten

var cropEffect = new CropEffect { Height = height, Width = width, X = x, Y = y };

foreach (var format in editorFormats) {

var resizeEffect = new ResizeEffect {

Height = format.Height,

Width = format.Width,

ResizeMode = ResizeMode.ScaleToFill

};

var systemFormat = new ImageFormat();

systemFormat.Effects.Add(cropEffect);

systemFormat.Effects.Add(resizeEffect);

_imageFormatService.UpdateSystemFormatFor(systemFormat, editorFormat, id);

}

Uppdatera formaten

var cropEffect = new CropEffect {

Height = height,

Width = width,

X = x,

Y = y };

Uppdatera formaten

foreach (var format in editorFormats) {

var resizeEffect = new ResizeEffect {

Height = format.Height,

Width = format.Width,

ResizeMode = ResizeMode.ScaleToFill

};

...

}

Uppdatera formaten

foreach (var format in editorFormats) {

...

var systemFormat = new ImageFormat();

systemFormat.Effects.Add(cropEffect);

systemFormat.Effects.Add(resizeEffect);

...

}

Uppdatera formaten

foreach (var format in editorFormats) {

...

_imageFormatService.UpdateSystemFormatFor(

systemFormat,

editorFormat,

id);

}

Varför underlättar verktyget?

• Det ska finnas en bra överblick över tillgängliga bilder

• Bilden ska bara behöva laddas upp en gång och inte 1 gång/format

• Inget större kunskapskrav för att kunna hantera systemet

• All bildredigering ska bara behövas göras en gång och gälla överallt

• Det ska finnas stöd för responsivitet

• Det ska gå snabbt och vara enkelt

Varför underlättar verktyget?

Det ska finnas en bra överblick över tillgängliga bilder

Bilden ska bara behöva laddas upp en gång och inte 1 gång/format

Inget större kunskapskrav för att kunna hantera systemet

All bildredigering ska bara behövas göras en gång och gälla överallt

Det ska finnas stöd för responsivitet

Det ska gå snabbt och vara enkelt

Tack!

Robin Helly robin.helly@valtech.se